mardi 1 août 2017

How to make checkbox single click event affect other rows on kendo grid

I have a Kendo grid which loads roles and mailsevents.I also have a boolen which shows which mailsevents is selected for that role Onload, you can select or de-select mailevent if you want. One role can have more than one mailevent, which means some mailevents will repeats but for a different role which is still fine.

What i want is, If i select/unselect mailevents for a role and its Id is 10 and on other roles there's mailevents Id 10, i want it to be selected or un-selected across the grid. One click event must apply across all mailevents with the same ID.

Json Object Results

[
 {
roleID: 46,
**mailEventID: 36,**
selected: false
},
{
roleID: 48,
**mailEventID: 36,**
selected: false
},
{
roleID: 8,
mailEventID: 32,
selected: true
},
{
roleID: 47,
**mailEventID: 36,**
selected: false
},
{
roleID: 14,
mailEventID: 20,
selected: true
}
]

Kendo Grid

<div class="form-group">
            @(Html.Kendo().Grid<modelMailing>()
            .Name("Grid1")
                  .Columns(columns =>
                  {
                  columns.Bound(x => x.roleID).Title("roleID").Hidden(false).Width(0);
                  columns.Bound(x => x.roleName).Title("Role Names");
                  columns.Bound(x => x.mailEventID).Title("mailEventID");//.Hidden(true).Width(0);
                  columns.Bound(x => x.mailEventName).Title("MailEventName");
                   columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= selected ? checked='checked':'' # class='chkbx' />").Title("Assigned Roles");
                  })
                  .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                  .Scrollable()
                  .Filterable()
                  .Sortable()
                  .Resizable(resize => resize.Columns(true))
                  .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false) //No post back
                  .Read(read => read.Action("Action", "Account"))))
        </div>

Javascript: For selection

$(function () {
    $('#Grid1').on('click', '.chkbx', function () {
        var checked = $(this).is(':checked');
        var grid = $('#Grid1').data().kendoGrid;
        var dataItem = grid.dataItem($(this).closest('tr'));
        dataItem.set('selected', checked);
    })
})




Aucun commentaire:

Enregistrer un commentaire