Asked by:
GridView Inline edit with footable plusgin

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.jsThey 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 :
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 editYour 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