[Solved] Grid inside a ClientTemplate

[cp]

Hi,
I have a collection of Process objects, each with a property called "Items" that is another collection of Process Objects, so I would like to be able to display the Items property as a grid inside the ClientTemplate section however I'm not quite sure how to go about accomplishing this.

Also, is it possible to have the header removed?

<% Html.Telerik().Grid<Process>()
        .Name("SomeName")
        .Columns(columns =>
        {
            columns.Bound(e => e.Type).Title("Type").Width(50);
        })
        .DetailView(details => details.ClientTemplate(
        %><%
         Html.Telerik().Grid<Process>("<#= Items #>")
                          .Name("Name" )
                          .Columns(columns =>
                           {
                                       columns.Bound("Name").Title("Name").Width(50);
                           })
                           .Footer(false)
                           .ToHtmlString()
          %><%
                            ))
        .ClientEvents(events => events.OnDataBinding("onDataBindingDoSomething"))
        .Pageable(paging => paging.PageSize(20))
        .Sortable()
        .Render();
    %>

I also tried the following as well, but the only result was that it shifted everything by one column and left one column empty:

.DetailView(detailView => detailView.Template(e =>
        {
            %>
                <% Html.Telerik().Grid(e.Items)
                       .Name("Orders_" + e.ID)
                       .Columns(columns =>
                        {
                            columns.Bound(ea => ea.Name);
                        });
                %>
            <%
        }))

Any help is appreciated.

Thanks,

[Atanas Korchev]

Hello Claudiu,

 You can check the ajax hierarchy example which shows how to implement nested ajax-bound grids. Perhaps the help article would also be relevant.

Regards,
Atanas Korchev
the Telerik team

[cp]

Right,
I've been reading the help and looking at the samples, however what I'm trying to accomplish is not make another trip to the server to bind the detailviews since I'm getting all my data during my first trip.That works fine when using html, but as soon as I add a grid it either shifts my main grid by one column to the left or I get a grid that has no data,

Thanks,

[Atanas Korchev]

Hello Claudiu,

 The approach described in the online example and the demo is currently the only one supported. You cannot bind a grid declared on the server side to client-side data. In a word this:

<%= Html.Telerik.Grid<Process>("<#= Items #>") %> is not supported.

The second approach is for configuring the server detail template. If you need this you must output the grid somehow - currently it is not being rendered. Try this:

.DetailView(detailView => detailView.Template(e =>

        {

            %>

                <%= Html.Telerik().Grid(e.Items)

                       .Name("Orders_" + e.ID)

                       .Columns(columns =>

                        {

                            columns.Bound(ea => ea.Name);

                        });

                %>

            <%   

        }))

However defining the server template only will not work for ajax binding.

Currently you cannot declare a child grid and bind it instantly. The child grid should make another request. If you need to display the details instantly you can perhaps define a custom detail template like in this example.

Regards,
Atanas Korchev
the Telerik team

[cp]

The idea is that I want to use a grid and not a custom template.

Your code snippet throws an exception:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1026: ) expected

So you're saying that it's not possible to create the grid upfront in the template and bind it later on the OnRowDataBound event (or perhaps another event)?

Thanks,

[Atanas Korchev]

Hello Claudiu,

 Any grid which has a server template must be output by calling its Render() method. Here is the detailed explanation (it is for the window but the issue is the same). This is the reason for the compilation error.

As for client-side data binding - perhaps you can try subscribing to the OnDetailViewExpand method. Then find the child grid and bind it using the dataBind method. In this case paging and sorting for the child grid will not work. Here is a quick code snippet:

function onDetailViewExpand (e) {
    var parentGrid = $(this).data("tGrid");
    var dataItem  = parentGrid.dataItem($(e.masterRow));
    var childGrid = $(e.detailRow).find(".t-grid").data("tGrid");
    childGrid.dataBind(dataItem.Items);
}

Regards,
Atanas Korchev
the Telerik team

[cp]

This is perfect.

Thanks a bunch sir!