Selecting a row of a Grid programmatically based on the database Id (PK) - ASP.NET MVC

[Scott]

Here is what I am trying to do.
From one view I allow the user to create a new record, let's call it Employee.  When the record is created (server side) I want to be able to pass the newly created database Id so that when I display the list of Employees in a Kendo UI grid which is populated via Ajax() call; I want to "pre" select the newly created row.  

I have not seen any good example of how to do this, especially in an ASP.NET MVC environment.

[Petur Subev]

Hello Scott,

Basically you can use the dataBound event to handle and select a row based on your needs by simply addting the k-state-selected class to the tr element. Consider using the dataItem method also.

Here is a sample that should give you the idea:

http://jsbin.com/ulizuv/2/edit

I hope this helps.

Kind regards,
Petur Subev
the Telerik team

[Scott]

I reviewed the demo you sent and tried to implement within my solution.  However, it does not seem to work and in fact adding the dataBound handler seems to mess up the widths of the columns.  

Here is my grid definition:

@(Html.Kendo().Grid<SS.Web.Models.EmployeeViewModel>()
                    .Name("EmployeeListGrid")                    
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.employeeID).Hidden(true);
                        columns.Bound(p => p.fullName).HtmlAttributes(new { align = "left" });
                        columns.Bound(p => p.employeeIdentifier).HtmlAttributes(new { align = "left" });
                        columns.Bound(p => p.positionTypeName).HtmlAttributes(new { align = "left" });
                        columns.Bound(p => p.employeeID)
                            .Filterable(false)
                            .Sortable(false)
                            .Title("")
                            .Width(460)
                            .ClientTemplate("<span class='k-button k-space-left'><span class='k-icon k-i-pencil'></span><a class='k-button-icontext' href='" + Url.Action("EditEmployee", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Details</a></span></span>" +
                                            "# if(HasContact == true ){ # " +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-pencil'></span><a class='k-button-icontext' href='" + Url.Action("AddEditEmployeeContactInformation", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Contact</a></span></span>" +
                                            "# } else { #" +
                                             "<span class='k-button k-space-left'><span class='k-icon k-i-plus'></span><a class='k-button-icontext' href='" + Url.Action("AddEditEmployeeContactInformation", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Contact</a></span></span>" +
                                            " # } #" +
                                            "# if(HasLoadSetting == true ){ # " +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-pencil'></span><a class='k-button-icontext' href='" + Url.Action("AddEditEmployeeLoadSettings", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Load</a></span></span>" +
                                            "# } else { #" +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-plus'></span><a class='k-button-icontext' href='" + Url.Action("AddEditEmployeeLoadSettings", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Load</a></span></span>" +
                                            " # } #" +
                                            "# if(EntityIsActive == true ){ # " +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-tick'></span><a class='k-button-icontext' href='" + Url.Action("InActivateEmployee", "Employee") + "/#= employeeID #' style='vertical-align: middle'> In Activate</a></span></span>" +
                                            "# } else { #" +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-tick'></span><a class='k-button-icontext' href='" + Url.Action("ActivateEmployee", "Employee") + "/#= employeeID #' style='vertical-align: middle'> Activate</a></span></span>" +
                                            " # } #" +
                                            "<span class='k-button k-space-left'><span class='k-icon k-i-close'></span><a class='k-button-icontext' href='javascript:confirmDelete(#= employeeID #);' style='vertical-align: middle'>Delete</a></span></span>");
                    })
                    .HtmlAttributes(new { style = "height: 500px" })
                        .Pageable()
                        .Sortable()
                        .Scrollable()
                        .Resizable(resize => resize.Columns(true))
                        .Reorderable(reorder => reorder.Columns(true))
                        .Filterable()
                        .Selectable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(500)
                        .Model(model =>
                        {
                            model.Id(p => p.employeeID);
                        })
                        .Read(read => read.Action("GetEmployeeList", "Employee").Data("getScope"))
                    )
                )

Here is the code I added to my .chtml file:

$(document).ready(function () {
        $("#EmployeeListGrid").kendoGrid({
            dataBound: function () {
                var grid = this;
                $.each(grid.tbody.find('tr'), function () {
                    var model = grid.dataItem(this);
              
                    if (model.Id == 2) {//changed to see if i can select the row with database Id of 2
                        $('[data-uid=' + model.uid + ']').addClass('k-state-selected');
                    }
                });
            }
        });
    });

[Petur Subev]

Hello again Scott,

I am not sure what exactly is the issue. Could you please modify the JsBin to reproduce it so we can see what's the reason for what you experience?

Kind Regards,
Petur Subev
the Telerik team

[Scott]

I guess I am not sure how to modify the JSBin to represent my exact environment.  I am using the Kendo UI ASP.NET MVC Complete server side helpers to define the grid.  The grid is defined to bind data via an Ajax call to a controller action.  This site is not yet on a live production server, so I cannot expose the server side data at this point.

From what I've seen trying to debug the JavaScript using Chrome's developer tools; it appears that the function/code within the $.each() loop is never executed, so the following if() statement that compare the model's value is never executed.  Is there a reason why, maybe my configuration of the grid, that each "tr" is not being found?

[Scott]

I did finally get it to work in a side example.  It appears that my code I posted earlier was not actually getting a reference to the grid so the $.each() loop was not executing.  Here is an example of the js that worked for me.

 $(document).ready(function() {
        var grid = $('#ExistingPartsGrid').data('kendoGrid');
        grid.bind('dataBound', function(e) {
            $.each(grid.tbody.find('tr'),function(){
                var model = grid.dataItem(this);
                if(model.PartNumber=="R7251"){//some condition
                    $('[data-uid='+model.uid+']').addClass('k-state-selected');
                }                          
            });
        });
    });

Thanks for your help!

[Josh]

Try using the RowAction event which will evaulate on each server rendered row instead of trying to select it afterwards using jquery.

 .RowAction(row => 
                                            {
                                                if (condition)
                                                {
                                                    row.HtmlAttributes["class"] = "k-state-selected";
                                                }
                                            })