locked
GridView Inline edit with footable plusgin RRS feed

  • Question

  • User-19694853 posted

    Hi everbody, i create  girdview with edit delete work ok, but i have a problem when i use with footable plugin.

    problem when i click edit.

    here my code

     <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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
        <script type="text/javascript">
            var $a = jQuery.noConflict(true);
        </script>
    
        <script type="text/javascript">
    
           <%-- $j(function () {
                $j('<%=GridView1.ClientID%>').footable();
            })($j);--%>
            $a(function () {
                $a('[id*=GridViewN]').footable();
            });
        </script>



    Tuesday, September 6, 2016 1:54 AM

All replies

  • User36583972 posted

    Hi zjm_zjm,

    According to the code you provided, As far as I know , your problem may be caused by the footable version is too low. You can try to modify your reference code like this:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.standalone.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.core.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/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="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.min.js"></script>

    If you want to refer to other documents ,link for your reference :

    jquery-footable :

    https://cdnjs.com/libraries/jquery-footable/3.1.0

    Sample for your reference :

    footable filtering with GridView :

    http://forums.asp.net/t/2102915.aspx

    Best Regards,

    Yohann Lu

    Wednesday, September 7, 2016 3:19 AM
  • User-19694853 posted

    thanks for replay, but when i change the css and js file gridview display 

    No results

    (it is mean no data but i have data )

    thanks

    i found this site 

    https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.editing.min.css
    
    Copy
    https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.editing.min.js

    and how to use, thanks in advance

    Wednesday, September 7, 2016 6:47 AM
  • User-19694853 posted

    My full code here

    asp gridview

    <div class="col-sm-12">
    	<asp:GridView ID="GridView1" DataKeyNames="id_g" runat="server" CssClass="footable"
    		AutoGenerateColumns="false" HeaderStyle-Font-Bold="true"
    		OnRowCancelingEdit="GridViewNhom_RowCancelingEdit"
    		OnRowDeleting="GridView1_RowDeleting"
    		OnRowEditing="GridView1_RowEditing"
    		OnRowUpdating="GridView1_RowUpdating"
    		OnRowCommand="GridView1_RowCommand"
    		OnRowDataBound="GridView1_RowDataBound">
    		<Columns>
    			<asp:TemplateField HeaderText="id group">
    				<ItemTemplate>
    					<asp:Label ID="txt_id_nhom" runat="server" Text='<%#Eval("id_g") %>' />
    				</ItemTemplate>
    				<EditItemTemplate>
    					<asp:Label ID="lbl_id_nhom" runat="server" CssClass="form-control" Text='<%#Eval("id_g") %>' />
    				</EditItemTemplate>
    
    			</asp:TemplateField>
    			<asp:TemplateField HeaderText="name group">
    				<ItemTemplate>
    					<asp:Label ID="lbl_name_g" runat="server" Text='<%#Eval("name_g") %>' />
    				</ItemTemplate>
    				<EditItemTemplate>
    					<asp:TextBox ID="txt_name_g" CssClass="form-control" runat="server" Text='<%#Eval("name_g") %>' />
    				</EditItemTemplate>
    
    			</asp:TemplateField>
    			<asp:TemplateField HeaderText="Point">
    				<ItemTemplate>
    					<asp:Label ID="lbl_point_card" runat="server" Text='<%#Eval("point_card") %>' />
    				</ItemTemplate>
    				<EditItemTemplate>
    					<asp:TextBox ID="txt_point_card" runat="server" CssClass="form-control" Text='<%#Eval("point_card") %>' />
    				</EditItemTemplate>
    			</asp:TemplateField>
    			<asp:TemplateField HeaderText="Action">
    				<EditItemTemplate>
    					<asp:LinkButton ID="BtnUpdate" class="control-label" runat="server" CommandName="Update" Text="Update" />
    
    				</EditItemTemplate>
    				<ItemTemplate>
    					<asp:LinkButton ID="BtnEdit" class="control-label" runat="server" CommandName="Edit" Text="Edit" />
    
    				</ItemTemplate>
    
    			</asp:TemplateField>
    			<asp:TemplateField HeaderText="CN1">
    				<EditItemTemplate>
    					<asp:LinkButton ID="BtnCancel" class="control-label" runat="server" CommandName="Cancel" Text="Cancel" />
    				</EditItemTemplate>
    				<ItemTemplate>
    					<asp:LinkButton ID="BtnDelete" class="control-label" runat="server" CommandName="Delete" Text="Delete" />
    				</ItemTemplate>
    			</asp:TemplateField>
    		</Columns>
    	</asp:GridView>
    </div>

    code load gridview

    protected void Load_GridView1()
            {
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "sp_get_point_card";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@select", "select");
                    cmd.Parameters.AddWithValue("@id_g", DBNull.Value);
                    cmd.Parameters.AddWithValue("@name_g", DBNull.Value);
                    cmd.Parameters.AddWithValue("@point_card", DBNull.Value);
                    cmd.Connection = con;
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    da.Fill(ds);
                    int count = ds.Tables[0].Rows.Count;
    
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                        //Attribute to hide column in Phone.
                        GridView1.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                        GridView1.Attributes.CssStyle.Add("CssClass", "footable");
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                        //Attribute to hide column in Phone.
                        GridView1.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                        int columncount = GridView1.Rows[0].Cells.Count;
                        
                    }
                    con.Close();
                    UpdatePanel2.Update();
                    DropDownList2.DataBind();
                    BindingToDropBoxDown();
                }
            }
        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
            {
                string id_group = GridView1.DataKeys[e.RowIndex].Values["id_g"].ToString();
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "sp_insert";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@action", "delete");
                    cmd.Parameters.AddWithValue("@id_r", id_group.ToString().Trim());
                    cmd.Parameters.AddWithValue("@name_g", DBNull.Value);
                    cmd.Parameters.AddWithValue("@point_card", DBNull.Value);
                    cmd.Connection = con;
                    con.Open();
                    int result = cmd.ExecuteNonQuery();
                    if (result == 1)
                    {
                        Load_GridView();
                        
                    }
                    con.Close();
                }
            }
    
            protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
            {
                GridView1.EditIndex = e.NewEditIndex;
                Load_GridView();
            }
    
            protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
            {
                string id_point = GridView1.DataKeys[e.RowIndex].Values["id_nhom"].ToString();
                TextBox name_group = (TextBox)GridViewNhom.Rows[e.RowIndex].FindControl("txt_name_g");
                TextBox point_card = (TextBox)GridViewNhom.Rows[e.RowIndex].FindControl("txt_point_card");
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "sp_insert";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@action", "insert");
                    cmd.Parameters.AddWithValue("@id_g", id_point.ToString().Trim());
                    cmd.Parameters.AddWithValue("@name_g", name_group.Text.ToUpper().Trim());
                    cmd.Parameters.AddWithValue("@point_card", point_card.Text.ToUpper().Trim());
                    cmd.Connection = con;
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                   
                    GridView1.EditIndex = -1;
                    Load_GridView();
    
                    UpdatePanel2.Update();
                    DropDownList2.DataBind();
                    BindingToDropBoxDown();
                }
            }
    
            protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
            {
    
            }
    
            protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
    
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    string id_g = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "id_g"));
                    LinkButton lnkbtnresult = (LinkButton)e.Row.FindControl("BtnDelete");
                    if (lnkbtnresult != null)
                    {
                        lnkbtnresult.Attributes.Add("onclick", "javascript:return deleteConfirm('" + id_g + "')");
                    }
                }
            }

    thanks in advance.

    Wednesday, September 7, 2016 7:14 AM
  • User-1642217485 posted

    Hi zjm_zjm,

    1.you problem may be result from version . you can try  modify code like it ,

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.core.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/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="https://cdnjs.cloudflare.com/ajax/libs/jqueryfootable/3.1.0/footable.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js></script>

    also you can try find which file need to reference or not .

    2.

    https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.editing.min.css
    https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.editing.min.js

    They are footable's edit controls, you add this reference, there will be the appropriate style and function, you only need to quote them(footable.editing.min.css and footable.editing.min.js ) in site , you can also modify the inside code . 

    footable provide more controls , like filter edit sorting etc .

    References links :

    https://cdnjs.com/libraries/jquery-footable

    Link for your reference :

    https://fooplugins.github.io/FooTable/index.html

    Wednesday, September 7, 2016 5:21 PM
  • User-19694853 posted

    i had change it and doesn't work too.

     <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.core.bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/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="https://cdnjs.cloudflare.com/ajax/libs/jqueryfootable/3.1.0/footable.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            var $a = jQuery.noConflict(true);
        </script>
    
        <script type="text/javascript">
    
           <%-- $j(function () {
                $j('<%=GridView1.ClientID%>').footable();
            })($j);--%>
            $a(function () {
                $a('[id*=GridView1]').footable();
            });
        </script>

    Thursday, September 8, 2016 12:23 AM
  • User-19694853 posted

    I have not solved the problem. plz any suggest thanks.

    Monday, September 12, 2016 7:43 AM
  • User36583972 posted

    Hi zjm_zjm,

    problem when i click edit

    Your description is not clear. I want to know what style effects you want.

    If your question about footable style, I suggest you can visit the FooTable official website and read the documentation and examples

    http://fooplugins.github.io/FooTable/docs/getting-started.html  

    Best Regards,

    Yohann Lu

    Wednesday, September 21, 2016 9:42 AM