Asp.Net Core Razor Grid Single Select mode

[Dave]

I am having fits trying to figure this out...

I have a grid with a Select column.  I have set the GridSelectionMode to single.  Checkboxes show up on each row as expected.  However, there is a checkbox in the Title row as well.  So I tried to add a custom title in hopes of suppressing it, but it doesn't work.  When the header checkbox is clicked, it selects the first data row, and unchecking deselects the first row.

The bigger problem, though, is that when clicking on any row, the row is selected as expected.  But clicking on another row selects the new row, but the checkbox on the first clicked row remains checked.  The expected behavior is that when the second checkbox is clicked, the first will no longer be clicked.

The questions:

How do I get single mode to appear to the user as actually single - as in there is only one row with a check at a time?

And how can I get rid of the checkbox in the Title row?

[Stoyan]

Hello Dave,

The Select configuration of the column turns on the Multiple GridSelectionMode internally as mentioned in its API documentation.

To avoid this you can omit configuring the Select column of the Grid. This way the rows will be selectable when the user clicks on them.

Alternatively, if you need to use checkboxes for selection the steps below go through the custom approach needed to achieve that:

1. Define a Template column and populate it with checkboxes

   columns.Template("<input type='checkbox' id='checkbox_#=data.OrderID#' class='checkbox' />").Width(40);

2. Subscribe to the DataBound Event of the Grid to ensure the Grid's columns are already present

   .Events(e=>e.DataBound("onDataBound"))

3. In the onDataBound handler subscribe to the click event of the checkbox
4. In the click event handler, get the row, check if the checkbox is checked and use the select method to select the row
5. Finally, you can go through all checkboxes and deselect them and reselect the current checkbox

           function onDataBound(e){
               $(".checkbox").off().on("click", function(event){
                   var checkbox = $(event.currentTarget);              
                   var row = $(event.currentTarget).parent().parent();
                   if(checkbox[0].checked==true){
                       e.sender.select(row);
                       $(".checkbox").each((ind, input) => {
                           $(input)[0].checked = false;
                       });
                       checkbox[0].checked=true;
                   }
               })
           }

For your convenience I am attaching a sample project that showcases the behavior of the above.

Regards,
Stoyan
Progress Telerik

[Dave]

Thanks, Stoyan!

Without the checkbox it is an unintuitive experience - there is no indicator to the user that clicking the row does anything (or, for that matter, that they should click the row at all).  While this solution works, to be completely honest it is a lot of plumbing for what should be a reasonably simple thing.

[Stoyan]

Hi Dave,

Thank you very much for your feedback.

I will initiate a discussion with the team members responsible of the development of the Telerik Editors whether it's possible to expose a property that does the custom approach I've suggested out-of-the-box.

Then I will let you know to what conclusion we have come.

[Stoyan]

Hello Dave, 

Thank you for your patience.

Thе Selectable column of the Grid is populated by checkbox inputs. From a design standpoint checkboxes are used to select multiple available options, unlike the radio button input which is only used to select a single option among the available choices.

This is the reasoning behind the Select mode of the Grid being set automatically to Multiple when the Select column is activated.

It is also the reason why implementing a property that allows the Selectable column of the Grid to be in Single mode is not a valid Feature Request.

That being said I remain open, if more questions come up or if you have any feedback on the topic.

[Dave]

Thanks, Stoyan!

I know, it makes sense from an end user presentation sense to use checkboxes as multi-select indicators (where radio buttons would make more sense from a single-select presentation).  It just seemed odd that explicitly setting the grid to single-select didn't override the behavior.  Put another way, once the select column is added, the grid appears to be locked into multi-select mode regardless of anything explicitly stated in the grid configuration.  The disconnect here seems to be the real issue and probably should be noted somewhere in the documentation to prevent the confusion I had.

Either way, I worked out an alternate solution, so all is good.

[Stoyan]

Hi Dave,

That is a valid point, it would be useful if this behavior is noted in the API or in the Docs.

I will add the note and write to you in this thread when the changes are live.

Alternatively, you can submit a close request to let me know that you do not want to get notified about the progress of the change you have suggested.

[Stoyan]

Hi Dave,

I am happy to let you know that the notes in the client-side API columns.selectable and in the Grid Selection Docs are already live.

As a token of appreciation for your feedback I have updated your Telerik points.

Sincerely,

Stoyan