This is a migrated thread and some comments may be shown as answers.

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

6 Answers 1166 Views
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 20 Feb 2013, 01:34 AM
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.

6 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 21 Feb 2013, 02:22 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 1
answered on 22 Feb 2013, 01:50 AM
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');
                    }
                });
            }
        });
    });
0
Petur Subev
Telerik team
answered on 25 Feb 2013, 12:45 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 1
answered on 28 Feb 2013, 02:24 PM
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?
0
Scott
Top achievements
Rank 1
answered on 28 Feb 2013, 02:43 PM
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!
0
Josh
Top achievements
Rank 1
answered on 28 May 2013, 02:13 PM
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";
                                                }
                                            })
Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Scott
Top achievements
Rank 1
Josh
Top achievements
Rank 1
Share this question
or