Dear All!
I build Bootstrap Responsive GridView for Mobile Phone, Tablet and Desktop display by Send (Pass) GridView Row details to UserControl (ASCX) using jQuery in ASP.Net.
But i have problem:
I can't hidden 'save update' button when click 'add new' tab for add new record and hidden 'save add new' button in frmAddnew.ascx when edit for update.
when I click 'edit' button for edit, then eiditTab will active and frmAddnew.ascx loaded with name, mobile, email this is no problem.
But if in edit form frmAddnew.ascx I don't do anything and click to 'list' tab then it display in responsive mode.
And this is my code:
frmList.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmList.ascx.cs" Inherits="WebFormDemo01.frmList" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<link href="./css/mycss.css" rel="stylesheet" type="text/css" />
<body>
<div class="form-inline" >
<cc1:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></cc1:ToolkitScriptManager>
<label for="fromdate">from date:
<asp:TextBox ID="txtFrom" width="128px" Height ="30px" runat="server" MaxLength="10" AutoPostBack="true" ></asp:TextBox>
<cc1:CalendarExtender ID="Calendarfromdate" PopupButtonID="imgPopup" runat="server" TargetControlID="txtFrom" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
</label>
<label for="todate">To date:
<asp:TextBox ID="txttodate" width="128px" Height ="30px" AutoPostBack="true" runat="server" MaxLength="10" ></asp:TextBox>
<cc1:CalendarExtender ID="Calendartodate" PopupButtonID="imgPopup" runat="server" TargetControlID="txttodate" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
</label>
</div>
<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:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:HiddenField ID="hidId" Value='<%# Eval("id") %>' runat="server" /><%--use this to store customer id--%>
<asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobile Number">
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email Id">
<ItemTemplate>
<asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
$(function ()
{
$('[id*=GridView1]').footable();
});
</script>
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormDemo01
{
public partial class frmList : System.Web.UI.UserControl
{
public static string constr = "server=(local);uid=sa;database=test;pwd=111111; MultipleActiveResultSets=true"; // for Local
SqlConnection con = new SqlConnection(constr);
protected void Page_Load(object sender, EventArgs e)
{
GridView();
}
protected void bttEdit_Click(object sender, EventArgs e)
{
// GridViewRow row = ((Button)sender).Parent.Parent as GridViewRow;
// string index = row.Cells[0].ClientID.Substring(row.Cells[0].ClientID.Length - 1);//get in which row of Gridview the Edit button triggered this event
Button clickedButton = (Button)sender;
GridViewRow row = (GridViewRow)clickedButton.Parent.Parent;
int index = row.RowIndex;
ScriptManager.RegisterStartupScript(Page, this.GetType(), "goEdit", "$('#dvTab a[href=\"#Edittab\"]').tab('show');$('#ContentPlaceHolder1_idEdittab').show();", true);//show the Edittab and the Edittab<a>
ScriptManager.RegisterStartupScript(Page, this.GetType(), "PassValue", "Pass(" + index + ")", true);//fire the pass(row) method to pass values
}
protected void GridView()
{
try
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from register", con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adp.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
GridView1.DataSource = ds;
GridView1.DataBind();
Laptop_PC_Mobile();
}
else
{
ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
GridView1.DataSource = ds;
GridView1.DataBind();
int columncount = GridView1.Rows[0].Cells.Count;
GridView1.Rows[0].Cells.Clear();
GridView1.Rows[0].Cells.Add(new TableCell());
GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
GridView1.Rows[0].Cells[0].Text = "No Records Found";
}
}
catch (Exception ex)
{
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
}
finally
{
con.Close();
}
}
public void Laptop_PC_Mobile()
{
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,tablet";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
}
}
frmTab.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" EnableEventValidation="false" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="WebFormDemo01.frmTab" %>
<%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list" %>
<%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function Pass(row) {//this method is used to pass value from frmList to frmAddnew
var id = $("#ContentPlaceHolder1_mylist_GridView1_hidId_" + row).val();
var name = $("#ContentPlaceHolder1_mylist_GridView1_Label4_" + row).html();
var phone = $("#ContentPlaceHolder1_mylist_GridView1_Label5_" + row).html();
var email = $("#ContentPlaceHolder1_mylist_GridView1_Label6_" + row).html();
$("#ContentPlaceHolder1_Addnew1_txtName").val(name);
$("#ContentPlaceHolder1_Addnew1_txtMobile").val(phone);
$("#ContentPlaceHolder1_Addnew1_txtEmail").val(email);
$("#ContentPlaceHolder1_Addnew1_hidUId").val(id);//store customer id in hiddenfield so that the program could know which record in DB it's dealing with
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<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"><a href="#Listtab" style="outline: none" aria-controls="Listtab" role="tab" data-toggle="tab">List</a></li>
<li runat="server" id="idAddnew"><a href="#Addnew" style="outline: none" aria-controls="Addnew" 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>
</ul>
<div class="tab-content" style="padding-top: 5px">
<div role="tabpanel" class="tab-pane active" id="Listtab">
<uc:list ID="mylist" runat="server" />
</div>
<div role="tabpanel" class="tab-pane" id="Addnew">
<uc:addnew ID="myaddnew" runat="server" />
</div>
<div role="tabpanel" class="tab-pane" id="Edittab">
<uc:addnew ID="Addnew1" runat="server" />
</div>
</div>
</div>
</div>
</asp:Content>
