How to compine ClientRowTemplate and ClientDetailTemplateId

[Joseph]

Hello,

 

I've a kendo Grid in MVC that used ClientRowTemplate for coloring rows depending on the given data. Now we want to add details grid while keeping the current row template.

I've followed your example in http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

and I was able to add the details grid while I've to remove ClientRowTemplate  in order to have the grid rendered.

I need an example showing how to use the ClientRowTemplate in both main grid and the details one, in MVC.

 

Thanks You!

[Radoslav]

Hi Joseph,

I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you. Also please note that in order to have client template in the details grid, you need to escape the # sing in the details grid client template:

ClientRowTemplate(
             "<tr data-uid='#: uid #'>" +
            "<td class='details'>" +
                    "<span class='title'>\\#: ProductName \\#</span>" +
            "</td>" +
                   "<td class='UnitPrice'>\\#: UnitPrice \\#" +
                "</td>" +
            "<td class='employeeID'>" +
                        "\\#: UnitPrice \\#" +
            "</td>" +
         "</tr>"
    )

Also in order hierarchy to work as expected you need to add the expand icon and set the k-master-row as row’s class:

.ClientRowTemplate(
             "<tr data-uid='#: uid #' class='k-master-row'><td class='k-hierarchy-cell'><a class='k-icon k-plus' href='\\#' tabindex='-1'></a></td>" +


            "<td class='details'>" +
…

If you need further assistance, do not hesitate to contact us again.

Regards,
Radoslav
Telerik

[Joseph]

Perfect Radoslav, Thank you!

But I've another issue that I want to include all details grids in the search result.

I'm currently have the following JS function to search in the main grid only:

     function searchKeyUp() {
            var selectedItem = $('#searchFilter').val(),
                grid = $("#grid").data("kendoGrid"),
                filter,
                i;

            if (selectedItem) {
                filter = { logic: "or", filters: [] };

                filter.filters.push({ field: grid.columns[1].field, operator: "contains", value: selectedItem });


                grid.dataSource.filter(filter);
            }
            else {
                grid.dataSource.filter({});
            }



        }

[Radoslav]

Hello Joseph,

Can you please elaborate a bit more on the desired functionality? Do you want to use the same filter criteria for the parent grid and for the child grids? If this is the case you can use the same logic (adding filter object and calling filter function) for the parent and child grids.

Or you want to expand automatically all details grids when master grid is filtered? In this case you can iterate over grid rows and call expandRow function:

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Joseph]

Hello Radoslav,

I want to use the same filter criteria for the parent grid and for the child grids, I've tried to do that while I faced the following:

1- All child grids have to be expanded otherwise I can't filter as they are rendered on the run time once row expanded.

2- If I filtered the parent with the same criteria, that will override the child grids result and even a child grid contains the filtered value it will be disappeared if its parent doesn't fit the filter criteria, as the parent itself will be disappeared. 

[Radoslav]

Hello Joseph,

To achieve the desired functionality you can get the filter from the parent grid and apply it to the child grid datasource filter option. On the following link I created a small example which demonstrates this approach:
http://dojo.telerik.com/OJUzo
Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
Telerik