Grid selection with checkbox of one row

3 posts, 1 answers
  1. Alexander
    Alexander avatar
    6 posts
    Member since:
    May 2020

    Posted 03 Jun 2020 Link to this post

    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:

            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BookingsEditor").Window(w=>w.Title("Insert/edit booking")))
            .Events(events =>
            .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 =>
                        .Text(" ")
                        .IconClass("fa fa-edit")
                        .UpdateIconClass(" ")
                        .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);

  2. Answer
    Nikolay  avatar
    295 posts

    Posted 08 Jun 2020 Link to this post

    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:

    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.

    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Alexander
    Alexander avatar
    6 posts
    Member since:
    May 2020

    Posted 08 Jun 2020 in reply to Nikolay Link to this post

    Works like a charm... Thanks!
Back to Top