Display Child Records in Grid Within Window

[Taylor]

Hi,

I have a use case where a user can click on a link or button in a parent record in a Kendo Grid, which causes a Kendo Window to become visible and display within it another Kendo Grid listing the child records corresponding to the record clicked in the parent page.   In this case, the parent  Grid would display a list of Document records;  When the user clicks on a link or button in the row of a particular Document,  a Window pops up with the Version History records for the Document in another Grid. 

Should the Version History Grid be in a partial view, as suggested in https://stackoverflow.com/questions/28772589/load-kendo-grid-in-kendo-window, and then brought into the Window, which is constructed in JavaScript, or is there a better/more standard approach, preferably one that uses html helpers? 

Also, how do I set  it up so that the Grid in the Window only displays Version History pertaining to the Document that was clicked?

If anybody has links to examples/samples that I can research, or can answer my questions, I'd be most appreciative.  I think that similar use cases just use the Grid Hierarchy, but unfortunately it's not an option for my use case.

Thanks!

Taylor

 

[Stoyan]

Hello Taylor,

Thank you for the thorough explanation of the research you have done so far. You can indeed achieve displaying the child Grid into a Window with the use of HtmlHelpers.

There are 2 different approaches to realize the desired outcome.

Window Content Rendered at the Client-side

Define the child Grid in a template similar to the hierarchical Grid scenario and combine it with the approach shown in the Custom Command Demo.

Review the combination of the two approaches in this Telerik REPL.

Window Content Provided by the Server

Alternatively, you can utilize the LoadContentFrom configuration method of the Window component. This would require you to set up a separate partial view and to configure a Controller action method to return the view:

        @(Html.Kendo().Window()
            .Name("window")
            .Title("Child Grid")
            .Content("loading user info...")
            .Visible(false)
            .LoadContentFrom("ChildGrid", "Grid")
            .Draggable()
            .Resizable()
        )

        public ActionResult ChildGrid()
        {
            return PartialView();
        }

You can find a sample of this approach in the attached sample project.

I hope these suggestions are useful in the scenario at hand.

Regards,
Stoyan
Progress Telerik

[Taylor]

Hi Stoyan,

Thanks for the explanation and sample code.  I looked through the code for both approaches, and it appears that the records in the child grid are not filtered to display only those records that are related to the record selected in the parent grid, resulting in the child grid displaying the same records for each record in the parent grid.  

Do you have an example where the child grid's data is filtered to display only data related to the record clicked in the parent grid?

Thanks,

Taylor

[Stoyan]

Hi Taylor,

You are correct that in the current configuration the content of the Window remains static and doesn't get updated when different rows are clicked.

For the Window with Content Rendered at the Client-side this issue arises because the Child Grid is configured to be static. This is so because the REPL doesn't allow control over the Controller's action methods. 

With that said you can filter the data in your project by configuring the Data configuration option of the DataSource's Read transport:

.Read(read => read.Action("Orders", "Grid").Data("additionalData"))

This allows you to configure a handler JavaScript function that will pass the EmployeeID of the parent to the server and there you can filter the returned data as needed.

            var empID;
            function showDetails(e) {              
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#window").data("kendoWindow");
                empID=dataItem.EmployeeID;
                ...            
            }
            function additionalData(e){
                return {employeeID:empID}
            }

 public ActionResult Orders([DataSourceRequest] DataSourceRequest request, int employeeID)
 {
       ...
 }

Additionally, to force the Window to renew its content for the partial view approach you need to also modify the showDetails function to ensure the Window's content is refreshed:

           function showDetails(e) {              
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#window").data("kendoWindow");
                empID=dataItem.EmployeeID;
                wnd.content("loading user info...").refresh({
                    url: "@Url.Action("ChildGrid", "Grid")"
                }).center().open();
            }

For your convenience I have modified the sample project to reflect these changes.