CSS Archives - An artist's personal website

Add hamburger menu in CSS bootstrap 3

Posted on April 16, 2018 by akash073

<div class="container">
<div class="row">

    <!--  <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
         <div class="container">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
             </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>-->
          <!-- <div class="col-xs-6">-->

          <!--  </div>-->
           <!-- <div class="col-xs-6">-->
                <!--<div class="socialSection clearfix">
                    <ul class="nav nav-pills pull-right">
                        <li class="backToHome"><a href="http://www.nascenia.com/">BACK TO HOME</a></li>
                        <li><a href="http://www.facebook.com/nascenia"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                        <li><a href="https://twitter.com/nasceniaIT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a href="http://www.linkedin.com/company/1132301"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                        <li><a href="http://www.youtube.com/user/Nascenia"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
                        <li><a href="https://www.behance.net/Nascenia"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
                        <li><a href="http://www.pinterest.com/nascenia/"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                        <li><a href="https://github.com/nascenia"><i class="fa fa-github" aria-hidden="true"></i></a></li>
                    </ul>
                </div>-->
                <nav class="navbar navbar-inverse navbar-static-top" role="navigation">

                <div class="navbar-header">
                    <a class="logo" href="http://www.nascenia.com/">
                        <img class="img-responsive" src="img/logo.png" alt="">
                    </a>
                    <button id="hamburger-btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                   <!-- <ul class="nav navbar-nav ">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>-->
                    <div class="">
                        <ul class="nav  navbar-nav ">
                            <li class="backToHome"><a href="http://www.nascenia.com/">BACK TO HOME</a></li>
                            <li><a href="http://www.facebook.com/nascenia"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                            <li><a href="https://twitter.com/nasceniaIT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                            <li><a href="http://www.linkedin.com/company/1132301"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                            <li><a href="http://www.youtube.com/user/Nascenia"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
                            <li><a href="https://www.behance.net/Nascenia"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
                            <li><a href="http://www.pinterest.com/nascenia/"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                            <li><a href="https://github.com/nascenia"><i class="fa fa-github" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </div>
                    </nav>
            </div>
        <!--</div>-->
</div>

<!-- <nav class="navbar navbar-inverse navbar-static-top" role="navigation">

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li><a href="about.php">About</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</div>

</nav>-->

<!--<div class="socialSection clearfix">

</ul>

</div>-->

</a>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<!-- <ul class="nav navbar-nav ">

<li><a href="about.php">About</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>-->

</ul>

</div>

</nav>

</div>

</div>

Css topics to learn

Posted on June 13, 2017 by akash073

01.Media Queries 02.Selectors 03.Pseudo-classes 04.Web Fonts 05.Text Effects 06.Layout 07.Backgrounds 08.Colors 09.Gradients 10.Transition and Animations Details…

Some CSS notes

Posted on May 28, 2017July 19, 2017 by akash073

##media query for desktop first development

@media(max-width: 1271px){
  .friend-communication-link.white-color.top-margin-align{
    margin-top: 33px;
    margin-right: 6px;
  }
}
@media(min-width: 1024px) and (max-width: 1270px){
  .mobile-left-padding{
    padding-left: 72px !important;
  }
  .col-lg-12 .biodata-communication-details{
    margin-right: 16px;
  }
}
@media(min-width: 768px) and (max-width: 991px){
  .mobile-left-padding{
    padding-left: 55px !important;
  }
  .col-lg-12 .biodata-communication-details{
    margin-right: 15px;
  }
}
@media(max-width: 767px) {
  .mobile-left-padding{
    padding-left: 87px !important;
  }
  .col-lg-12 .biodata-communication-details{
    margin-right: 0px;
  }
}

@media(max-width: 1271px){

.friend-communication-link.white-color.top-margin-align{

margin-top: 33px;

margin-right: 6px;

}

@media(min-width: 1024px) and (max-width: 1270px){

.mobile-left-padding{

padding-left: 72px !important;

}

.col-lg-12 .biodata-communication-details{

margin-right: 16px;

}

@media(min-width: 768px) and (max-width: 991px){

.mobile-left-padding{

padding-left: 55px !important;

}

.col-lg-12 .biodata-communication-details{

margin-right: 15px;

}

@media(max-width: 767px) {

.mobile-left-padding{

padding-left: 87px !important;

}

.col-lg-12 .biodata-communication-details{

margin-right: 0px;

}

##transform line-height https://www.w3schools.com/css/css_combinators.asp #combinator A CSS selector can Details…

All about css from lynda

Posted on April 5, 2017April 5, 2017 by akash073

C01. Div/h1 is a element which is start ans end tag and it is non-replaceable Details…

Hello Less

Posted on December 12, 2016 by akash073

1.Download Visual Studio Web Essential link 2.Add a Less file This link may help less

Large Modal with Tables in Asp.net Web Form

Posted on November 21, 2016 by akash073

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="FocClaim.aspx.cs" Inherits="NewReports_FocClaim" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script src="../Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="../Scripts/moment.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap-datepicker.min.js" type="text/javascript"></script>
    <link href="../Styles/custom.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <%--<link href="../Styles/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />--%>
    <link href="../Styles/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="../Scripts/dataTables.bootstrap.js" type="text/javascript"></script>
    <link href="../Styles/fixed-header.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/fixed-header.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <style>
        @media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}
    </style>
    <script>
        $(function () {

            $("#grdvFoc").dataTable({
                "aaSorting": [],
                "bPaginate": false,
                fixedHeader: true
            });
            $('#grdvFoc').addClass("table table-hover table-striped table-bordered");
            $('.btn').click(function (e) {
                e.preventDefault();
                var productModel = $(this).closest('tr').find('td').eq(0).text().trim();
                var totalimportedhandset = $(this).closest('tr').find('td').eq(2).text().trim();
                if (totalimportedhandset === null || totalimportedhandset === '') {
                    totalimportedhandset = 0;
                }
                $('#tbl tr:not(:first)').remove();
                $('#large').modal({
                    show: true,
                    backdrop: 'static'
                });
                $.ajax({
                    type: "POST",
                    url: "FocClaim.aspx/GetDetails",
                    data: JSON.stringify({ 'productModel': productModel, 'totalimportedhandset': totalimportedhandset }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                       // console.log(result.d);

                        for (var i = 0; i < result.d.length; i++) {
                            var tr = '<tr>';
                            //alert(result.d[i].AreaName + "->" + result.d[i].ServicePointID);
                            tr = tr + '<td>' + result.d[i].Model + '</td>';
                            tr = tr + '<td>' + result.d[i].Items + '</td>';
                            tr = tr + '<td>' + result.d[i].Warranty + '</td>';
                            tr = tr + '<td>' + result.d[i].NonWarranty + '</td>';
                            tr = tr + '<td>' + result.d[i].TotalConsumtion + '</td>';
                            tr = tr + '<td>' + result.d[i].Total_Issued_Spare + '</td>';
                            tr = tr + '<td>' + result.d[i].Spare_To_Import_Ratio + '</td>';
                            //alert(option);

                            tr = tr + '</tr>';
                            $('#tbl > tbody:last').append(tr);

                            //console.log(tr);
                        }
                    }
                });
            });
        })
    </script>
    <div class="container">
        <div class="row">
            <div class="col-lg-10">
                <fieldset class="scheduler-border">
                    <legend class="scheduler-border">Report</legend>
                    <div class="col-lg-12">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        FOC Claim
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <asp:GridView ID="grdvFoc" runat="server" ClientIDMode="Static" AutoGenerateColumns="False">
                                        <Columns>
                                            <asp:BoundField DataField="ProductModel" HeaderText="ProductModel" />
                                            <asp:BoundField DataField="supplierName" HeaderText="supplierName" />
                                            <asp:BoundField DataField="Totalimportedhandset" HeaderText="Totalimportedhandset" />
                                            <asp:BoundField DataField="AGES" HeaderText="AGES" />
                                            <asp:BoundField DataField="Warranty" HeaderText="Warranty" />
                                            <asp:BoundField DataField="NonWarranty" HeaderText="NonWarranty" />
                                            <asp:BoundField DataField="TotalConsumtion" HeaderText="TotalConsumtion" />
                                            <asp:BoundField DataField="Total_Issued_Spare" HeaderText="Total_Issued_Spare" />
                                            <asp:BoundField DataField="Spare_To_Import_Ratio" HeaderText="Spare_To_Import_Ratio" />
                                            <asp:TemplateField>
                                                <HeaderTemplate>
                                                    Deltails
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:Button ID="btnDetails" runat="server" Text="btnDetails" CssClass="btn btn-primary" />
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                    </asp:GridView>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="col-lg-1">
            </div>
        </div>
        <!-- /.modal -->
        <!-- /.modal -->
    </div>
    
    <div class="modal fade" id="large">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Details</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                        <div class="col-lg-12">
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table id="tbl" class="table table-hover table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>
                                                    Model
                                                </th>
                                                <th>
                                                    Items
                                                </th>
                                                <th>
                                                    Warranty
                                                </th>
                                                <th>
                                                    NonWarranty
                                                </th>
                                                <th>
                                                    TotalConsumtion
                                                </th>
                                                <th>
                                                    Total_Issued_Spare
                                                </th>
                                                <th>
                                                    Spare_To_Import_Ratio
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
               <%-- This is some text.--%>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</asp:Content>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeFile="FocClaim.aspx.cs" Inherits="NewReports_FocClaim" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">

<%--<link href="../Styles/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />--%>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

<style>

@media screen and (min-width: 768px) {

.custom-class {

width: 70%; /* either % (e.g. 60%) or px (400px) */

}

</style>

$(function () {

$("#grdvFoc").dataTable({

"aaSorting": [],

"bPaginate": false,

fixedHeader: true

});

$('#grdvFoc').addClass("table table-hover table-striped table-bordered");

$('.btn').click(function (e) {

e.preventDefault();

var productModel = $(this).closest('tr').find('td').eq(0).text().trim();

var totalimportedhandset = $(this).closest('tr').find('td').eq(2).text().trim();

if (totalimportedhandset === null || totalimportedhandset === '') {

totalimportedhandset = 0;

}

$('#tbl tr:not(:first)').remove();

$('#large').modal({

show: true,

backdrop: 'static'

});

$.ajax({

type: "POST",

url: "FocClaim.aspx/GetDetails",

data: JSON.stringify({ 'productModel': productModel, 'totalimportedhandset': totalimportedhandset }),

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (result) {

// console.log(result.d);

for (var i = 0; i < result.d.length; i++) {

var tr = '<tr>';

//alert(result.d[i].AreaName + "->" + result.d[i].ServicePointID);

tr = tr + '<td>' + result.d[i].Model + '</td>';

tr = tr + '<td>' + result.d[i].Items + '</td>';

tr = tr + '<td>' + result.d[i].Warranty + '</td>';

tr = tr + '<td>' + result.d[i].NonWarranty + '</td>';

tr = tr + '<td>' + result.d[i].TotalConsumtion + '</td>';

tr = tr + '<td>' + result.d[i].Total_Issued_Spare + '</td>';

tr = tr + '<td>' + result.d[i].Spare_To_Import_Ratio + '</td>';

//alert(option);

tr = tr + '</tr>';

$('#tbl > tbody:last').append(tr);

//console.log(tr);

}

});

})

</script>

<legend class="scheduler-border">Report</legend>

FOC Claim

</h3>

</div>

<asp:GridView ID="grdvFoc" runat="server" ClientIDMode="Static" AutoGenerateColumns="False">

<asp:BoundField DataField="ProductModel" HeaderText="ProductModel" />

<asp:BoundField DataField="supplierName" HeaderText="supplierName" />

<asp:BoundField DataField="Totalimportedhandset" HeaderText="Totalimportedhandset" />

<asp:BoundField DataField="AGES" HeaderText="AGES" />

<asp:BoundField DataField="Warranty" HeaderText="Warranty" />

<asp:BoundField DataField="NonWarranty" HeaderText="NonWarranty" />

<asp:BoundField DataField="TotalConsumtion" HeaderText="TotalConsumtion" />

<asp:BoundField DataField="Total_Issued_Spare" HeaderText="Total_Issued_Spare" />

<asp:BoundField DataField="Spare_To_Import_Ratio" HeaderText="Spare_To_Import_Ratio" />

<asp:TemplateField>

Deltails

</HeaderTemplate>

<asp:Button ID="btnDetails" runat="server" Text="btnDetails" CssClass="btn btn-primary" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</fieldset>

</div>

</div>

</div>

<h3 class="modal-header-text">Details</h3>

</div>

<thead>

<tr>

<th>

Model

</th>

<th>

Items

</th>

<th>

Warranty

</th>

<th>

NonWarranty

</th>

<th>

TotalConsumtion

</th>

<th>

Total_Issued_Spare

</th>

<th>

Spare_To_Import_Ratio

</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<%-- This is some text.--%>

</div>

</div>

</div>

</div>

</asp:Content>

and

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public class Foc
{
    public String ProductModel { get; set; }
    public String supplierName { get; set; }
    public long Totalimportedhandset { get; set; }
    public long AGES { get; set; }
    public Decimal Warranty { get; set; }
    public Decimal NonWarranty { get; set; }
    public Decimal TotalConsumtion { get; set; }
    public Decimal Total_Issued_Spare { get; set; }
    public Decimal Spare_To_Import_Ratio  { get; set; }
}

public class FocDetails
{
    public String Model { get; set; }
    public String Items { get; set; }
    public Decimal Warranty { get; set; }
    public Decimal NonWarranty { get; set; }
    public Decimal TotalConsumtion { get; set; }
    public Decimal Total_Issued_Spare { get; set; }
    public Decimal Spare_To_Import_Ratio { get; set; }
}
public partial class NewReports_FocClaim : System.Web.UI.Page
{
    public static DataTable GetDataTableFromSqlQuery(String query)
    {
        string waltonCrmConnectionString = ConfigurationManager.ConnectionStrings["RBSynergyConnectionString"].ConnectionString;
        var dt = new DataTable();
        using (var connection = new SqlConnection(waltonCrmConnectionString))
        {
            connection.Open();
            var dataAdapter = new SqlDataAdapter(query, connection);
            dataAdapter.SelectCommand.CommandTimeout = 6000;
            dataAdapter.Fill(dt);

        }
        return dt;
    }
    public static List<T> DataTableToList<T>(DataTable table) where T : class, new()
    {
        

        List<T> list = new List<T>();

        foreach (var row in table.AsEnumerable())
        {
            T obj = new T();

            foreach (var prop in obj.GetType().GetProperties())
            {
                try
                {
                    PropertyInfo propertyInfo = obj.GetType().GetProperty(prop.Name);
                    propertyInfo.SetValue(obj, Convert.ChangeType(row[prop.Name], propertyInfo.PropertyType), null);
                }
                catch
                {
                    continue;
                }
            }

            list.Add(obj);
        }

        return list;

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        String query = @"select pm.ProductModel,
(select COUNT(1) Totalimportedhandset 
from tblBarCodeInv b
where b.Model=pm.ProductModel) Totalimportedhandset,
ISNULL((select DATEDIFF(day, ReleaseDate, GETDATE()) AGES
from (
select Model,ReleaseDate ,
Row_number() OVER( partition BY Model ORDER BY ReleaseDate) RowNumber
from tblCellPhoneDepriciationPrice  p 
) X where X.RowNumber=1and X.Model=pm.ProductModel),0) AGES,

ISNULL((select sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty
--,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where rd.ItemCode not in ('SPAR.MOBL.00000','SPAR.MOBL.99999')
and rd.ItemStatus='Used' and Sm.Model=pm.ProductModel
group by sm.Model),0) Warranty,
ISNULL((select --sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,
sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where rd.ItemCode not in ('SPAR.MOBL.00000','SPAR.MOBL.99999')
and rd.ItemStatus='Used' and Sm.Model=pm.ProductModel
group by sm.Model),0) NonWarranty,
(select supplierName from tblSupplierModelInfo where Model=pm.ProductModel) supplierName
from tblProductMaster pm
where ProductType='Cell Phone'
and pm.DateAdded>='2014-01-01'
order by pm.ProductModel";
        List<Foc> focs = DataTableToList<Foc>(GetDataTableFromSqlQuery(query));
        if (focs.Any())
        {
            foreach (var foc in focs)
            {
                foc.TotalConsumtion = foc.Warranty + foc.NonWarranty;
                if (foc.Totalimportedhandset != 0)
                {
                    foc.Total_Issued_Spare =
                        Math.Round((foc.TotalConsumtion/foc.Totalimportedhandset)*100, 2);


                    foc.Spare_To_Import_Ratio =
                        Math.Round((foc.Warranty/foc.Totalimportedhandset)*100, 2);
                }

            }
            grdvFoc.DataSource = focs;
            grdvFoc.DataBind();
            grdvFoc.UseAccessibleHeader = true;
            grdvFoc.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
       
    }

    [WebMethod]
    public static List<FocDetails> GetDetails(String productModel, String totalimportedhandset)
    {
        String query = String.Format(@"select Sm.Model,'Touch' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where  rd.ItemName not like '%LCD%' and  rd.ItemName  like '%Touch%'
and rd.ItemStatus='Used' and sm.Model='{0}'
group by sm.Model
union all
select Sm.Model,'LCD' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where  rd.ItemName  like '%LCD%' and  rd.ItemName not like '%Touch%'
and rd.ItemStatus='Used' and sm.Model='{0}'
group by sm.Model
union all
select Sm.Model,'TouchWithLcd' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where  rd.ItemName  like '%LCD%' and  rd.ItemName  like '%Touch%'
and rd.ItemStatus='Used' and sm.Model='{0}'
group by sm.Model
union all
select Sm.Model,'SubPcba' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where  rd.ItemName  like '%sub%' 
and rd.ItemStatus='Used' and sm.Model='{0}'
group by sm.Model
union all
select Sm.Model,'Battery' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty
from WSMS.dbo.Requisition r
left join WSMS.dbo.RequisitionDetail rd
on r.RequisitionID=rd.RequisitionID
inner join WSMS.dbo.ServiceMaster sm
on r.ServiceId=sm.ServiceID
where  rd.ItemName like '%Battery%' 
and rd.ItemStatus='Used' and sm.Model='{0}'
group by sm.Model", productModel);
        List<FocDetails> focDetails = DataTableToList<FocDetails>(GetDataTableFromSqlQuery(query));
        Decimal Totalimportedhandset = Convert.ToDecimal(totalimportedhandset);
        foreach (var foc in focDetails)
        {
            foc.TotalConsumtion = foc.Warranty + foc.NonWarranty;
            if (Totalimportedhandset != 0)
            {
                foc.Total_Issued_Spare =
                    Math.Round((foc.TotalConsumtion / Totalimportedhandset) * 100, 2);


                foc.Spare_To_Import_Ratio =
                    Math.Round((foc.Warranty / Totalimportedhandset) * 100, 2);
            }

        }

        return focDetails;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Reflection;

using System.Web;

using System.Web.Services;

using System.Web.UI;

using System.Web.UI.WebControls;

public class Foc

{

public String ProductModel { get; set; }

public String supplierName { get; set; }

public long Totalimportedhandset { get; set; }

public long AGES { get; set; }

public Decimal Warranty { get; set; }

public Decimal NonWarranty { get; set; }

public Decimal TotalConsumtion { get; set; }

public Decimal Total_Issued_Spare { get; set; }

public Decimal Spare_To_Import_Ratio { get; set; }

}

public class FocDetails

{

public String Model { get; set; }

public String Items { get; set; }

public Decimal Warranty { get; set; }

public Decimal NonWarranty { get; set; }

public Decimal TotalConsumtion { get; set; }

public Decimal Total_Issued_Spare { get; set; }

public Decimal Spare_To_Import_Ratio { get; set; }

}

public partial class NewReports_FocClaim : System.Web.UI.Page

{

public static DataTable GetDataTableFromSqlQuery(String query)

{

string waltonCrmConnectionString = ConfigurationManager.ConnectionStrings["RBSynergyConnectionString"].ConnectionString;

var dt = new DataTable();

using (var connection = new SqlConnection(waltonCrmConnectionString))

{

connection.Open();

var dataAdapter = new SqlDataAdapter(query, connection);

dataAdapter.SelectCommand.CommandTimeout = 6000;

dataAdapter.Fill(dt);

}

return dt;

}

public static List<T> DataTableToList<T>(DataTable table) where T : class, new()

{

List<T> list = new List<T>();

foreach (var row in table.AsEnumerable())

{

T obj = new T();

foreach (var prop in obj.GetType().GetProperties())

{

try

{

PropertyInfo propertyInfo = obj.GetType().GetProperty(prop.Name);

propertyInfo.SetValue(obj, Convert.ChangeType(row[prop.Name], propertyInfo.PropertyType), null);

}

catch

{

continue;

}

list.Add(obj);

}

return list;

}

protected void Page_Load(object sender, EventArgs e)

{

String query = @"select pm.ProductModel,

(select COUNT(1) Totalimportedhandset

from tblBarCodeInv b

where b.Model=pm.ProductModel) Totalimportedhandset,

ISNULL((select DATEDIFF(day, ReleaseDate, GETDATE()) AGES

from (

select Model,ReleaseDate ,

Row_number() OVER( partition BY Model ORDER BY ReleaseDate) RowNumber

from tblCellPhoneDepriciationPrice p

) X where X.RowNumber=1and X.Model=pm.ProductModel),0) AGES,

ISNULL((select sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty

--,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemCode not in ('SPAR.MOBL.00000','SPAR.MOBL.99999')

and rd.ItemStatus='Used' and Sm.Model=pm.ProductModel

group by sm.Model),0) Warranty,

ISNULL((select --sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,

sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemCode not in ('SPAR.MOBL.00000','SPAR.MOBL.99999')

and rd.ItemStatus='Used' and Sm.Model=pm.ProductModel

group by sm.Model),0) NonWarranty,

(select supplierName from tblSupplierModelInfo where Model=pm.ProductModel) supplierName

from tblProductMaster pm

where ProductType='Cell Phone'

and pm.DateAdded>='2014-01-01'

order by pm.ProductModel";

List<Foc> focs = DataTableToList<Foc>(GetDataTableFromSqlQuery(query));

if (focs.Any())

{

foreach (var foc in focs)

{

foc.TotalConsumtion = foc.Warranty + foc.NonWarranty;

if (foc.Totalimportedhandset != 0)

{

foc.Total_Issued_Spare =

Math.Round((foc.TotalConsumtion/foc.Totalimportedhandset)*100, 2);

foc.Spare_To_Import_Ratio =

Math.Round((foc.Warranty/foc.Totalimportedhandset)*100, 2);

}

grdvFoc.DataSource = focs;

grdvFoc.DataBind();

grdvFoc.UseAccessibleHeader = true;

grdvFoc.HeaderRow.TableSection = TableRowSection.TableHeader;

}

[WebMethod]

public static List<FocDetails> GetDetails(String productModel, String totalimportedhandset)

{

String query = String.Format(@"select Sm.Model,'Touch' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemName not like '%LCD%' and rd.ItemName like '%Touch%'

and rd.ItemStatus='Used' and sm.Model='{0}'

group by sm.Model

union all

select Sm.Model,'LCD' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemName like '%LCD%' and rd.ItemName not like '%Touch%'

and rd.ItemStatus='Used' and sm.Model='{0}'

group by sm.Model

union all

select Sm.Model,'TouchWithLcd' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemName like '%LCD%' and rd.ItemName like '%Touch%'

and rd.ItemStatus='Used' and sm.Model='{0}'

group by sm.Model

union all

select Sm.Model,'SubPcba' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemName like '%sub%'

and rd.ItemStatus='Used' and sm.Model='{0}'

group by sm.Model

union all

select Sm.Model,'Battery' Items,sum(CASE when sm.WarrantyAvailable=1 then 1 else 0 end) Warranty,sum(CASE when sm.WarrantyAvailable<>1 then 1 else 0 end) NonWarranty

from WSMS.dbo.Requisition r

left join WSMS.dbo.RequisitionDetail rd

on r.RequisitionID=rd.RequisitionID

inner join WSMS.dbo.ServiceMaster sm

on r.ServiceId=sm.ServiceID

where rd.ItemName like '%Battery%'

and rd.ItemStatus='Used' and sm.Model='{0}'

group by sm.Model", productModel);

List<FocDetails> focDetails = DataTableToList<FocDetails>(GetDataTableFromSqlQuery(query));

Decimal Totalimportedhandset = Convert.ToDecimal(totalimportedhandset);

foreach (var foc in focDetails)

{

foc.TotalConsumtion = foc.Warranty + foc.NonWarranty;

if (Totalimportedhandset != 0)

{

foc.Total_Issued_Spare =

Math.Round((foc.TotalConsumtion / Totalimportedhandset) * 100, 2);

foc.Spare_To_Import_Ratio =

Math.Round((foc.Warranty / Totalimportedhandset) * 100, 2);

}

return focDetails;

}

Some SemanticUi Works

Posted on November 20, 2016November 20, 2016 by akash073

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/semantic/semantic.min.css" rel="stylesheet" />
<script src="~/Scripts/semantic/semantic.min.js"></script>
<h2>Commercial Index</h2>

    @using (Html.BeginForm("Upload", "Upload", FormMethod.Post,
        new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true)

        <div class="ui form">
            <div class="inline fields">
                <div class="eight wide field">
                    <label>Name</label>

                </div>

                <div class="sixteen wide field">
                    <input type="text" placeholder="Last Name">
                </div>
            </div>
        </div>
        <div class="ui form">
            <div class="inline fields">
                <div class="eight wide field">
                    <label>Phone Type</label>
                </div>
                <div class="sixteen wide field">
                    <select>
                        <option value="">Gender</option>
                        <option value="1">Male</option>
                        <option value="0">Female</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="ui form">
            <div class="inline fields">
                <div class="eight wide field">
                    <label>Model Approx Price</label>
                </div>
                <div class="sixteen wide field">
                    <input type="text" placeholder="Last Name">
                </div>
            </div>
        </div>
        <div class="ui form">
            <div class="inline fields">
                <div class="eight wide field">
                    <label>No of Sample</label>
                </div>
                <div class="sixteen wide field">
                    <select>
                        <option value="">Gender</option>
                        <option value="1">Male</option>
                        <option value="0">Female</option>
                    </select>
                </div>
            </div>
        </div>

    }

<h2>Commercial Index</h2>

@using (Html.BeginForm("Upload", "Upload", FormMethod.Post,

new { enctype = "multipart/form-data" }))

{

@Html.ValidationSummary(true)

</div>

</div>

<label>Phone Type</label>

</div>

<option value="">Gender</option>

<option value="0">Female</option>

</select>

</div>

<label>Model Approx Price</label>

</div>

</div>

<label>No of Sample</label>

</div>

<option value="">Gender</option>

<option value="0">Female</option>

</select>

</div>

}

Responsive table with bootstrap panel

Posted on November 19, 2016November 20, 2016 by akash073

Reference bootstrap and

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>
                                        A
                                    </th>
                                    <th>
                                        B
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        2
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<thead>

<tr>

<th>

</th>

<th>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

if you want to add by jQuery use

$("p").addClass("table table-hover table-striped table-bordered table-striped");

1	$("p").addClass("table table-hover table-striped table-bordered table-striped");

for fixed Details…