lundi 28 août 2017

How to count number of checkboxes selected from Telerik ASP MVC Grid cell

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.

Grid view screenshot

Database table screenshot




Aucun commentaire:

Enregistrer un commentaire