Grid will not render in Hierarchy (VB.net)

[Dan]

I am trying to render a grid hierarchy. Here is my code.

Parent Grid

@Code
    Html.Kendo().Grid(Of BenchStatusIndicatorMVC.Target)() _
        .Name("Grid") _
        .ToolBar(Function(t)
                     t.Search()
                 End Function) _
        .Columns(Sub(c)
                     c.Bound(Function(p) p.StandardId)
                     c.Bound(Function(p) p.PC)
                     c.Bound(Function(p) p.DateEntered)
                     c.Bound(Function(p) p.DateModified)
                     c.Bound(Function(p) p.Type)
                 End Sub) _
        .Pageable(Sub(x)
                      x.PageSizes(True)
                  End Sub) _
        .ClientDetailTemplateId("template") _
        .Sortable() _
        .Filterable() _
        .DataSource(Function(d)
                        d.Ajax() _
        .Read(Function(read) read.Action("Target_Read", "Target")) _
        .ServerOperation(False) _
                        .Model(Sub(m)
                                   m.Id(Function(i) i.StandardId)

                               End Sub)
                    End Function) _
        .Render()
End Code

[Dan]

template code: 

 

This renders a blank row under the main grids row. 

<script id="template" type="text/kendo-tmpl">

    @CODE

        Html.Kendo().Grid(Of Target)() _
.Name("grid#=StandardId##=Type#") _
.Columns(Sub(c)
         c.Bound(Function(p) p.TargetName)
         c.Bound(Function(p) p.TargetValue)
     End Sub) _
.DataSource(Function(d)
            d.Ajax() _
            .Read(Function(read) read.Action("TargetHeirarchy_Read", "Target", New With {.StandardId = "#=StandardId#"})) _
            .ServerOperation(False) _
            .Model(Sub(m)
               m.Id(Function(i) i.StandardId)

           End Sub)
        End Function) _
.ToClientTemplate() _
    End CODE

</script>

[Dan]

It seems I can only get the grid to display via the .Render() method. If I swap the above .ToClientTemplate() with .Render() and pull it out of the template script it renders perfect. But with .Render() it errors with Invalid template. I have also tried taking the above code with Render() , putting it in a partial view and using .LoadContentFrom in a tab element but it doesnt seem to even run the action i specify in the parameters. 

 

Html.Kendo().TabStrip() _
       .Name("TabStrip2") _
       .Items(Function(tabstrip) tabstrip.Add().Text("Target Values").LoadContentFrom("ReturnInnerGrid", "Target", New With {.StandardId = "#=StandardId#"}) _
       .Selected(True)
       ) _
       .ToClientTemplate()

[Alex Hajigeorgieva]

Hello, Dan,

Thank you for the provided code snippets.

I have tested the VB.NET grid with hierarchy and it renders without issues.

I used this syntax in the template:

<script id="template" type="text/kendo-tmpl">

    @(Html.Kendo().Grid(Of Detail)() _
                .Name("grid#=OrderID#") _
                .Columns(Sub(c)
                             c.Bound(Function(p) p.TargetName)
                             c.Bound(Function(p) p.TargetValue)
                         End Sub) _
                        .DataSource(Sub(dataSource)
                                        dataSource _
                                    .Ajax() _
                                    .PageSize(20) _
                                    .Read(Function(read) read.Action("Details_Read", "Grid", New With {.OrderID = "#=OrderID#"}))
                                    End Sub).ToClientTemplate())

</script>

I am attaching a project for your reference that you can run locally. Just add the Kendo.Mvc.dll reference to it and let me know in case of further questions.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Dan]

Alex,

Your example works perfectly. Thank you for the response and sample code.

[Dan]

Alex,

What is the syntax to fit this grid inside a tab .Content() ?

@( ) wrapped around the grid causes a syntax error

[Nikolay]

Hello Dan,

My name is Nikolay and I will get hold of this thread until my colleague Alex returns to the office.

I am happy to hear Alex's reply helped you move forward with the project.

The TabStrip VB syntax can be found in the following documentation article:

• https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/vb#grid

VB is equivalent to C# so the code can be translated from one to the other. There are different online tools you can try that provide such translation.

• https://converter.telerik.com/

Let me know if you have additional queries. 

Regards,
Nikolay
Progress Telerik

[Dan]

Nikolay,

Thank you for response. The converter you shared errors when I try to translate to VB. Here is where I am at.

Basically, I want exactly the rendered result as the grid on the following link where you have a parent grid, a child tab, and 2 tabs that hold another grid in tab1 and some extra details in tab2. Here is that example: https://demos.telerik.com/aspnet-mvc/grid/detailtemplate

This is currently what my VB code looks like in my template. This DOES render the grid, but the tab strip is nowhere to be seen, even in rendered html in developer tools. As you can see I have my tab strip declared, and add 2 items to the tab strip, 1) "Targets" which is a grid, and 2) "ChangeLog" which is just some text for right now. Again, this renders ONLY the grid.

<script id="template" type="text/kendo-tmpl">

    @Code
        Html.Kendo().TabStrip() _
            .Name("TabStrip1") _
            .Items(Function(f)
            f.Add().Text("Targets").Selected(True).Content(Sub()@<text>

                            @(Html.Kendo().Grid(Of Target)() _
                                                                    .Name("grid#=StandardId#") _
                                                                    .Columns(Sub(c)
                                                                                 c.Bound(Function(p) p.TargetName)
                                                                                 c.Bound(Function(p) p.TargetValue)
                                                                                 c.Command(Function(x) x.Edit())
                                                                             End Sub) _
                                                                    .Pageable() _
                                                                            .DataSource(Sub(dataSource)
                                                                                            dataSource _
                                                                                        .Ajax() _
                                                                                        .PageSize(10) _
                                                                                        .Model(Sub(m)
                                                                                                   m.Id(Function(i) i.StandardId)
                                                                                                   m.Field(Function(i) i.TargetName).Editable(False)
                                                                                                   m.Field(Function(i) i.TargetValue).Editable(True)
                                                                                               End Sub) _
                                                                                            .Update(Function(update) update.Action("TargetHeirarchy_Update", "Target")) _
                                                                                            .Read(Function(read) read.Action("TargetHeirarchy_Read", "Target", New With {.StandardId = "#=StandardId#", .Type = "#=Type#"}))
                                                                                        End Sub).ToClientTemplate())

                        </text>
                                                           End Sub)
                       f.Add().Text("Change Log").Content("Second Tab stuff here")

                   End Function
        ) _
        .ToClientTemplate()
        End Code
</script>

Any help is appreciated.

[Dan]

Sorry about formatting here is a better version.

<script id="template" type="text/kendo-tmpl">

    @Code
        Html.Kendo().TabStrip() _
            .Name("TabStrip1") _
            .Items(Function(f)
            f.Add().Text("Targets").Selected(True).Content(Sub()@<text>

            @(Html.Kendo().Grid(Of Target)() _
            .Name("grid#=StandardId#") _
            .Columns(Sub(c)
                         c.Bound(Function(p) p.TargetName)
                         c.Bound(Function(p) p.TargetValue)
                         c.Command(Function(x) x.Edit())
                     End Sub) _
            .Pageable() _
            .DataSource(Sub(dataSource)
                dataSource _
            .Ajax() _
            .PageSize(10) _
            .Model(Sub(m)
               m.Id(Function(i) i.StandardId)
               m.Field(Function(i) i.TargetName).Editable(False)
               m.Field(Function(i) i.TargetValue).Editable(True)
            End Sub) _
            .Update(Function(update) update.Action("TargetHeirarchy_Update", "Target")) _
            .Read(Function(read) read.Action("TargetHeirarchy_Read", "Target", New With {.StandardId = "#=StandardId#", .Type = "#=Type#"}))
            End Sub).ToClientTemplate())

            </text>
           End Sub)
              f.Add().Text("Change Log").Content("Second Tab stuff here")

                   End Function
        ) _
        .ToClientTemplate()
        End Code
</script>

[Nikolay]

Hi Dan,

Thank you for getting back to me.

I took the time and tried to enhance the project provided by Alex including the TabStrip, however, this seems to be more VB specific and requires further investigation. Thus, I will need a bit more time to further investigate and see what we can do.

Please expect a follow up as soon as I have more information on the case.

Regards,
Nikolay
Progress Telerik

[Dan]

Nikolay,

If it is not possible using Kendo's tab widget, is it possible to use something like bootstraps tab classes to achieve this? How do I include raw html into the template? Not sure how this would work with grid initialization though. I dont think swapping between these tags would trigger a read, unless I explicitly did that with JS.

I'm thinking some code like this. I messed around with it but it only renders the text, not the html tags.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
 <div id="grid1" class="tab-pane fade">
    <h3>Grid1</h3>
    <p>This is where grid one would go.</p>
  </div>
  <div id="grid2" class="tab-pane fade">
    <h3>Grid 2</h3>
    <p>This is where grid two would go.</p>
  </div>
</div>

[Nikolay]

Hello Dan,

For your convenience, I am disclosing a sample VB.NET project demonstrating how the TabStrip can be implemented in the Detail Grid.

.ClientDetailTemplateId("template") _ // main Grid
...
<script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip() _
                           .Name("TabStrip#=OrderID#") _
                           .Items(Function(tabstrip) _
                                        tabstrip.Add().Text("Tab text")) _
                           .Items(Function(tabstrip) _
                                tabstrip.Add().Text("Tab text").Content(Html.Kendo().Grid(Of Detail)() _
                                .Name("grid#=OrderID#") _
                                .Columns(Sub(c)
                                             c.Bound(Function(p) p.TargetName)
                                             c.Bound(Function(p) p.TargetValue)
                                         End Sub) _
                               .DataSource(Sub(dataSource)
                                               dataSource _
                                           .Ajax() _
                                           .PageSize(20) _
                                           .Read(Function(read) read.Action("Details_Read", "Grid", New With {.OrderID = "#=OrderID#"}))
                                           End Sub).ToClientTemplate().ToHtmlString()) _
                                                               .Selected(True)
                  ).ToClientTemplate())
    </script>

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Dan]

Nikolay,

That is it! Looks like the ToHtmlString() was something I hadnt thought to try after calling ToClientTemplate()

I have tested in my project and it works as intended. Thank you so much!

[Nikolay]

Hello Dan,

You are most welcome. I am glad this has been resolved and I hope this forum thread will help others facing the same scenario.

Please do contact us back if anything new arises.

Regards,
Nikolay
Progress Telerik