Davin Martyn

Davin Martyn

  • NA
  • 7.5k
  • 3m

Checkbox in gridview using jquery

Oct 13 2015 2:34 AM

 Hi ,

 

I am working in jquery and I want to add checkbox inside gridview but after running checkbox not appearing please help how can do this? 

 
 
<script type="text/javascript">

$(document).ready(function () {

$("#btnShowData").click(function () {

var param = { str: $('#txtCity').val() };

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default3.aspx/BindEmployees",

data: JSON.stringify(param),

//data: "{}",

dataType: "json",

success: function (result) {

for (var i = 0; i < result.d.length; i++) {

$("#gvData").append("<tr><td>" + result.d[i].ID + "</td><td>" + result.d[i].ReportName + "</td><td>" + result.d[i].ReportDescription + "</td><td>" + result.d[i].Status + "</td></tr>");

}

},

error: function (result) {

alert("Error");

}

});

});

});

// $(document).ready(function () {

// $("#btnShowData").click(function ()

// {

// $.ajax({

// type: "POST",

// contentType: "application/json; charset=utf-8",

// url: "Default3.aspx/BindEmployees",

// data: "{}",

// dataType: "json",

// success: function (result) {

// for (var i = 0; i < result.d.length; i++) {

// $("#gvData").append("<tr><td>" + result.d[i].ID + "</td><td>" + result.d[i].ReportName + "</td><td>" + result.d[i].ReportDescription + "</td><td>" + result.d[i].Status + "</td></tr>");

// }

// },

// error: function (result) {

// alert("Error");

// }

// });

// });

// });

</script>

<script type="text/javascript">

$(function () {

$("#txtCity").autocomplete({

source: function (request, response) {

var param = { cityName: $('#txtCity').val() };

$.ajax({

url: "Default3.aspx/GetCities",

data: JSON.stringify(param),

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

dataFilter: function (data) { return data; },

success: function (data) {

response($.map(data.d, function (item) {

return {

value: item

}

}))

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(textStatus);

}

});

},

minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data.

});

});

</script>

</head>

<body>

<button id="btnShowData" runat="server">Show Data</button>

<form id="form1" runat="server">

City:

<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>

<br />

<div>

<asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="true" ForeColor="#333333">

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<RowStyle BackColor="#EFF3FB" />

<Columns>

<asp:TemplateField>

<AlternatingItemTemplate>

<asp:CheckBox ID="chkStatus" runat="server" />

</AlternatingItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

 
Note : The first jquery function for button click i.e. after click on button record display in gridview
2- Second function for search record through textbox from database
I want to add checkbox in gridview and update record through checkbox? 
 
 
cs code :
 

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

this.BindGrid();

}

}

public void BindGrid()

{

DataTable dt = new DataTable();

dt.Columns.Add(" ID ");

dt.Columns.Add("ReportName");

dt.Columns.Add("ReportDescription");

dt.Columns.Add("Status");

gvData.DataSource = dt;

gvData.DataBind();

}

[WebMethod]

public static Employee[] BindEmployees(string str)

{

//DataTable dt = new DataTable();

List < Employee> employeeList = new List<Employee>();

using (SqlConnection con = new SqlConnection(@"Data Source = .; initial Catalog = master; Integrated Security = true"))

{

string Query = "SELECT * FROM Report WHERE ReportName= '" + str.ToString() + "'";

using (SqlCommand command = new SqlCommand(Query))

{

command.Connection = con;

con.Open();

SqlDataAdapter da = new SqlDataAdapter(command);

using (DataTable dt = new DataTable())

{

da.Fill(dt);

foreach (DataRow dtrow in dt.Rows)

{

Employee employee = new Employee();

employee.ID = dtrow["ID"].ToString();

employee.ReportName = dtrow["ReportName"].ToString();

employee.ReportDescription = dtrow["ReportDescription"].ToString();

employee.Status = dtrow["Status"].ToString();

employeeList.Add(employee);

}

}

}

}

return employeeList.ToArray();

}

public class Employee

{

public string ID { get; set; }

public string ReportName { get; set; }

public string ReportDescription { get; set; }

public string Status { get; set; }

}

[WebMethod]

public static List<string> GetCities(string cityName)

{

List<string> City = new List<string>();

string query = string.Format("SELECT ReportName FROM Report WHERE ReportName LIKE '%{0}%'", cityName);

//Note: you can configure Connection string in web.config also.

using (SqlConnection con = new SqlConnection(@"Data Source = .; initial Catalog = master; Integrated Security = true"))

{

using (SqlCommand cmd = new SqlCommand(query, con))

{

con.Open();

SqlDataReader reader = cmd.ExecuteReader();

while (reader.Read())

{

City.Add(reader.GetString(0));

}

}

}

return City;

}

public void chkStatus_OnCheckedChanged(object sender, EventArgs e)

{

SqlConnection con = new SqlConnection(@"Data Source = .; initial Catalog = master; Integrated Security = true");

con.Open();

CheckBox chkStatus = (CheckBox)sender;

Int64 nID = Convert.ToInt64(gvData.DataKeys[((GridViewRow)chkStatus.NamingContainer).RowIndex].Value);

string sQuery = "UPDATE Report SET Status = @Status WHERE ID = @ID";

SqlCommand com = new SqlCommand(sQuery, con);

com.Parameters.Add("@Status", SqlDbType.Bit).Value = chkStatus.Checked;

com.Parameters.Add("@ID", SqlDbType.BigInt).Value = nID;

com.ExecuteNonQuery();

BindGrid();

}

}

 

Answers (14)