Thursday, July 2, 2015

ASP.NET C# Code for PAGING in GridView

How to implement Paging in GridView  (ASP.NET  C# Example)

Coding in the Example.aspx file is given in Red

<body>
    <form id="form1" runat="server">
    <div>
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:Panel ID="MainPanel" runat="server" ScrollBars="Both" Height="500" Width="99%">
         
 <asp:UpdatePanel ID="upCrudGrid" runat="server">
  <ContentTemplate>
   <asp:GridView ID="GridView1" runat="server"
   Width="95%" HorizontalAlign="Center"
   OnRowCommand="GridView1_RowCommand"
   OnRowDataBound="GridView1_RowDataBound"
   AutoGenerateColumns="false"
   AllowPaging="true"
  OnPageIndexChanging="GridView1_PageIndexChanging"
   DataKeyNames="PoId"
   CssClass="table ">
    <Columns>
       <asp:TemplateField HeaderText="SNo." HeaderStyle-Width="20px">
                    <ItemTemplate>
                        <asp:Label ID="lblSerial" runat="server"></asp:Label>
                    </ItemTemplate>
      </asp:TemplateField>    
 
     <asp:ButtonField CommandName="detail"
         ControlStyle-CssClass="btn btn-info btn-mini"

.................

</body>
</html>
======================================
Coding in the Example.aspx.cs file is given in Red



        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            GridView1.PageIndex = e.NewPageIndex;
            if (Session["SortedView"] != null)
            {
                GridView1.DataSource = Session["SortedView"];
                GridView1.DataBind();
            }
            else
            {
                GridView1.DataSource = GetDataSource(sPublicSql);
                GridView1.DataBind();
            }
        }


The GetDatasource  function can be created as shown below:

       public DataTable GetDataSource(string query)
        {
            SqlDataAdapter da = new SqlDataAdapter(query, conn);
            DataTable dt1 = new DataTable();
            da.Fill(dt1);
            return dt1;
        }

Wednesday, July 1, 2015

How to Make Bootstrap Modal Draggable?

How to Make  Bootstrap Modal Draggable?

Step:1   Insert data-backdrop="false" in the line which contains data-toggle="modal"

<a href="#myModal" data-backdrop="false" data-toggle="modal">Show Me</a>

Step : 2  Put the following javascript inside the head:

<script>
        $('.modal').modal({ keyboard: false,  show: true        });
   
        $('.modal-dialog').draggable({
            handle: ".modal-header"
        });
</script>


You may try the following script also



$("#myModal").draggable({
    handle: ".modal-header"
});