locked
Bootstrap Responsive GridView for Mobile Phone, Tablet, laptop RRS feed

  • Question

  • User-475949336 posted

    I'm using the article at to build my webform GridView responsive, but when I integarated all moduls together: menu, tab, footable, it appear PROBLEMS:


    1) Gridview2 on 'add new' tab always display as on laptop.


    2) In mobile, gridview2 on 'add new' tab, when i focus on textBoxs for input text, it do not show virtual keyboard (example: press '+' sign to extend row 1, then press to extend row 2, focus to textbox on row 2 -> no keyboard poup)


    3) In laptop, gridview2 on 'add new' tab, when i focus on textBoxs for input text, then click '-' sign to collapse, then all values I inputed are remove.

    4) I can't remove last row of gridview2

    this is my code:

    - Main.master
    
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Quanlynhachothue.Main" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        
    <title></title>
    
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    
    
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
    
      <style type="text/css">            
         
        @media (max-width: 992px) {
        .navbar-header {
            float: none;        
        }
        .navbar-left,.navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
            
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);        
            
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;        
        }
        .navbar-collapse.collapse {
            display: none!important;        
        }
        .navbar-nav {
            float: none!important;
            margin-top: 7.5px;
            
        }
        .navbar-nav>li {
            float: none;        
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;        
        }
        .collapse.in{
            display:block !important;
            
        }
    }
    
            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
                
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;            
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
                
            }
            .dropdown-submenu.pull-left
            {
                float: none;
                
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;            
            }
        </style>
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>       
    
    </head>
    <body>   
        <form id="main"  runat="server">   
      
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="./">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="font-family:Arial;background-color: #1A8CFF" >
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
    
                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>
    - Main.master.cs
    
     
    
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Quanlynhachothue
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                      DataTable dt = this.GetData(0);
                      PopulateMenu(dt, 0, null);               
                }
            }
                    
            private DataTable GetData(int parentMenuId)
            {
               
    
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });
    
    
                dt.Rows.Add(0, 1, "Home", "~/CS.aspx");
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/frmtabcontrolHoadonDichvu.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");
    
    
                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }
    
                return dtFinal;            
            }
            
    
            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
           
        }
    }
    - CS.aspx
    
     
    
    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" EnableEventValidation="false"  AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="Quanlynhachothue.CS" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <asp:Content id="Content1" ContentPlaceHolderID="head" Runat="Server">     
         
    
    </asp:Content> 
    
    <asp:Content id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">          
    
        <asp:UpdatePanel id="UpdatePanel1" runat="server"> 
        <ContentTemplate>
       
        <div class="tab-content" style="width: auto; border:none; font-family:Arial; font-size:larger; color:#1443AB; font-weight:bold; text-align:center; padding: 1px; margin: 1px">
         GRIDVIEW
        </div> 
                           <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
    
                            <div id="dvTab">
                                
                                <ul class="nav nav-tabs" role="tablist"  style="font-weight: bold">
                                    <li runat="server" id="idListtab" class="active"><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab"  data-toggle="tab">LIST</a></li>
                                    <li runat="server" id="idAddnewtab"><a href="#Addnewtab" style="outline:none" aria-controls="Addnewtab" role="tab" data-toggle="tab">ADD NEW</a></li>
                                    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">EDIT</a></li>
                                    <li runat="server" id="idViewtab"><a href="#Viewtab" style="outline:none" aria-controls="Viewtab" role="tab" data-toggle="tab">VIEW</a></li>
                                                                  
                                </ul>
    
      <div class="tab-content" style="padding-top: 5px">
                                    
      <!-- Begin List -->  
       <div role="tabpanel"  class="tab-pane active" id="Listtab">                    
                                       
        <div> 
    
        <asp:ScriptManager id="toolScriptManageer1" runat="server">
        </asp:ScriptManager> 
     
    	<label for="tungay">From &nbsp;&nbsp;&nbsp;       
        <asp:TextBox id="txtTungay" width="128px" Height ="30px" runat="server" MaxLength="10"  AutoPostBack="true"   ></asp:TextBox>            
                <ajaxToolkit:CalendarExtender id="Calendarfromdate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtTungay" format="dd/MM/yyyy" />
    	</label> 
       
            
        <label for="denngay">To &nbsp;
             
        <asp:TextBox id="txtDenngay" width="128px" Height ="30px"   AutoPostBack="true" runat="server" MaxLength="10" ></asp:TextBox>  
            <ajaxToolkit:CalendarExtender id="Calendartodate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtDenngay" format="dd/MM/yyyy" />	
    
        </label> 
    		 
    
       <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="txtTrangthai" width="128px" Height ="30px"  AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
        
     </div>
     <br/>
     
        <asp:GridView id="GridView1"  CssClass="footable" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px" >
        
        <Columns>
                <asp:BoundField DataField="Id" HeaderText="Customer Id" />
                <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                <asp:BoundField DataField="Salary" HeaderText="Salary" />         
        </Columns>                       
        </asp:GridView> 
    
        <input type="hidden" runat="server" id="hidMaHDDV" />                       
                                       
        </div>                                                              
        <!-- End List -->
    
    
         <!-- Begin Addnew -->
          <div role="tabpanel" class="tab-pane" id="Addnewtab">
                
          <div> 
           
          <label for="thangnam">Month &nbsp;&nbsp;&nbsp;       
                          <asp:TextBox id="txtThangNam_addnew"  width="128px"  Height ="30px" runat="server"  MaxLength="7" ></asp:TextBox>            
    
                          <ajaxToolkit:CalendarExtender id="calendar1" ClientIDMode="Static" runat="server" TargetControlID="txtThangNam_addnew" Format="MM/yyyy" 
                          DefaultView="Months" OnClientShown="onCalendarShown"
                          OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />                        
           </label> 
    
        <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="DropDownList_Status"  OnSelectedIndexChanged="DropDownList_Status_selectedIndexChanged"   AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
                 
        </div>
        
          
          <asp:Gridview id="GridView2" CssClass="footable" OnRowCreated="GridView2_RowCreated"   runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px">
                      
                <Columns>                
                
                    <asp:TemplateField HeaderText="Id" >
                        <ItemTemplate>
                            <asp:Label ID="txtId" Width="80px"  Text='<%# Eval("MyId") %>'  runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                    <asp:TemplateField HeaderText="Customer Name" >
                        <ItemTemplate>
                            <asp:Label ID="txtName" Width="80px"  Text='<%# Eval("MyName") %>'  runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                     <asp:TemplateField HeaderText="Country" >
                        <ItemTemplate>
                            <asp:TextBox ID="txtCountry" Width="80px"  Text='<%# Eval("MyCountry") %>'  runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Salary" >
                        <ItemTemplate>
                            <asp:TextBox ID="txtSalary"  Width="80px"  runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="50px" >
                        <ItemTemplate>
                            <asp:Button ID="bttRemoveRow" Width="50px" Text="Remove" runat="server" onclick="bttRemoveRow_Click" Class="btn-primary"></asp:Button>
                        </ItemTemplate>
                    </asp:TemplateField>
                                                            
                </Columns>
            </asp:Gridview>        
                            
        </div>
         <!-- End Addnew -->
    
          <!-- Begin Edit -->
            <div role="tabpanel" class="tab-pane" id="Edittab">
                 Edit         
            </div>
          <!-- End Edit -->
    
    
           <!-- Begin View -->
             <div role="tabpanel" class="tab-pane" id="Viewtab">
                View 
             </div>
            <!-- End View -->
                                    
            </div>
            </div>
            </div>
    
        <asp:HiddenField ID="HiddenTab" runat="server" />
    
        </ContentTemplate>
        </asp:UpdatePanel>
    
         <!-- Panel  End-->      
       
        <script type="text/javascript">
        
        $(function () { 
            SetTabs();
    
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null)
        {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetTabs();
                }
            });
        };
        function SetTabs() {
            var tabName = $("[id*=HiddenTab]").val() != "" ? $("[id*=HiddenTab]").val() : "Listtab";
            $('#dvTab a[href="#' + tabName + '"]').tab('show');
            $("#dvTab a").click(function () {
                $("[id*=HiddenTab]").val($(this).attr("href").replace("#", ""));
            });
        };
       
    </script>      
        
         <script type="text/javascript">
                  
            function pageLoad() {
                $('[id*=GridView1]').footable();
                $('[id*=GridView2]').footable();
                
            }
        </script>      
        
        
      <script type="text/javascript">
         function onCalendarHidden() {  // Call on Addnew 
            var cal = $find("calendar1");
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
         }
             
        function onCalendarShown() {
    
            var cal = $find("calendar1");
    
            cal._switchMode("months", true);
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
        }
    
        function call(eventElement) {
            var target = eventElement.target;
            switch (target.mode) {
                case "month":
                    var cal = $find("calendar1");
                    cal._visibleDate = target.date;
                    cal.set_selectedDate(target.date);
                    //cal._switchMonth(target.date);
                    cal._blur.post(true);
                    cal.raiseDateSelectionChanged();
                    break;
            }
        }
      </script>       
        
        
    </asp:Content>
    - CS.aspx.cs
    
     
    
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Quanlynhachothue
    {
        public partial class CS : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
                    dt.Rows.Add(1, "John Hammond", "United States", 70000);
                    dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
                    dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
                    dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
    
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                    
                    //Attribute to show the Plus Minus Button.
                    GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
                    //Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    
                }
    
            }
    
            protected void Create_GridView2()
             {
                DataTable dt1 = new DataTable();
                DataRow dr = null;
                  
                dt1.Columns.AddRange(new DataColumn[4]
                {
                    new DataColumn("MyId"),
                    new DataColumn("MyName"),
                    new DataColumn("MyCountry"),
                    new DataColumn("MySalary")
                });
    
    
                for (int i = 1; i < 6; i++)
                    {
                        dr = dt1.NewRow();
                        dr["MyId"] = i;
                        dr["MyName"] = string.Empty;
                        dr["MyCountry"] = string.Empty;
                        dr["MySalary"] = string.Empty;
                        dt1.Rows.Add(dr);
                    }
    
                 //Store the DataTable in ViewState for future reference 
                    ViewState["CurrentTable"] = dt1;
    
                    //Bind the Gridview 
                    GridView2.DataSource = dt1;
                    GridView2.DataBind();
    
    
                    GridView2.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView2.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                    GridView2.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
                    //Adds THEAD and TBODY to GridView.
                    GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
            }
            protected void DropDownList_Status_selectedIndexChanged(object sender, EventArgs e)
            {
              //  try
               // {
                    if (DropDownList_Status.SelectedItem.Text != "All")
                    {
                        Create_GridView2();
                    }
              //  }
               // catch
               // {
                   // return;
               // }
            }
            protected void GridView2_RowCreated(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    Button lb = (Button)e.Row.FindControl("bttRemoveRow");
    
                    if (lb != null)
                    {
                        if (dt.Rows.Count > 1)
                        {
                            if (e.Row.RowIndex == dt.Rows.Count - 1)
                            {
                                lb.Visible = false;
                            }
                        }
                        else
                        {
                            lb.Visible = false;
                        }
                    }
                }
            }
            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex < dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                        }
    
                    }
    
    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                }
    
                //Set Previous Data on Postbacks
                SetPreviousData();
            }
    
            private void SetPreviousData()
            {
    
                int rowIndex = 0;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 0)
                    {
    
                        for (int i = 0; i < dt.Rows.Count; i++)
                        {
    
                            Label txt_Id = (Label)GridView2.Rows[i].Cells[4].FindControl("txtId");
                            Label txt_Name = (Label)GridView2.Rows[i].Cells[5].FindControl("txtName");
                            TextBox txt_Country = (TextBox)GridView2.Rows[i].Cells[6].FindControl("txtCountry");
                            TextBox txt_Salary = (TextBox)GridView2.Rows[i].Cells[6].FindControl("txtSalary");
    
    
                            if (i < dt.Rows.Count - 1)
                            {
                                txt_Id.Text = dt.Rows[i]["MyId"].ToString();
                                txt_Name.Text = dt.Rows[i]["MyName"].ToString();
                                txt_Country.Text = dt.Rows[i]["MyCountry"].ToString();
                                txt_Salary.Text = dt.Rows[i]["MySalary"].ToString();
        
    
                            }
    
                            rowIndex++;
                        }
                    }
                }
            }
        }
    }
    

    GRIDVIEW1 PICTURE:

    GRIDVIEW2 PICTURE:

    I spent 3 days for reseach and google but can't find solution.

    Please help me, sorry for dummy

    Sunday, April 5, 2020 3:54 PM

Answers

  • User-719153870 posted

    Hi test0101,

    You did the right thing to change the #example to #<%=GridView2.ClientID%> which will fit your Asp.Net Gridview.

    However, one thing you missed is to change the targets property value in your columnDefs. For example, in your online website, there are 13 columns in your Gridview2, this means you have to put all of them start with 0 into the targets array (or at least the columns will be hidden in smaller screen, this i'm not sure but set all 13 in makes 100% no issue).

    'columnDefs': [
    {
    'targets': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

    This shall fix the inputed value disappear issue.

    As for the remove table row issue, you have this SetPreviousData() called at the last of your remove button click event, this function would cause two serious problems.

    One is it will set your updated table (row removed), another is it rebind your Griview2 and it could cause the datatable.js failed to initialize your Gridview2.

    I'm not sure why would you call this function but i suggest you could remove it, and then put the code to bind ddl data under.

            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex <= dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                            ResetRowID(dt);
                            //ViewState["CurrentTable"] = dt;
                        }
                    }
    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                    Mobile_addnew();
                }
    
                //Set Previous Data on Postbacks
                //SetPreviousData();
    
                DropDownList ddl1 = null;
                DropDownList ddl2 = null;
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
                //After binding the gridview, we can then extract and fill the DropDownList with Data
                for (int j = 0; j < dtCurrentTable.Rows.Count; j++)
                {
                    ddl1 = (DropDownList)GridView2.Rows[j].Cells[3].FindControl("txtCountry");
                    ddl2 = (DropDownList)GridView2.Rows[j].Cells[5].FindControl("txtJob");
    
                    Label txt_CountryCode = (Label)GridView2.Rows[j].Cells[2].FindControl("txtCountryCode");
                    ddl1.SelectedValue = txt_CountryCode.Text;
    
                    DropDownList_Country(ddl1);
                    DropDownList_Job(ddl2);
    
                }
            }

    Here's the result(I added the AAAA column in order to display the final result):

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 2:41 AM
  • User-475949336 posted

    if I add EnablePartialRendering="false" to

    <asp:ScriptManager id="toolScriptManageer1" runat="server" EnablePartialRendering="false">
        </asp:ScriptManager> 

    and call RememberValue(); as:

    $(function ()
    {
    SetTabs();
    RememberValue();});

    then all postback event will good runing, only exist ARE responsive.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 4:38 AM

All replies

  • User-719153870 posted

    Hi test0101,

    1) Gridview2 on 'add new' tab always display as on laptop.

    I built a demo based on your code and tested it on my phone, the 'add new' tab display as on phone correctly, do you mean it always display as on phone instead?

    2) In mobile, gridview2 on 'add new' tab, when i focus on textBoxs for input text, it do not show virtual keyboard (example: press '+' sign to extend row 1, then press to extend row 2, focus to textbox on row 2 -> no keyboard poup)

    I tested this(extend row1 -> entend row2 -> focus textbox in row2) on my IOS Safari and the keyboard shows as expected, while i did the same process in Android browser, the keyboard shows but hides immediately. I think this is a phone browser issue which means it's out of our scope and i'm not able to help. I would suggest to ask your phone browser support for help.

    3) In laptop, gridview2 on 'add new' tab, when i focus on textBoxs for input text, then click '-' sign to collapse, then all values I inputed are remove.

    This "issue" is in fact a by default behaviour, when you input something in the textbox, the textbox's value is not changed yet, and the '-' sign hide the textbox which causes the textbox need to be rendered again when you extend the row which the value recovers to the original empty value.

    4) I can't remove last row of gridview2

    To solve this, you need to show your remove button for the last row, which means you need to remove the event  OnRowCreated="GridView2_RowCreated" in GridView2 which removes the remove button, then update bttRemoveRow_Click event:

            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex <= dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                        }
    
                    }
    
    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                }
    
                //Set Previous Data on Postbacks
               // SetPreviousData();
            }

    PS. This footable.js really causes much issues for you, if i were you, the developer, i would quit it and try to find some better choice if there is any.

    Best Regard,

    Yang Shen

    Monday, April 6, 2020 5:45 AM
  • User-475949336 posted

    Hi Yang Shen

    I'm wrong with 1), It must be: "Gridview2 on 'add new' tab always display as on Mobile on Laptop" as you said, can you fix this for me.

    with 2) In mobile, gridview2 on 'add new' tab, when i focus on textbox for input text, it do not show virtual keyboard (example: press '+' sign to extend row 1, then press to extend row 2, focus to textbox on row 2 -> no keyboard popup). I agree with you that iphone, Ipad it's ok.  But when i test in anddroid, it don't show keyboard.

    With this, I can't ask to my phone browser support, Can you advance with this issue?

    with  3) In laptop, gridview2 on 'add new' tab, when i focus on textbox for input text, then click '-' sign to collapse, then all values I inputed are remove.

    I must as this, because 'add new' form have about 8 columns for input textbox, it on row gridview, in that gridview user can remove row, add row and input text and 'save all'

    if only in PC, Laptop will no problems, while i want all in : mobile, table, pc, laptop.

    with 4), you are wonderful, fixed.

    Now I need you help and give me some advice.

    My purpose:

    • webform can display good on all devices: pc, laptop, mobile, table
    • List tab display all rows
    • 'add new' tab is webform for input text for gridview: as i said, one row have 8 column textbox for input text, i want in Mobile it will break one column is one line, in laptop all in one line (row). At end of form have 'save all' will save all textbox in all rows above.

    I'm using footable.js, because i haven't any solutions for that.

    so, can you advice me with and show me the solution?

    thanks you very much!

    Monday, April 6, 2020 7:18 AM
  • User-475949336 posted


    I hard test and understand that, issue about javascript on browser prevent show keyborad in mobilefone and problem about input text in textbox of gidview column will clear when click '-' sign to collapsed row: all are difficult to fix.
    so, i must do it as follows:
    - IN MOBILEFONE: when load Griview2, all row will be avaible as detail 'expanded'(do not allow user click '-' sign for 'collapsed') it's always fixed as this, include before and after postback or remove or add row (example as picture 1)
    - In Laptop: all in one row (as picture 2)

    can you help me?

    this is my code: CS.aspx and CS.aspx.cs after edit

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" EnableEventValidation="false"  AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="Quanlynhachothue.CS" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <asp:Content id="Content1" ContentPlaceHolderID="head" Runat="Server">     
         
    
    </asp:Content> 
    
    <asp:Content id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">          
    
        <asp:UpdatePanel id="UpdatePanel1" runat="server"> 
        <ContentTemplate>
       
        <div class="tab-content" style="width: auto; border:none; font-family:Arial; font-size:larger; color:#1443AB; font-weight:bold; text-align:center; padding: 1px; margin: 1px">
         GRIDVIEW
        </div> 
                           <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
    
                            <div id="dvTab">
                                
                                <ul class="nav nav-tabs" role="tablist"  style="font-weight: bold">
                                    <li runat="server" id="idListtab" class="active"><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab"  data-toggle="tab">LIST</a></li>
                                    <li runat="server" id="idAddnewtab"><a href="#Addnewtab" style="outline:none" aria-controls="Addnewtab" role="tab" data-toggle="tab">ADD NEW</a></li>
                                    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">EDIT</a></li>
                                    <li runat="server" id="idViewtab"><a href="#Viewtab" style="outline:none" aria-controls="Viewtab" role="tab" data-toggle="tab">VIEW</a></li>
                                                                  
                                </ul>
    
      <div class="tab-content" style="padding-top: 5px">
                                    
      <!-- Begin List -->  
       <div role="tabpanel"  class="tab-pane active" id="Listtab">                    
                                       
        <div> 
    
        <asp:ScriptManager id="toolScriptManageer1" runat="server">
        </asp:ScriptManager> 
     
    	<label for="tungay">From &nbsp;&nbsp;&nbsp;       
        <asp:TextBox id="txtTungay" width="128px" Height ="30px" runat="server" MaxLength="10"  AutoPostBack="true"   ></asp:TextBox>            
                <ajaxToolkit:CalendarExtender id="Calendarfromdate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtTungay" format="dd/MM/yyyy" />
    	</label> 
       
            
        <label for="denngay">To &nbsp;
             
        <asp:TextBox id="txtDenngay" width="128px" Height ="30px"   AutoPostBack="true" runat="server" MaxLength="10" ></asp:TextBox>  
            <ajaxToolkit:CalendarExtender id="Calendartodate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtDenngay" format="dd/MM/yyyy" />	
    
        </label> 
    		 
    
       <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="txtTrangthai" width="128px" Height ="30px"  AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
        
     </div>
     <br/>
     
        <asp:GridView id="GridView1"  CssClass="footable" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px" >
        
        <Columns>
                <asp:BoundField DataField="Id" HeaderText="Customer Id" />
                <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                <asp:BoundField DataField="Salary" HeaderText="Salary" />         
        </Columns>                       
        </asp:GridView> 
    
        <input type="hidden" runat="server" id="hidMaHDDV" />                       
                                       
        </div>                                                              
        <!-- End List -->
    
    
         <!-- Begin Addnew -->
          <div role="tabpanel" class="tab-pane" id="Addnewtab">
                
          <div> 
           
          <label for="thangnam">Month &nbsp;&nbsp;&nbsp;       
                          <asp:TextBox id="txtThangNam_addnew"  width="128px"  Height ="30px" runat="server"  MaxLength="7" ></asp:TextBox>            
    
                          <ajaxToolkit:CalendarExtender id="calendar1" ClientIDMode="Static" runat="server" TargetControlID="txtThangNam_addnew" Format="MM/yyyy" 
                          DefaultView="Months" OnClientShown="onCalendarShown"
                          OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />                        
           </label> 
    
        <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="DropDownList_Status"  OnSelectedIndexChanged="DropDownList_Status_selectedIndexChanged"   AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
                 
        </div>
        
          
          <asp:Gridview id="GridView2" CssClass="footable"   runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px">
                      
                <Columns>                
                
                    <asp:TemplateField HeaderText="Id" >
                        <ItemTemplate>
                            <asp:Label ID="txtId" Width="80px"  Text='<%# Eval("MyId") %>'  runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                    <asp:TemplateField HeaderText="Customer Name" >
                        <ItemTemplate>
                            <asp:textbox ID="txtName" Width="80px"  Text='<%# Eval("MyName") %>'  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                     <asp:TemplateField HeaderText="CountryCode" Visible="false">
                        <ItemTemplate>
                            <asp:Label ID="txtCountryCode" Text='<%# Eval("CountryCode") %>'  runat="server" Visible="false"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                     <asp:TemplateField HeaderText="Country" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtCountry"  Width="100px" runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Salary" >
                        <ItemTemplate>
                            <asp:textbox ID="txtSalary"  Width="80px"  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Job" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtJob"   runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                    <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="50px" >
                        <ItemTemplate>
                            <asp:Button ID="bttRemoveRow" Width="100px" Text="Remove row" runat="server" onclick="bttRemoveRow_Click" Class="btn-primary"></asp:Button>
                        </ItemTemplate>
                    </asp:TemplateField>
                                                            
                </Columns>
            </asp:Gridview>        
         
         <div align="right" >
         <asp:Button ID="ButtonAdd" runat="server"  Text="Add row"   onclick="ButtonAdd_Click" Class="btn-primary" />
         </div>
                     
              
         <div align="Left" >
         <asp:Button ID="ButtonSaveAll" runat="server"  Text="Save all row"   onclick="ButtonSaveAll_Click" Class="btn-primary" />
         </div>
              
                     
        </div>
         <!-- End Addnew -->
    
          <!-- Begin Edit -->
            <div role="tabpanel" class="tab-pane" id="Edittab">
                 Edit         
            </div>
          <!-- End Edit -->
    
    
           <!-- Begin View -->
             <div role="tabpanel" class="tab-pane" id="Viewtab">
                View 
             </div>
            <!-- End View -->
                                    
            </div>
            </div>
            </div>
    
        <asp:HiddenField ID="HiddenTab" runat="server" />
    
        </ContentTemplate>
        </asp:UpdatePanel>
    
         <!-- Panel  End-->      
       
        <script type="text/javascript">
        
        $(function () { 
            SetTabs();
    
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null)
        {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetTabs();
                }
            });
        };
        function SetTabs() {
            var tabName = $("[id*=HiddenTab]").val() != "" ? $("[id*=HiddenTab]").val() : "Listtab";
            $('#dvTab a[href="#' + tabName + '"]').tab('show');
            $("#dvTab a").click(function () {
                $("[id*=HiddenTab]").val($(this).attr("href").replace("#", ""));
            });
        };
       
    </script>      
        
         <script type="text/javascript">
                  
            function pageLoad() {
                $('[id*=GridView1]').footable();
                $('[id*=GridView2]').footable();
                
            }
        </script>      
        
        
      <script type="text/javascript">
         function onCalendarHidden() {  // Call on Addnew 
            var cal = $find("calendar1");
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
         }
             
        function onCalendarShown() {
    
            var cal = $find("calendar1");
    
            cal._switchMode("months", true);
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
        }
    
        function call(eventElement) {
            var target = eventElement.target;
            switch (target.mode) {
                case "month":
                    var cal = $find("calendar1");
                    cal._visibleDate = target.date;
                    cal.set_selectedDate(target.date);
                    //cal._switchMonth(target.date);
                    cal._blur.post(true);
                    cal.raiseDateSelectionChanged();
                    break;
            }
        }
      </script>       
        
        
    </asp:Content>
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Quanlynhachothue
    {
        public partial class CS : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
                    dt.Rows.Add(1, "John Hammond", "United States", 70000);
                    dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
                    dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
                    dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
    
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                    
                    //Attribute to show the Plus Minus Button.
                    GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
    
                    //Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    
    
                    ButtonAdd.Visible = false;
                    ButtonSaveAll.Visible = false;
                }
               
            }
    
            protected void Create_GridView2()
             {
                DataTable dt1 = new DataTable();
                DataRow dr = null;
                  
                dt1.Columns.AddRange(new DataColumn[6]
                {
                    new DataColumn("MyId"),
                    new DataColumn("MyName"),
                    new DataColumn("CountryCode"),
                    new DataColumn("MyCountry"),
                    new DataColumn("MySalary"),
                    new DataColumn("Job")
    
                });
    
    
                for (int i = 1; i < 6; i++)
                    {
                        dr = dt1.NewRow();
                        dr["MyId"] = i;
                        dr["MyName"] = string.Empty;
                        dr["CountryCode"] = i;
                        dr["MySalary"] = string.Empty;
    
                        dt1.Rows.Add(dr);
                    }
    
                 //Store the DataTable in ViewState for future reference 
                    ViewState["CurrentTable"] = dt1;
    
                    //Bind the Gridview 
                    GridView2.DataSource = dt1;
                    GridView2.DataBind();
    
                    Mobile_addnew();
    
    
    
                DropDownList ddl1 = null;
                DropDownList ddl2 = null;
    
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
    
                //After binding the gridview, we can then extract and fill the DropDownList with Data
                for (int j = 0; j < dtCurrentTable.Rows.Count; j++)
                {
                    ddl1 = (DropDownList)GridView2.Rows[j].Cells[3].FindControl("txtCountry");
                    ddl2 = (DropDownList)GridView2.Rows[j].Cells[5].FindControl("txtJob");
    
                    Label txt_CountryCode = (Label)GridView2.Rows[j].Cells[2].FindControl("txtCountryCode");
                    ddl1.SelectedValue = txt_CountryCode.Text;
    
                    DropDownList_Country(ddl1);
                    DropDownList_Job(ddl2);
    
                }
    
    
            }
    
            public static void DropDownList_Country(DropDownList ddl)
            {
                System.Collections.ArrayList arr = new System.Collections.ArrayList();
    
                arr.Add(new ListItem("United States", "1"));
                arr.Add(new ListItem("India", "2"));
                arr.Add(new ListItem("France", "3"));
                arr.Add(new ListItem("Russia", "4"));
            
                foreach (ListItem item in arr)
                {
                    ddl.Items.Add(item);
                }
            }
    
            public static void DropDownList_Job(DropDownList ddl)
            {
                System.Collections.ArrayList arr = new System.Collections.ArrayList();
    
                arr.Add(new ListItem("IT", "1"));
                arr.Add(new ListItem("Cutural", "2"));
                arr.Add(new ListItem("Sport", "3"));
                arr.Add(new ListItem("finance", "4"));
                arr.Add(new ListItem("Bank", "5"));
    
                foreach (ListItem item in arr)
                {
                    ddl.Items.Add(item);
                }
            }
    
            private void AddNewRowToGrid()
            {
    
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
                    DataRow drCurrentRow = null;
    
                    if (dtCurrentTable.Rows.Count > 0)
                    {
                        drCurrentRow = dtCurrentTable.NewRow();
                        drCurrentRow["MyId"] = dtCurrentTable.Rows.Count + 1;
    
                        //add new row to DataTable 
                        dtCurrentTable.Rows.Add(drCurrentRow);
                        
                        for (int i = 0; i < dtCurrentTable.Rows.Count - 1; i++)
                        {
    
                            //extract the TextBox values 
                           
                            TextBox txt_Name = (TextBox)GridView2.Rows[i].Cells[1].FindControl("txtName");
                            Label txt_CountryCode = (Label)GridView2.Rows[i].Cells[2].FindControl("txtCountryCode");
    
                            TextBox txt_Salary = (TextBox)GridView2.Rows[i].Cells[4].FindControl("txtSalary");
    
                         
                            dtCurrentTable.Rows[i]["MyName"] = txt_Name.Text;
                            dtCurrentTable.Rows[i]["CountryCode"] = txt_CountryCode.Text;
                            dtCurrentTable.Rows[i]["MySalary"] = txt_Salary.Text;
                          
    
                            //extract the DropDownList Selected Items 
    
                            DropDownList ddl1 = (DropDownList)GridView2.Rows[i].Cells[3].FindControl("txtCountry");
                            DropDownList ddl2 = (DropDownList)GridView2.Rows[i].Cells[5].FindControl("txtJob");
    
                            // Update the DataRow with the DDL Selected Items 
    
                            dtCurrentTable.Rows[i]["MyCountry"] = ddl1.SelectedItem.Text;
                            dtCurrentTable.Rows[i]["Job"] = ddl2.SelectedItem.Text;
                        }
    
                        //Store the current data to ViewState for future reference 
                        ViewState["CurrentTable"] = dtCurrentTable;
    
    
                        //Rebind the Grid with the current data to reflect changes 
                        GridView2.DataSource = dtCurrentTable;
                        GridView2.DataBind();
                        Mobile_addnew();
                    }
                }
                else
                {
                    Response.Write("ViewState is null");
    
                }
                //Set Previous Data on Postbacks 
                SetPreviousData();
            }
            public void Mobile_addnew()
            {
                if (GridView2.Rows.Count > 0)
                {
                    GridView2.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView2.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
                    GridView2.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                    GridView2.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
    
                    //Adds THEAD and TBODY to GridView.
                    GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }
    
            protected void DropDownList_Status_selectedIndexChanged(object sender, EventArgs e)
            {          
                    if (DropDownList_Status.SelectedItem.Text != "All")
                    {
                        Create_GridView2();
                        ButtonAdd.Visible = true;
                        ButtonSaveAll.Visible = true;
                    }
                    else
                    {
                    GridView2.DataSource = null;
                    GridView2.DataBind();
    
                    ButtonAdd.Visible = false;
                    ButtonSaveAll.Visible = false;
                }
             
            }
           
            protected void ButtonSaveAll_Click(object sender, EventArgs e)
            {
    
            }
            
    
            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex <= dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                            ResetRowID(dt);
                        }
                    }
                    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                    Mobile_addnew();
                }
    
                //Set Previous Data on Postbacks
                SetPreviousData();
            }
    
            protected void ButtonAdd_Click(object sender, EventArgs e)
            {
                AddNewRowToGrid();
            }
    
            private void ResetRowID(DataTable dt)
            {
                int rowNumber = 1;
                if (dt.Rows.Count > 0)
                {
                    foreach (DataRow row in dt.Rows)
                    {
                        row[0] = rowNumber;
                        rowNumber++;
                    }
                }
            }
            private void SetPreviousData()
            {
    
                int rowIndex = 0;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 0)
                    {
    
                        for (int i = 0; i < dt.Rows.Count; i++)
                        {
    
                            Label txt_Id = (Label)GridView2.Rows[i].Cells[0].FindControl("txtId");
                            TextBox txt_Name = (TextBox)GridView2.Rows[i].Cells[1].FindControl("txtName");
                            Label txt_CountryCode = (Label)GridView2.Rows[i].Cells[2].FindControl("txtCountryCode");
                            TextBox txt_Salary = (TextBox)GridView2.Rows[i].Cells[4].FindControl("txtSalary");
    
                            DropDownList ddl1 = (DropDownList)GridView2.Rows[rowIndex].Cells[3].FindControl("txtCountry");
                            DropDownList ddl2 = (DropDownList)GridView2.Rows[rowIndex].Cells[5].FindControl("txtJob");
    
                            //Fill the DropDownList with Data 
                            DropDownList_Country(ddl1);
                            DropDownList_Job(ddl2);
    
                            if (i < dt.Rows.Count - 1)
                            {
                                txt_Id.Text = dt.Rows[i]["MyId"].ToString();
                                txt_Name.Text = dt.Rows[i]["MyName"].ToString();
                                txt_CountryCode.Text = dt.Rows[i]["CountryCode"].ToString();
                                txt_Salary.Text = dt.Rows[i]["MySalary"].ToString();
    
                                
                                //Set the Previous Selected Items on Each DropDownList  on Postbacks 
                                ddl1.ClearSelection();
                                ddl1.Items.FindByText(dt.Rows[i]["MyCountry"].ToString()).Selected = true;
    
                                ddl2.ClearSelection();
                                ddl2.Items.FindByText(dt.Rows[i]["Job"].ToString()).Selected = true;
                            }
    
                            rowIndex++;
                        }
                    }
                }
            }
        }
    }

    picture 1 o Mobile

    picture 2 on laptop:

    Tuesday, April 7, 2020 4:19 AM
  • User-719153870 posted

    Hi test0101,

    - IN MOBILEFONE: when load Griview2, all row will be avaible as detail 'expanded'(do not allow user click '-' sign for 'collapsed') it's always fixed as this, include before and after postback or remove or add row (example as picture 1)

    To expand all rows is easy to implement, check Expand / Collapse All Rows, but i don't think this could solve the issue because when you click any position(including the ddl and button controls) in that row, it will be expanded or collapsed again.

    I'm not export to this footable plugin and can't tell( most likely not possible) if you can forbid this behavior while the asp controls can still be accessed at the same time.

    Have you tried to upgrade your footable version? Since the one you are using (0.1.0) is quite old and the latest might help solve most of the problems you met or might meet.

    Check FooTable and FooTable Demos for more information.

    Again, sorry for not providing much helpful suggestions.

    Best Regard,

    Yang Shen

    Tuesday, April 7, 2020 5:55 AM
  • User-475949336 posted

    Hi Yang Shen

    How can you disabled expanded or collapsed again?, if yes, all thing will be solve.

    I tried a lot time to upgrade footable.css/.js last vesion but it not run, I  don't know how to modify my  .aspx file to use new version

    (example in old version footable:

    .aspx file call below:

    <script type="text/javascript">

    function pageLoad() {
    $('[id*=GridView1]').footable();
    $('[id*=GridView2]').footable();
    }
    </script>  

    with new version, havn't docs to guide.

    can you help me upgrade to new version? Im' stuck at here very long time, can't go on to do something

    Best reagard!

    Tuesday, April 7, 2020 6:19 AM
  • User-719153870 posted

    Hi test0101,

    You are right about the latest version of footable not fitting well with the asp.net gridview control (after long time and mutiple tests).

    Sorry to tell, but frankly I think this is a plugin issue which could be really hard to fix in an asp.net forum.

    I recommend that you can go to the developer channel in Github and raise an issue there, let those who develops this footable plugin help would be much more efficient.

    Also, i would suggest another powerful jQuery plugin that can do much more than responsive for mobile and pc screen - the jQuery datatable.

    If you are interested, you can find a complete demo at Responsive GridView Using DataTables Plug-in, you can download the jQuery datatable plugin at here.

    Best Regard,

    Yang Shen

    Wednesday, April 8, 2020 2:28 AM
  • User-475949336 posted

    oki Yang Shen, i will try with your help, I'm tired with Mr. footable.js. Hope all thing good embarassed

    Wednesday, April 8, 2020 2:50 AM
  • User-475949336 posted

    Hi Yang Shen,

    I rebuild gridview responsive with datatables.net's tools, its display good on PC, Mobile, BUT the issue about all textbox in columns will be clear when click '-' sign to collapse row, this i can't accept, because I need input text for multi rows and 'save all'.

    Last night, I Found at footable.js/.css v2.0.1.4 that resolved the issue ( do not clear textbox when click '-', show keyboard on all Mobile's browsers)

    But, I don't know why it' load gridview very slow, in spite of I only replace footable old with footable-0.1.1.js = footable-2.0.1.4.js, footable-0.1.1.css= footable-2.0.1.4.css

    I will inbox private my web, need you check online with your tools, where is webform slowly?

    best regard!

    Wednesday, April 8, 2020 3:52 AM
  • User-719153870 posted

    Hi test0101,

    But, I don't know why it' load gridview very slow, in spite of I only replace footable old with footable-0.1.1.js = footable-2.0.1.4.js, footable-0.1.1.css= footable-2.0.1.4.css

    To know why it took you long time, first you need to check if it's the network issue, i checked your website and it's not the network issue, it took only 0.4s by network the whole process. 

    After that, check if the front end script caused the performance issue, which i checked too and it turns out the pageload method which contains only two lines of code:

            function pageLoad() {
                $('[id*=GridView1]').footable();
                $('[id*=GridView2]').footable();
                
            }

    took 2-3s.

    Obviously, the footable() method from footable-2.0.1.4.js not compatible with asp.net gridview well.

    And as i suggested, to raise an issue at Github would be a better choice for you to solve this issue. Sorry i need to say this but you might found the wrong place(an asp.net forum) for this issue.

    Best Regard,

    Yang Shen

    Wednesday, April 8, 2020 6:29 AM
  • User-475949336 posted

    Hi Yang Shen

    I detected that, if i remove 'GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;' line in function below, it runing, load very fast on all moble, pc.

    public void Laptop_PC_Mobile()
    {
    if (GridView1.Rows.Count > 0)
    {
    //Attribute to show the Plus Minus Button.
    GridView1.HeaderRow.Cells[2].Attributes["data-class"] = "expand";
    //Attribute to hide column in Phone.
    GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone,tablet";
    GridView1.HeaderRow.Cells[7].Attributes["data-hide"] = "phone,tablet";
    GridView1.HeaderRow.Cells[8].Attributes["data-hide"] = "phone,tablet";
    GridView1.HeaderRow.Cells[9].Attributes["data-hide"] = "phone,tablet";

    //Adds THEAD and TBODY to GridView.
    // GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }

    }

    Can you process this GridView1.HeaderRow.TableSection = TableRowSection.TableHeader ?

    Wednesday, April 8, 2020 6:46 AM
  • User-475949336 posted

    Dear Yang Shen

    The problem still available on me, I can't fix, if I revove GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;  then all screen display are on laptop.

    So, I decided do with your suggestion, using datatable.net's tool.

    I test all screen, its display very good and light for load. BUT with this, I'm facing new problem, that  is: when input text in textbox column then click '-' sign to collapse row then ALL TEXTBOX will CLEAR.  I research all night but can't to fix.

    Can you help me solve this issue.

    this my code:

    1- main.master

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Quanlynhachothue.Main" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        
    <title></title>
    
    
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
          
      
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" type="text/css" href="./css-js-Gridview/datatables.min-1.10.20.css" />      
    <script type="text/javascript" src="./css-js-Gridview/datatables.min-1.10.20.js"></script> 
     
     
      <style type="text/css">            
         
        @media (max-width: 992px) {
        .navbar-header {
            float: none;        
        }
        .navbar-left,.navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
            
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);        
            
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;        
        }
        .navbar-collapse.collapse {
            display: none!important;        
        }
        .navbar-nav {
            float: none!important;
            margin-top: 7.5px;
            
        }
        .navbar-nav>li {
            float: none;        
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;        
        }
        .collapse.in{
            display:block !important;
            
        }
    }
    
            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
                
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;            
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
                
            }
            .dropdown-submenu.pull-left
            {
                float: none;
                
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;            
            }
        </style>
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>       
    
    </head>
    <body>   
        <form id="main"  runat="server">   
      
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="./">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="font-family:Arial;background-color: #1A8CFF" >
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
    
                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>

    2-  main.master.cs

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Quanlynhachothue
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                      DataTable dt = this.GetData(0);
                      PopulateMenu(dt, 0, null);               
                }
            }
                    
            private DataTable GetData(int parentMenuId)
            {           
    
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });
    
    
                dt.Rows.Add(0, 1, "Home", "~/CS.aspx");
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/frmtabcontrolHoadonDichvu.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");
    
    
    
                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }
    
                return dtFinal;            
            }
            
    
            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
           
        }
    }
    
    

    3- CS.aspx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" EnableEventValidation="false"  AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="Quanlynhachothue.CS" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <asp:Content id="Content1" ContentPlaceHolderID="head" Runat="Server">     
         
    
    </asp:Content> 
    
    <asp:Content id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">          
    
        <asp:UpdatePanel id="UpdatePanel1" runat="server"> 
        <ContentTemplate>
       
        <div class="tab-content" style="width: auto; border:none; font-family:Arial; font-size:larger; color:#1443AB; font-weight:bold; text-align:center; padding: 1px; margin: 1px">
         GRIDVIEW
        </div> 
                           <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
    
                            <div id="dvTab">
                                
                                <ul class="nav nav-tabs" role="tablist"  style="font-weight: bold">
                                    <li runat="server" id="idListtab" class="active"><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab"  data-toggle="tab">LIST</a></li>
                                    <li runat="server" id="idAddnewtab"><a href="#Addnewtab" style="outline:none" aria-controls="Addnewtab" role="tab" data-toggle="tab">ADD NEW</a></li>
                                    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">EDIT</a></li>
                                    <li runat="server" id="idViewtab"><a href="#Viewtab" style="outline:none" aria-controls="Viewtab" role="tab" data-toggle="tab">VIEW</a></li>
                                                                  
                                </ul>
    
      <div class="tab-content" style="padding-top: 5px">
                                    
      <!-- Begin List -->  
       <div role="tabpanel"  class="tab-pane active" id="Listtab">                    
                                       
        <div> 
    
        <asp:ScriptManager id="toolScriptManageer1" runat="server">
        </asp:ScriptManager> 
     
    	<label for="tungay">From &nbsp;&nbsp;&nbsp;       
        <asp:TextBox id="txtTungay" width="128px" Height ="30px" runat="server" MaxLength="10"  AutoPostBack="true"   ></asp:TextBox>            
                <ajaxToolkit:CalendarExtender id="Calendarfromdate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtTungay" format="dd/MM/yyyy" />
    	</label> 
       
            
        <label for="denngay">To &nbsp;
             
        <asp:TextBox id="txtDenngay" width="128px" Height ="30px"   AutoPostBack="true" runat="server" MaxLength="10" ></asp:TextBox>  
            <ajaxToolkit:CalendarExtender id="Calendartodate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtDenngay" format="dd/MM/yyyy" />	
    
        </label> 
    		 
    
       <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="txtTrangthai" width="128px" Height ="30px"  AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
        
     </div>
     <br/>
     
        <asp:GridView id="GridView1"  CssClass="dt-responsive" Width="100%"  runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px" >
        
        <Columns>
                <asp:BoundField DataField="Id" HeaderText="Customer Id" />
                <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                <asp:BoundField DataField="Salary" HeaderText="Salary" /> 
                <asp:BoundField DataField="Job" HeaderText="Job" />         
            
        </Columns>                       
        </asp:GridView> 
    
        <input type="hidden" runat="server" id="hidMaHDDV" />                       
                                       
        </div>                                                              
        <!-- End List -->
    
    
         <!-- Begin Addnew -->
          <div role="tabpanel" class="tab-pane" id="Addnewtab">
                
          <div> 
           
          <label for="thangnam">Month &nbsp;&nbsp;&nbsp;       
                          <asp:TextBox id="txtThangNam_addnew"  width="128px"   Height ="30px" runat="server"  MaxLength="7" ></asp:TextBox>            
    
                          <ajaxToolkit:CalendarExtender id="calendar1" ClientIDMode="Static" runat="server" TargetControlID="txtThangNam_addnew" Format="MM/yyyy" 
                          DefaultView="Months" OnClientShown="onCalendarShown"
                          OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />                        
           </label> 
    
        <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="DropDownList_Status"  OnSelectedIndexChanged="DropDownList_Status_selectedIndexChanged"   AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
                 
        </div>
        
          
          <asp:Gridview id="GridView2" CssClass="dt-responsive" Width="100%"   runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px">
                      
                <Columns>                
                
                    <asp:TemplateField HeaderText="Id" >
                        <ItemTemplate>
                            <asp:Label ID="txtId" Width="80px"  Text='<%# Eval("MyId") %>'  runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                    <asp:TemplateField HeaderText="Customer Name" >
                        <ItemTemplate>
                            <asp:textbox ID="txtName" Width="80px"  Text='<%# Eval("MyName") %>'  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                     <asp:TemplateField HeaderText="CountryCode" Visible="false">
                        <ItemTemplate>
                            <asp:Label ID="txtCountryCode" Text='<%# Eval("CountryCode") %>'  runat="server" Visible="false"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                     <asp:TemplateField HeaderText="Country" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtCountry"  Width="100px" runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Salary" >
                        <ItemTemplate>
                            <asp:textbox ID="txtSalary"  Width="80px"  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Job" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtJob"   runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                    <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="50px" >
                        <ItemTemplate>
                            <asp:Button ID="bttRemoveRow" Width="100px" Text="Remove row" runat="server" onclick="bttRemoveRow_Click" Class="btn-primary"></asp:Button>
                        </ItemTemplate>
                    </asp:TemplateField>
                                                            
                </Columns>
            </asp:Gridview>        
         
         <div align="right" >
         <asp:Button ID="ButtonAdd" runat="server"  Text="Add row"   onclick="ButtonAdd_Click" Class="btn-primary" />
         </div>
                     
              
         <div align="Left" >
         <asp:Button  ID="ButtonSaveAll" runat="server"  Text="Save all row"   onclick="ButtonSaveAll_Click" Class="btn-primary" />
         </div>
              
                     
        </div>
         <!-- End Addnew -->
    
          <!-- Begin Edit -->
            <div role="tabpanel" class="tab-pane" id="Edittab">
                 Edit         
            </div>
          <!-- End Edit -->
    
    
           <!-- Begin View -->
             <div role="tabpanel" class="tab-pane" id="Viewtab">
                View 
             </div>
            <!-- End View -->
                                    
            </div>
            </div>
            </div>
    
        <asp:HiddenField ID="HiddenTab" runat="server" />
    
        </ContentTemplate>
        </asp:UpdatePanel>
    
         <!-- Panel  End-->              
         
        <script type="text/javascript">
        
            $(function ()
            {
                SetTabs();
          //  $('[id*=GridView2]').footable();
    
              $('#<%=GridView2.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false });
    
        });
    
    
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null)
        {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetTabs();
                    //   $('[id*=GridView2]').footable();
    
                    $('#<%=GridView2.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false });
    
                }
            });
        };
        function SetTabs() {
            var tabName = $("[id*=HiddenTab]").val() != "" ? $("[id*=HiddenTab]").val() : "Listtab";
            $('#dvTab a[href="#' + tabName + '"]').tab('show');
            $("#dvTab a").click(function () {
            $("[id*=HiddenTab]").val($(this).attr("href").replace("#", ""));
            });
        };
       
    </script>      
        
         <script type="text/javascript">
                
                   
             function pageLoad() {
             //   $('[id*=GridView1]').footable();
             // $('[id*=GridView2]').footable();
    
            $('#<%=GridView1.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false });
                             
             }
        </script>      
        
        
      <script type="text/javascript">
         function onCalendarHidden() {  // Call on Addnew 
            var cal = $find("calendar1");
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
         }
             
        function onCalendarShown() {
    
            var cal = $find("calendar1");
    
            cal._switchMode("months", true);
    
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
        }
    
        function call(eventElement) {
            var target = eventElement.target;
            switch (target.mode) {
                case "month":
                    var cal = $find("calendar1");
                    cal._visibleDate = target.date;
                    cal.set_selectedDate(target.date);
                    //cal._switchMonth(target.date);
                    cal._blur.post(true);
                    cal.raiseDateSelectionChanged();
                    break;
            }
        }
      </script>       
        
        
    </asp:Content>

    4- CS.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Quanlynhachothue
    {
        public partial class CS : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[5] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary"), new DataColumn("Job") });
                    dt.Rows.Add(1, "John Hammond", "United States", 70000,"IT");
                    dt.Rows.Add(2, "Mudassar Khan", "India", 40000, "Bank");
                    dt.Rows.Add(3, "Suzanne Mathews", "France", 30000,"Sport");
                    dt.Rows.Add(4, "Robert Schidner", "Russia", 50000,"Finace");
    
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                    Mobile_List();
    
                    ButtonAdd.Visible = false;
                    ButtonSaveAll.Visible = false;
                }
                else
                    Mobile_List();
    
    
            }
    
            protected void Create_GridView2()
             {
                DataTable dt1 = new DataTable();
                DataRow dr = null;
                  
                dt1.Columns.AddRange(new DataColumn[6]
                {
                    new DataColumn("MyId"),
                    new DataColumn("MyName"),
                    new DataColumn("CountryCode"),
                    new DataColumn("MyCountry"),
                    new DataColumn("MySalary"),
                    new DataColumn("Job")
    
                });
    
    
                for (int i = 1; i < 5; i++)
                    {
                        dr = dt1.NewRow();
                        dr["MyId"] = i;
                        dr["MyName"] = string.Empty;
                        dr["CountryCode"] = i;
                        dr["MySalary"] = string.Empty;
    
                        dt1.Rows.Add(dr);
                    }
    
                 //Store the DataTable in ViewState for future reference 
                    ViewState["CurrentTable"] = dt1;
    
                    //Bind the Gridview 
                    GridView2.DataSource = dt1;
                    GridView2.DataBind();
    
                    Mobile_addnew();
    
    
    
                DropDownList ddl1 = null;
                DropDownList ddl2 = null;
    
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
    
                //After binding the gridview, we can then extract and fill the DropDownList with Data
                for (int j = 0; j < dtCurrentTable.Rows.Count; j++)
                {
                    ddl1 = (DropDownList)GridView2.Rows[j].Cells[3].FindControl("txtCountry");
                    ddl2 = (DropDownList)GridView2.Rows[j].Cells[5].FindControl("txtJob");
    
                    Label txt_CountryCode = (Label)GridView2.Rows[j].Cells[2].FindControl("txtCountryCode");
                    ddl1.SelectedValue = txt_CountryCode.Text;
    
                    DropDownList_Country(ddl1);
                    DropDownList_Job(ddl2);
    
                }
    
    
            }
    
            public static void DropDownList_Country(DropDownList ddl)
            {
                System.Collections.ArrayList arr = new System.Collections.ArrayList();
    
                arr.Add(new ListItem("United States", "1"));
                arr.Add(new ListItem("India", "2"));
                arr.Add(new ListItem("France", "3"));
                arr.Add(new ListItem("Russia", "4"));
            
                foreach (ListItem item in arr)
                {
                    ddl.Items.Add(item);
                }
            }
    
            public static void DropDownList_Job(DropDownList ddl)
            {
                System.Collections.ArrayList arr = new System.Collections.ArrayList();
    
                arr.Add(new ListItem("IT", "1"));
                arr.Add(new ListItem("Cutural", "2"));
                arr.Add(new ListItem("Sport", "3"));
                arr.Add(new ListItem("finance", "4"));
                arr.Add(new ListItem("Bank", "5"));
    
                foreach (ListItem item in arr)
                {
                    ddl.Items.Add(item);
                }
            }
    
            private void AddNewRowToGrid()
            {
    
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
                    DataRow drCurrentRow = null;
    
                    if (dtCurrentTable.Rows.Count > 0)
                    {
                        drCurrentRow = dtCurrentTable.NewRow();
                        drCurrentRow["MyId"] = dtCurrentTable.Rows.Count + 1;
    
                        //add new row to DataTable 
                        dtCurrentTable.Rows.Add(drCurrentRow);
                        
                        for (int i = 0; i < dtCurrentTable.Rows.Count - 1; i++)
                        {
    
                            //extract the TextBox values 
    
                            TextBox txt_Name = (TextBox)GridView2.Rows[i].Cells[1].FindControl("txtName");
                            Label txt_CountryCode = (Label)GridView2.Rows[i].Cells[2].FindControl("txtCountryCode");
    
                            TextBox txt_Salary = (TextBox)GridView2.Rows[i].Cells[4].FindControl("txtSalary");
    
                         
                            dtCurrentTable.Rows[i]["MyName"] = txt_Name.Text;
                            dtCurrentTable.Rows[i]["CountryCode"] = txt_CountryCode.Text;
                            dtCurrentTable.Rows[i]["MySalary"] = txt_Salary.Text;
                          
    
                            //extract the DropDownList Selected Items 
    
                            DropDownList ddl1 = (DropDownList)GridView2.Rows[i].Cells[3].FindControl("txtCountry");
                            DropDownList ddl2 = (DropDownList)GridView2.Rows[i].Cells[5].FindControl("txtJob");
    
                            // Update the DataRow with the DDL Selected Items 
    
                            dtCurrentTable.Rows[i]["MyCountry"] = ddl1.SelectedItem.Text;
                            dtCurrentTable.Rows[i]["Job"] = ddl2.SelectedItem.Text;
                        }
    
                        //Store the current data to ViewState for future reference 
                        ViewState["CurrentTable"] = dtCurrentTable;
    
    
                        //Rebind the Grid with the current data to reflect changes 
                        GridView2.DataSource = dtCurrentTable;
                        GridView2.DataBind();
                        Mobile_addnew();
                    }
                }
                else
                {
                    Response.Write("ViewState is null");
    
                }
                //Set Previous Data on Postbacks 
                SetPreviousData();
            }
            public void Mobile_addnew()
            {
                /*
                if (GridView2.Rows.Count > 0)
                {
                    GridView2.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView2.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
                    GridView2.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                    GridView2.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
    
                    //Adds THEAD and TBODY to GridView.
                    GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
                */
                GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
    
            }
    
            public void Mobile_List()
            {
                /*
                if (GridView1.Rows.Count > 0)
                {
                    //Attribute to show the Plus Minus Button.
                    GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    //Attribute to hide column in Phone.
                    GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
    
                    //Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
                */
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    
            }
            protected void DropDownList_Status_selectedIndexChanged(object sender, EventArgs e)
            {          
                    if (DropDownList_Status.SelectedItem.Text != "All")
                    {
                        Create_GridView2();
                        ButtonAdd.Visible = true;
                        ButtonSaveAll.Visible = true;
                    }
                    else
                    {
                    GridView2.DataSource = null;
                    GridView2.DataBind();
    
                    ButtonAdd.Visible = false;
                    ButtonSaveAll.Visible = false;
                }
             
            }
           
            protected void ButtonSaveAll_Click(object sender, EventArgs e)
            {
    
            }
            
    
            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex <= dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                            ResetRowID(dt);
                        }
                    }
                    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                    Mobile_addnew();
                }
    
                //Set Previous Data on Postbacks
                SetPreviousData();
            }
    
            protected void ButtonAdd_Click(object sender, EventArgs e)
            {
                AddNewRowToGrid();
            }
    
            private void ResetRowID(DataTable dt)
            {
                int rowNumber = 1;
                if (dt.Rows.Count > 0)
                {
                    foreach (DataRow row in dt.Rows)
                    {
                        row[0] = rowNumber;
                        rowNumber++;
                    }
                }
            }
            private void SetPreviousData()
            {
    
                int rowIndex = 0;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 0)
                    {
    
                        for (int i = 0; i < dt.Rows.Count; i++)
                        {
    
                            Label txt_Id = (Label)GridView2.Rows[i].Cells[0].FindControl("txtId");
                            TextBox txt_Name = (TextBox)GridView2.Rows[i].Cells[1].FindControl("txtName");
                            Label txt_CountryCode = (Label)GridView2.Rows[i].Cells[2].FindControl("txtCountryCode");
                            TextBox txt_Salary = (TextBox)GridView2.Rows[i].Cells[4].FindControl("txtSalary");
    
                            DropDownList ddl1 = (DropDownList)GridView2.Rows[rowIndex].Cells[3].FindControl("txtCountry");
                            DropDownList ddl2 = (DropDownList)GridView2.Rows[rowIndex].Cells[5].FindControl("txtJob");
    
                            //Fill the DropDownList with Data 
                            DropDownList_Country(ddl1);
                            DropDownList_Job(ddl2);
    
                            if (i < dt.Rows.Count - 1)
                            {
                                txt_Id.Text = dt.Rows[i]["MyId"].ToString();
                                txt_Name.Text = dt.Rows[i]["MyName"].ToString();
                                txt_CountryCode.Text = dt.Rows[i]["CountryCode"].ToString();
                                txt_Salary.Text = dt.Rows[i]["MySalary"].ToString();
    
                                
                                //Set the Previous Selected Items on Each DropDownList  on Postbacks 
                                ddl1.ClearSelection();
                                ddl1.Items.FindByText(dt.Rows[i]["MyCountry"].ToString()).Selected = true;
    
                                ddl2.ClearSelection();
                                ddl2.Items.FindByText(dt.Rows[i]["Job"].ToString()).Selected = true;
                            }
    
                            rowIndex++;
                        }
                    }
                }
            }
        }
    }

    Step to test:

    • Click 'add new' tab
    • Click '+' sign to extend row
    • Input text for 'salary' column
    • Click '-' sign to collpse this row
    • ======>>>>> text salary will CLEAR
    Thursday, April 9, 2020 7:34 AM
  • User-719153870 posted

    Dear test0101,

    If this is the final issue then we are close to complete this project.

    The issue you mentioned is common when you use jquery Datatable reponsive.

    Please check Save values of inputs in child rows - DataTables and you will find the solution/workaround.

    Best Regard,

    Yang Shen

    Thursday, April 9, 2020 9:11 AM
  • User-475949336 posted

    Hi Yang Shen

    I do following with link you mention, but in my CS.aspx file, I haven't  'TABLE' , So, I add javacsript below to end of CS.aspx, but not solve my issue:

    <script type="text/javascript">

    $(document).ready(function () {
    // var table = $('#example').DataTable({
    var table = $('#<%=GridView2.ClientID%>').DataTable({
    'columnDefs': [
    {
    'targets': [1, 2, 3, 4, 5],
    'render': function (data, type, row, meta) {
    if (type === 'display') {
    var api = new $.fn.dataTable.Api(meta.settings);

    var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node());

    var $html = $(data).wrap('<div/>').parent();

    if ($el.prop('tagName') === 'INPUT') {
    $('input', $html).attr('value', $el.val());
    if ($el.prop('checked')) {
    $('input', $html).attr('checked', 'checked');
    }
    } else if ($el.prop('tagName') === 'TEXTAREA') {
    $('textarea', $html).html($el.val());

    } else if ($el.prop('tagName') === 'SELECT') {
    $('option:selected', $html).removeAttr('selected');
    $('option', $html).filter(function () {
    return ($(this).attr('value') === $el.val());
    }).attr('selected', 'selected');
    }

    data = $html.html();
    }

    return data;
    }
    }
    ],
    'responsive': true
    });

    // Update original input/select on change in child row
    // $('#example tbody').on('keyup change', '.child input, .child select, .child textarea', function(e){
    $('#<%=GridView2.ClientID%> tbody').on('keyup change', '.child input, .child select, .child textarea', function (e) {
    var $el = $(this);
    var rowIdx = $el.closest('ul').data('dtr-index');
    var colIdx = $el.closest('li').data('dtr-index');
    var cell = table.cell({ row: rowIdx, column: colIdx }).node();
    $('input, select, textarea', cell).val($el.val());
    if ($el.is(':checked')) {
    $('input', cell).prop('checked', true);
    } else {
    $('input', cell).removeProp('checked');
    }
    });
    });

    I'm wrong ?

    Beside, I can't remove row when click  'remove' on gridview2.

    Thursday, April 9, 2020 10:15 AM
  • User-719153870 posted

    Hi test0101,

    You did the right thing to change the #example to #<%=GridView2.ClientID%> which will fit your Asp.Net Gridview.

    However, one thing you missed is to change the targets property value in your columnDefs. For example, in your online website, there are 13 columns in your Gridview2, this means you have to put all of them start with 0 into the targets array (or at least the columns will be hidden in smaller screen, this i'm not sure but set all 13 in makes 100% no issue).

    'columnDefs': [
    {
    'targets': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

    This shall fix the inputed value disappear issue.

    As for the remove table row issue, you have this SetPreviousData() called at the last of your remove button click event, this function would cause two serious problems.

    One is it will set your updated table (row removed), another is it rebind your Griview2 and it could cause the datatable.js failed to initialize your Gridview2.

    I'm not sure why would you call this function but i suggest you could remove it, and then put the code to bind ddl data under.

            protected void bttRemoveRow_Click(object sender, EventArgs e)
            {
                Button btt = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btt.NamingContainer;
                int rowID = gvRow.RowIndex;
                if (ViewState["CurrentTable"] != null)
                {
    
                    DataTable dt = (DataTable)ViewState["CurrentTable"];
                    if (dt.Rows.Count > 1)
                    {
                        if (gvRow.RowIndex <= dt.Rows.Count - 1)
                        {
                            //Remove the Selected Row data and reset row number
                            dt.Rows.Remove(dt.Rows[rowID]);
                            ResetRowID(dt);
                            //ViewState["CurrentTable"] = dt;
                        }
                    }
    
                    //Store the current data in ViewState for future reference
                    ViewState["CurrentTable"] = dt;
    
                    //Re bind the GridView for the updated data
                    GridView2.DataSource = dt;
                    GridView2.DataBind();
                    Mobile_addnew();
                }
    
                //Set Previous Data on Postbacks
                //SetPreviousData();
    
                DropDownList ddl1 = null;
                DropDownList ddl2 = null;
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
                //After binding the gridview, we can then extract and fill the DropDownList with Data
                for (int j = 0; j < dtCurrentTable.Rows.Count; j++)
                {
                    ddl1 = (DropDownList)GridView2.Rows[j].Cells[3].FindControl("txtCountry");
                    ddl2 = (DropDownList)GridView2.Rows[j].Cells[5].FindControl("txtJob");
    
                    Label txt_CountryCode = (Label)GridView2.Rows[j].Cells[2].FindControl("txtCountryCode");
                    ddl1.SelectedValue = txt_CountryCode.Text;
    
                    DropDownList_Country(ddl1);
                    DropDownList_Job(ddl2);
    
                }
            }

    Here's the result(I added the AAAA column in order to display the final result):

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 2:41 AM
  • User-475949336 posted

    Hi Yang Shen

    I update you guide, it has remember my textbox in coumns, but it exist  little issue are:

    The first, zoom in browser to mini size same as mobile screen size for responsive

    1. In list tab, choose 'status' equal 1, then Click '+' sign to extend one row (purpose are mark status of grieview1 )
    - click 'add new' tab, select status is 2
    - click 'list' tab => the status of grieview1 changed and NO RESPONSIVE

    2. Re-enter site http://localhost/CS.aspx in adress bar to load pure page
    - click 'add new' tab
    - choose status to create gridview2
    - click 'list' tab  =>>> gridview1 not responstive

    - Change status in list tab to postback then click 'add new' tab ==>gridview2 not responstive 

    3. ABOUT SetPreviousData()
    I use SetPreviousData() to callback value of all columns that I input or select after REMOVE or ADD ROW

    You can test by:
    - 'add new' tab and input Customer Name, select Country, input Salary, select job for all ROWS
    - Then REMOVE ONE row ==> all value inputed, selected will be reset
    - similer for 'add row' event

    this is my file CS.aspx, try help me soon, thank you advance

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" EnableEventValidation="false"  AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="Quanlynhachothue.CS" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <asp:Content id="Content1" ContentPlaceHolderID="head" Runat="Server">     
         
    
    </asp:Content> 
    
    <asp:Content id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">          
    
        <asp:UpdatePanel id="UpdatePanel1" runat="server"> 
        <ContentTemplate>
       
        <div class="tab-content" style="width: auto; border:none; font-family:Arial; font-size:larger; color:#1443AB; font-weight:bold; text-align:center; padding: 1px; margin: 1px">
         GRIDVIEW
        </div> 
                           <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
    
                            <div id="dvTab">
                                
                                <ul class="nav nav-tabs" role="tablist"  style="font-weight: bold">
                                    <li runat="server" id="idListtab" class="active"><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab"  data-toggle="tab">LIST</a></li>
                                    <li runat="server" id="idAddnewtab"><a href="#Addnewtab" style="outline:none" aria-controls="Addnewtab" role="tab" data-toggle="tab">ADD NEW</a></li>
                                    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">EDIT</a></li>
                                    <li runat="server" id="idViewtab"><a href="#Viewtab" style="outline:none" aria-controls="Viewtab" role="tab" data-toggle="tab">VIEW</a></li>
                                                                  
                                </ul>
    
      <div class="tab-content" style="padding-top: 5px">
                                    
      <!-- Begin List -->  
       <div role="tabpanel"  class="tab-pane active" id="Listtab">                    
                                       
        <div> 
    
        <asp:ScriptManager id="toolScriptManageer1" runat="server" EnablePartialRendering="false">
        </asp:ScriptManager> 
     
    	<label for="tungay">From &nbsp;&nbsp;&nbsp;       
        <asp:TextBox id="txtTungay" width="128px" Height ="30px" runat="server" MaxLength="10"  AutoPostBack="true"   ></asp:TextBox>            
                <ajaxToolkit:CalendarExtender id="Calendarfromdate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtTungay" format="dd/MM/yyyy" />
    	</label> 
       
            
        <label for="denngay">To &nbsp;
             
        <asp:TextBox id="txtDenngay" width="128px" Height ="30px"   AutoPostBack="true" runat="server" MaxLength="10" ></asp:TextBox>  
            <ajaxToolkit:CalendarExtender id="Calendartodate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtDenngay" format="dd/MM/yyyy" />	
    
        </label> 
    		 
    
       <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="txtTrangthai" width="128px" Height ="30px"  AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
        
     </div>
     <br/>
     
        <asp:GridView id="GridView1"  CssClass="dt-responsive" class="display" Width="100%"  runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px" >
        
        <Columns>
                <asp:BoundField DataField="Id" HeaderText="Customer Id" />
                <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            
              <asp:TemplateField HeaderText="Salary" >
                        <ItemTemplate>
                            <asp:textbox ID="txtSalary" Text='<%# Eval("Salary") %>'   Width="80px"  runat="server"></asp:textbox>
                        </ItemTemplate>
               </asp:TemplateField>
               
             <asp:BoundField DataField="Job" HeaderText="Job" />         
            
        </Columns>                       
        </asp:GridView> 
    
        <input type="hidden" runat="server" id="hidMaHDDV" />                       
                                       
        </div>                                                              
        <!-- End List -->
    
    
         <!-- Begin Addnew -->
          <div role="tabpanel" class="tab-pane" id="Addnewtab">
                
          <div> 
           
          <label for="thangnam">Month &nbsp;&nbsp;&nbsp;       
                          <asp:TextBox id="txtThangNam_addnew"  width="128px"   Height ="30px" runat="server"  MaxLength="7" ></asp:TextBox>            
    
                          <ajaxToolkit:CalendarExtender id="calendar1" ClientIDMode="Static" runat="server" TargetControlID="txtThangNam_addnew" Format="MM/yyyy" 
                          DefaultView="Months" OnClientShown="onCalendarShown"
                          OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />                        
           </label> 
    
        <label for="trangthai">Status&nbsp;
        <asp:DropDownList id="DropDownList_Status"  OnSelectedIndexChanged="DropDownList_Status_selectedIndexChanged"   AutoPostBack="true" runat="server" >    
        <asp:ListItem Text="All" Value="All"></asp:ListItem>
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:DropDownList>
        </label>	
                 
        </div>
        
          
          <asp:Gridview id="GridView2" CssClass="dt-responsive" class="display" Width="100%"   runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px">
                      
                <Columns>                
                
                    <asp:TemplateField HeaderText="Id" >
                        <ItemTemplate>
                            <asp:Label ID="txtId" Width="80px"  Text='<%# Eval("MyId") %>'  runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                    <asp:TemplateField HeaderText="Customer Name" >
                        <ItemTemplate>
                            <asp:textbox ID="txtName" Width="80px"  Text='<%# Eval("MyName") %>'  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
                                    
                     <asp:TemplateField HeaderText="CountryCode" Visible="false">
                        <ItemTemplate>
                            <asp:Label ID="txtCountryCode" Text='<%# Eval("CountryCode") %>'  runat="server" Visible="false"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                     <asp:TemplateField HeaderText="Country" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtCountry"  Width="100px" runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Salary" >
                        <ItemTemplate>
                            <asp:textbox ID="txtSalary"  Width="80px"  runat="server"></asp:textbox>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField HeaderText="Job" >
                        <ItemTemplate>
                             <asp:DropDownList ID="txtJob"   runat="server" AppendDataBoundItems="true">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
    
    
                    <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="50px" >
                        <ItemTemplate>
                            <asp:Button ID="bttRemoveRow" Width="100px" Text="Remove row" runat="server" onclick="bttRemoveRow_Click" Class="btn-primary"></asp:Button>
                        </ItemTemplate>
                    </asp:TemplateField>
                                                            
                </Columns>
            </asp:Gridview>        
         
         <div align="right" >
         <asp:Button ID="ButtonAdd" runat="server"  Text="Add row"   onclick="ButtonAdd_Click" Class="btn-primary" />
         </div>
                     
              
         <div align="Left" >
         <asp:Button  ID="ButtonSaveAll" runat="server"  Text="Save all row"   onclick="ButtonSaveAll_Click" Class="btn-primary" />
         </div>
              
                     
        </div>
         <!-- End Addnew -->
    
          <!-- Begin Edit -->
            <div role="tabpanel" class="tab-pane" id="Edittab">
                 Edit         
            </div>
          <!-- End Edit -->
    
    
           <!-- Begin View -->
             <div role="tabpanel" class="tab-pane" id="Viewtab">
                View 
             </div>
            <!-- End View -->
                                    
            </div>
            </div>
            </div>
    
        <asp:HiddenField ID="HiddenTab" runat="server" />
    
        </ContentTemplate>
        </asp:UpdatePanel>
    
         <!-- Panel  End-->              
         
        <script type="text/javascript">
        
            function RememberValue() {
             // var table = $('#example').DataTable({           
               var table = $('#<%=GridView2.ClientID%>').DataTable({                
                    'columnDefs': [
                       {
                           //"defaultContent": "-",
                           'targets': [1,2,3,4],
                           'render': function (data, type, row, meta) {
                               if (type === 'display') {
                                   var api = new $.fn.dataTable.Api(meta.settings);
    
                                   var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node());
    
                                   var $html = $(data).wrap('<div/>').parent();
    
                                   if ($el.prop('tagName') === 'INPUT') {
                                       $('input', $html).attr('value', $el.val());
                                       if ($el.prop('checked')) {
                                           $('input', $html).attr('checked', 'checked');
                                       }
                                   } else if ($el.prop('tagName') === 'TEXTAREA') {
                                       $('textarea', $html).html($el.val());
    
                                   } else if ($el.prop('tagName') === 'SELECT') {
                                       $('option:selected', $html).removeAttr('selected');
                                       $('option', $html).filter(function () {
                                           return ($(this).attr('value') === $el.val());
                                       }).attr('selected', 'selected');
                                   }
    
                                   data = $html.html();
                               }
    
                               return data;
                           }
                       }
                    ],
                    'responsive': true
                });
    
                // Update original input/select on change in child row
                $('#<%=GridView2.ClientID%> tbody').on('keyup change', '.child input, .child select, .child textarea', function (e) {
                
                    var $el = $(this);
                    var rowIdx = $el.closest('ul').data('dtr-index');
                    var colIdx = $el.closest('li').data('dtr-index');
                    var cell = table.cell({ row: rowIdx, column: colIdx }).node();
                    $('input, select, textarea', cell).val($el.val());
                    if ($el.is(':checked')) {
                        $('input', cell).prop('checked', true);
                    } else {
                        $('input', cell).removeProp('checked');
                    }
                });
            };
    
    
            $(function ()
            {
                SetTabs();
             //   $('#<%=GridView2.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false });
    RememberValue(); }); var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(function (sender, e) { if (sender._postBackSettings.panelsToUpdate != null) { SetTabs(); // $('#<%=GridView2.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false }); RememberValue(); } }); }; function SetTabs() { var tabName = $("[id*=HiddenTab]").val() != "" ? $("[id*=HiddenTab]").val() : "Listtab"; $('#dvTab a[href="#' + tabName + '"]').tab('show'); $("#dvTab a").click(function () { $("[id*=HiddenTab]").val($(this).attr("href").replace("#", "")); }); }; </script> <script type="text/javascript"> function pageLoad() { $('#<%=GridView1.ClientID%>').DataTable({ "paging": false, "ordering": false, "searching": false }); } </script> <script type="text/javascript"> function onCalendarHidden() { // Call on Addnew var cal = $find("calendar1"); if (cal._monthsBody) { for (var i = 0; i < cal._monthsBody.rows.length; i++) { var row = cal._monthsBody.rows[i]; for (var j = 0; j < row.cells.length; j++) { Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call); } } } } function onCalendarShown() { var cal = $find("calendar1"); cal._switchMode("months", true); if (cal._monthsBody) { for (var i = 0; i < cal._monthsBody.rows.length; i++) { var row = cal._monthsBody.rows[i]; for (var j = 0; j < row.cells.length; j++) { Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call); } } } } function call(eventElement) { var target = eventElement.target; switch (target.mode) { case "month": var cal = $find("calendar1"); cal._visibleDate = target.date; cal.set_selectedDate(target.date); //cal._switchMonth(target.date); cal._blur.post(true); cal.raiseDateSelectionChanged(); break; } } </script> </asp:Content>

    Friday, April 10, 2020 4:06 AM
  • User-475949336 posted

    if I add EnablePartialRendering="false" to

    <asp:ScriptManager id="toolScriptManageer1" runat="server" EnablePartialRendering="false">
        </asp:ScriptManager> 

    and call RememberValue(); as:

    $(function ()
    {
    SetTabs();
    RememberValue();});

    then all postback event will good runing, only exist ARE responsive.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 4:38 AM
  • User-719153870 posted

    Hi test0101,

    Sorry i don't get it, what do you mean by "only exist ARE responsive"?

    Anyway, i think it's time to open a new thread like we did before, provide the latest code you are testing with and describe your new issues(You did this very well in your ealier posts including this one).

    PS. Please mark those posts in this thread which helps sovled the original issues(like footable issue and remove does not work issue) including mine and yourselve's ones.

    Thanks!

    Best Regard,

    Yang Shen

    Friday, April 10, 2020 5:21 AM