select row by code, and add custom buttons in ASP.NET Core

[serge]

Hello

We use ASP.NET Core Grid to display a list of objects, from the list, only one object can be selected (or any) and I know the selected object ID.

Is there a way to make a row selected by using that id? Also, a button should alow to change the selection.

Also, is there a way to add custom buttons with icons? say, "edit" button to link to the "id/edit" page(not popup), as well as delete and "view", for each row... 

 

I have the question on SO for several days: https://stackoverflow.com/questions/69404558/add-custom-button-to-the-telerik-grid

[Stoyan]

Hello Serge,

Regarding your first question, I suggest defining a JS function that utilizes the approach at the Getting Row by ID section to select a Grid Row by its Id:

1. Pass the known Id as a parameter to the function
2. Use the get method of the Grid's DataSource field to retrieve with the specific Id
3. Then use  the get method of Model API (the object type of the dataItem is Model) to get the uid of the dataItem
4. Use the uid to select the row

    function selectRowWithId(id) {
        var grid = $("#grid").data("kendoGrid")
        var dataItem = grid.dataSource.get(id)
        var dataItemUID = dataItem.get("uid"); // get method of the Kendo UI Model object
        var tableRow = $("[data-uid='" + dataItemUID + "']"); // the data-uid attribute is applied to the desired table row element. This UID is rendered by the Grid automatically.
        grid.select(tableRow)
    }

The function above can also be called in the click handler of a button to select a row.

To create custom buttons in each row configure a column to populate the desired commands:

columns.Command(command => { command.Custom("View").Click("viewCommand").Text("View"); command.Custom("Edit").Click("editCommand").Text("Edit"); command.Destroy();  }).Width(300);

Then in the Click handler functions of those commands get the Ids of the rows. Use the Ids in the redirect url:

  function editCommand(e) {
        var grid = $("#grid").data("kendoGrid");
        var row = $(e.currentTarget).parent().parent();
        var dataItem = grid.dataItem(row);
        var url = "/" + dataItem.OrderID + "/" + "edit";
        window.location.replace( window.location.hostname  + url )
    }
    function viewCommand(e) {
        var grid = $("#grid").data("kendoGrid");
        var row = $(e.currentTarget).parent().parent();
        var dataItem = grid.dataItem(row);
        var url = "/" + dataItem.OrderID;
        window.location.replace( window.location.hostname  + url )
    }

Please review the behavior of the above in the attached sample project.

Finally, to add icons or customize the Command buttons in the Grid use their TempladeId configuration property:

command.Destroy().TemplateId("templateScript");

Refer to the Kendo Templates Article for more information about the Templates.

Please don't hesitate to let me know should further questions occur.

Regards,
Stoyan
Progress Telerik

[serge]

Hello Stoyan, thank you for the answer. In the SO question I note that I'd like to have the select button on the row I select (instead of "edit" or "view" buttons), and the selection should be persistent. I mean, when I load the page, the previously selected row should be selected.

[Stoyan]

Hi Serge,

The Grid offers adding a Select column which contains a checkbox. When the checkbox is checked the row it belongs to will be selected.

Alternatively, if you'd like to use a command button utilize the following steps to achieve this:

1. Define a custom command in the first column

   columns.Command(command => { command.Custom("Select").Click("select").HtmlAttributes(new { @class = "select" }); } );

2. In the handler function of the command's click event first get the current row instance by applying the parent method to the event's currentTarget.
3. The ariaSelected property of the current row represents whether the row is logically selected (if it is, the select method will return it)
4. Use the value of the ariaSelected property to determine whether to select or deselect a row.
5. To select the row use the select method and pass the current row as parameter
6. To deselect remove the k-state-selected class and set the ariaSelected property to "false"

       function select(e) {
           var grid = $("#grid").data("kendoGrid")
           currentRow = $(e.currentTarget).parent().parent();
           var selected = grid.select();
           if (selected.length < 1 || currentRow[0].ariaSelected!="true") {
               grid.select(currentRow);
           } else if(currentRow.has(".k-state-selected")){
               currentRow.removeClass("k-state-selected")
               currentRow[0].ariaSelected = "false";
           }
       }

Finally, you can use the getOptions and setOptions methods of the Grid to persist its state. Please refer to the Grid Persist state Demo for more information.