I'm using Telerik ASP.Net MVC Grid and I have checkboxes in each cell (5 checkboxes). When checkbox change state (selected or deselected) I want to get the number of selected checkboxes and update my database table.And when I refresh the grid or close and reopen the application, I should find that the selected checkboxes are always selected (read from database the number of selected checkboxe in every cell). How can I do this?
Grid code:
@(Html.Kendo().Grid<SereneQM.Models.TableauCtrlMesureCm>()
.Name("myGrid")
.Columns(columns =>
{
columns.ForeignKey(o => o.ElementsMesureId, (System.Collections.IEnumerable)ViewData["elementsMesure"], "ElementsMesureId", "Name").Title("Mesure de").Width("130px");
columns.Bound(e => e.C_3).ClientTemplate("<input type='checkbox' value='C_3_1' id= 'C_3_c1' class='chkbx' onclick='c_3_1ChkBoxClick();' /> <input type='checkbox' value='@item.C_3' @(item.C_3=='True' ? 'checked= checked' name='chx_3_2' id='C_3_c2' class='chkbx' onclick='c_3_2ChkBoxClick() ;' /> <input type='checkbox' #= C_3 ? checked='': '' # class='chkbx' id= 'C_3_c3' onclick='c_3_3ChkBoxClick() ;' /> <input type='checkbox' #= C_3 ? checked='': '' # class='chkbx' id= 'C_3_c4' onclick='c_3_4ChkBoxClick() ;' /> <input type='checkbox' #= C_3 ? checked='': '' # class='chkbx' id= 'C_3_c5' onclick='c_3_5ChkBoxClick() ;' />")
.HtmlAttributes(new { style = "text-align: center" }).Title("-3").Width(50);
columns.Bound(e => e.C_2_5).ClientTemplate("<input class='chkbx' type='checkbox' id= 'C_2_5_c1'/> <input class='chkbx' type='checkbox' id= 'C_2_5_c2'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("-2.5").Width(50);
columns.Bound(e => e.C_2).ClientTemplate("<input type='checkbox' #= C_2 ? checked='': '' # class='chkbx' onclick='c_2ChkBoxClick();'/> <input type='checkbox' #= C_2 ? checked='': '' # class='chkbx' onclick='c_2ChkBoxClick();'/> <input type='checkbox' #= C_2 ? checked='': '' # class='chkbx'onclick='c_2ChkBoxClick();' /> <input type='checkbox' #= C_2 ? checked='': '' # class='chkbx' onclick='c_2ChkBoxClick();'/> <input type='checkbox' #= C_2 ? checked='': '' # class='chkbx' onclick='c_2ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("-2").Width(50);
columns.Bound(e => e.C_1_5).ClientTemplate("<input type='checkbox' #= C_1_5 ? checked='': '' # class='chkbx' onclick='c_1_5ChkBoxClick();'/> <input type='checkbox' #= C_1_5 ? checked='': '' # class='chkbx' onclick='c_1_5ChkBoxClick();'/> <input type='checkbox' #= C_1_5 ? checked='': '' # class='chkbx' onclick='c_1_5ChkBoxClick();'/> <input type='checkbox' #= C_1_5 ? checked='': '' # class='chkbx' onclick='c_1_5ChkBoxClick();'/> <input type='checkbox' #= C_1_5 ? checked='': '' # class='chkbx' onclick='c_1_5ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("-1.5").Width(50);
columns.Bound(e => e.C_1).ClientTemplate("<input type='checkbox' #= C_1 ? checked='': '' # class='chkbx' onclick='c_1ChkBoxClick();'/> <input type='checkbox' #= C_1 ? checked='': '' # class='chkbx' onclick='c_1ChkBoxClick();'/> <input type='checkbox' #= C_1 ? checked='': '' # class='chkbx' onclick='c_1ChkBoxClick();'/> <input type='checkbox' #= C_1 ? checked='': '' # class='chkbx' onclick='c_1ChkBoxClick();'/> <input type='checkbox' #= C_1 ? checked='': '' # class='chkbx' onclick='c_1ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("-1").Width(50);
columns.Bound(e => e.C_0_5).ClientTemplate("<input type='checkbox' #= C_0_5 ? checked='': '' # class='chkbx' onclick='c_0_5ChkBoxClick();'/> <input type='checkbox' #= C_0_5 ? checked='': '' # class='chkbx' onclick='c_0_5ChkBoxClick();'/> <input type='checkbox' #= C_0_5 ? checked='': '' # class='chkbx' onclick='c_0_5ChkBoxClick();'/> <input type='checkbox' #= C_0_5 ? checked='': '' # class='chkbx' onclick='c_0_5ChkBoxClick();'/> <input type='checkbox' #= C_0_5 ? checked='': '' # class='chkbx' onclick='c_0_5ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("-0.5").Width(50);
columns.Bound(e => e.C0).ClientTemplate("<input type='checkbox' #= C0 ? checked='': '' # class='chkbx' onclick='c0ChkBoxClick();'/> <input type='checkbox' #= C0 ? checked='': '' # class='chkbx' onclick='c0ChkBoxClick();'/> <input type='checkbox' #= C0 ? checked='': '' # class='chkbx' onclick='c0ChkBoxClick();'/> <input type='checkbox' #= C0 ? checked='': '' # class='chkbx' onclick='c0ChkBoxClick();'/> <input type='checkbox' #= C0 ? checked='': '' # class='chkbx' onclick='c0ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("0").Width(50);
columns.Bound(e => e.C0_5).ClientTemplate("<input type='checkbox' #= C0_5 ? checked='': '' # class='chkbx' onclick='c0_5ChkBoxClick();'/> <input type='checkbox' #= C0_5 ? checked='': '' # class='chkbx' onclick='c0_5ChkBoxClick();'/> <input type='checkbox' #= C0_5 ? checked='': '' # class='chkbx' onclick='c0_5ChkBoxClick();'/> <input type='checkbox' #= C0_5 ? checked='': '' # class='chkbx' onclick='c0_5ChkBoxClick();'/> <input type='checkbox' #= C0_5 ? checked='': '' # class='chkbx' onclick='c0_5ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("0.5").Width(50);
columns.Bound(e => e.C1).ClientTemplate("<input type='checkbox' #= C1 ? checked='': '' # class='chkbx' onclick='c1ChkBoxClick();'/> <input type='checkbox' #= C1 ? checked='': '' # class='chkbx' onclick='c1ChkBoxClick();'/> <input type='checkbox' #= C1 ? checked='': '' # class='chkbx' onclick='c1ChkBoxClick();'/> <input type='checkbox' #= C1 ? checked='': '' # class='chkbx' onclick='c1ChkBoxClick();'/> <input type='checkbox' #= C1 ? checked='': '' # class='chkbx' onclick='c1ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("1").Width(50);
columns.Bound(e => e.C1_5).ClientTemplate("<input type='checkbox' #= C1_5 ? checked='': '' # class='chkbx' onclick='c1_5ChkBoxClick();'/> <input type='checkbox' #= C1_5 ? checked='': '' # class='chkbx' onclick='c1_5ChkBoxClick();'/> <input type='checkbox' #= C1_5 ? checked='': '' # class='chkbx' onclick='c1_5ChkBoxClick();'/> <input type='checkbox' #= C1_5 ? checked='': '' # class='chkbx' onclick='c1_5ChkBoxClick();'/> <input type='checkbox' #= C1_5 ? checked='': '' # class='chkbx' onclick='c1_5ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("1.5").Width(50);
columns.Bound(e => e.C2).ClientTemplate("<input type='checkbox' #= C2 ? checked='': '' # class='chkbx' onclick='c2ChkBoxClick();'/> <input type='checkbox' #= C2 ? checked='': '' # class='chkbx' onclick='c2ChkBoxClick();'/> <input type='checkbox' #= C2 ? checked='': '' # class='chkbx' onclick='c2ChkBoxClick();'/> <input type='checkbox' #= C2 ? checked='': '' # class='chkbx' onclick='c2ChkBoxClick();'/> <input type='checkbox' #= C2 ? checked='': '' # class='chkbx' onclick='c2ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Title("2").Width(50);
columns.Bound(e => e.C2_5).Title("2.5").ClientTemplate("<input type='checkbox' #= C2_5 ? checked='': '' # class='chkbx' onclick='c2_5ChkBoxClick();'/> <input type='checkbox' #= C2_5 ? checked='': '' # class='chkbx' onclick='c2_5ChkBoxClick();'/> <input type='checkbox' #= C2_5 ? checked='': '' # class='chkbx' onclick='c2_5ChkBoxClick();'/> <input type='checkbox' #= C2_5 ? checked='': '' # class='chkbx' onclick='c2_5ChkBoxClick();'/> <input type='checkbox' #= C2_5 ? checked='': '' # class='chkbx' onclick='c2_5ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Width(50);
columns.Bound(e => e.C3).Title("3").ClientTemplate("<input type='checkbox' #= C3 ? checked='': '' # class='chkbx' onclick='c3ChkBoxClick();'/> <input type='checkbox' #= C3 ? checked='': '' # class='chkbx' onclick='c3ChkBoxClick();'/> <input type='checkbox' #= C3 ? checked='': '' # class='chkbx' onclick='c3ChkBoxClick();'/> <input type='checkbox' #= C3 ? checked='': '' # class='chkbx' onclick='c3ChkBoxClick();'/> <input type='checkbox' #= C3 ? checked='': '' # class='chkbx' onclick='c3ChkBoxClick();'/>")
.HtmlAttributes(new { style = "text-align: center" }).Width(50);
columns.Bound(e => e.MD).Title("M.D").Width(50);
})
.DataSource(dataSource => dataSource
.Ajax()
.Group(g => g.Add(p => p.Size))
.Batch(true)
.ServerOperation(false)
.AutoSync(true)
.Events(events => events.Error("error_handler").RequestEnd("onGridDataSourceRequestEnd"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id);
model.Field(p => p.C_3).Editable(false);
model.Field(p => p.C_2_5).Editable(false);
model.Field(p => p.C_2).Editable(false);
model.Field(p => p.C_1_5).Editable(false);
model.Field(p => p.C_1).Editable(false);
model.Field(p => p.C_0_5).Editable(false);
model.Field(p => p.C0).Editable(false);
model.Field(p => p.C0_5).Editable(false);
model.Field(p => p.C1).Editable(false);
model.Field(p => p.C1_5).Editable(false);
model.Field(p => p.C2).Editable(false);
model.Field(p => p.C2_5).Editable(false);
model.Field(p => p.C3).Editable(false);
})
.Read(read => read.Action("Tab_Read", "Home").Data("getData"))
.Create(create => create.Action("Tab_Create", "Home").Data("getData"))
.Update(update => update.Action("Tab_Update", "Home"))
.Destroy(destroy => destroy.Action("Tab_Destroy", "Home"))
)
.Scrollable()
.HtmlAttributes(new { style = "height: 550px" })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Selectable()
.Sortable()
)
The "getData" is javascript method that content the values to add/update the database. Take a look to this screenshot to better interstand.
Aucun commentaire:
Enregistrer un commentaire