Grid selection with checkbox of one row

[Alexander]

Hi All,

 

I Have a page with  two different grids. A Parent grid and a child grid. Through JS i use the change event of the grid to refresh the datasource of the second grid (to view the child entries). I only want one row at a time to be selected. First i used the single selection mode, but i was not able to clear the selection bu clicking somewhere else in (whitespace of the the grid) or on that row again. SO i moved to checkbox selection. THis works like a charm (also un-selecting), but it allows for multiple rows to be selected. Is there any way (built in or (js) hack) to do this?

 

My grid:

                @(Html.Kendo().Grid<PortSupervisor.ViewModels.Worklist.BookingsViewModel>()
        .Name("Bookingsgrid")
        .Sortable()
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BookingsEditor").Window(w=>w.Title("Insert/edit booking")))
        .Scrollable()
        .Selectable(s=>s.Mode(GridSelectionMode.Single))
        .Events(events =>
        {
            events.Change("onBookingsgridChange");
            events.Save("onSave");
        })
        .ToolBar(x =>
        {
            x.Create().Text("Add new Booking");
        })
        .Columns(columns =>
        {
            columns.Select().Width("2rem").ClientHeaderTemplate(" ");
            columns.Bound(c => c.ContainerNumber);
            columns.Bound(c => c.BookingReferenceOperator).Title("Ref. Operator");
            columns.Command(column =>
            {
                column
                    .Edit()
                    .Text(" ")
                    .IconClass("fa fa-edit")
                    .UpdateText("Save")
                    .UpdateIconClass(" ")
                    .CancelText("Cancel")
                    .CancelIconClass(" ")
                    .HtmlAttributes(new { data_tippy_content = "Edit" });
                column.Destroy().IconClass("fa fa-trash").Text(" ").HtmlAttributes(new { data_tippy_content = "Delete" });
            });
        })
        .DataSource(ds => ds.Ajax()
            .Events(events => events.Error("function(args){telerikGridErrorhandler(args,'Bookingsgrid');}"))
            .Read(r => r.Url("/Worklist/Journey/Bookingsgrid?handler=Read").Data("JourneyIdTokenAndVars"))
            .Update(u => u.Url("/Worklist/Journey/Bookingsgrid?handler=Update").Data("JourneyIdTokenAndVars"))
            .Create(c => c.Url("/Worklist/Journey/Bookingsgrid?handler=Create").Data("JourneyIdTokenAndVars"))
            .Destroy(d => d.Url("/Worklist/Journey/Bookingsgrid?handler=Destroy").Data("JourneyIdTokenAndVars"))
            .Model(m => {
                m.Id(field => field.BookingId);
                m.Field(field => field.BookingId).Editable(false);
            })
            .PageSize(5)
        )
        .Pageable()
        .Height("29rem")
    )

[Nikolay]

Hello Alexander,

Thank you for sharing this use-case.

I would suggest limiting the selection to only one Grid row at a time as it is demonstrated in the following article:

• https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-select-single-row

In short:

- Remove the master checkbox by adding an empty header template to the column.
- Subscribe for the click event of the checkboxes by using a jQuery selector.
- In the click event handler, get the row and the row classes by using the closest jQuery method.
- Based on the row classes, use the clearSelection method of the Grid.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Alexander]

Works like a charm... Thanks!