testing a value in client templates with mvc

[Shane]

I have a grid configured for ajax in kendo ui for mvc using the razor view engine. To be brief, the master grid datasource is an object of type ParentWidget which has a list of ChildWidgets. ChildWidget objects also have a list of ChildWidgets. These are displayed as detail rows via another grid configured in a kendo template. This template has detail rows that reference itself. This works fairly well (0...n detail row depth).

However, if a ChildWidget detail row has no children, I want to display some data contained therein as a link. The ChildWidget contains a boolean value of HasChildren which can be used to determine this. How to I test this value using ClientTemplate()?

The problem I have is that ParentWidget and ChildWidget have an ID field. In the template grid for the detail rows, "#=ID# actually refers to the parent row ID, not the ID of the *Widget that is being bound. I hope this makes sense. The code is below:

public class ParentWidget
{
    public int ID { get; set; }
    public int Name { get; set; }
    //... other properties
    public List<ChildWidget> ChildWidgets
}

public class ChildWidget : ParentWidget
{
    public int Parent_ID { get; set; }
    //... other properties
}

<div class="float-left" style="width:100%; margin-top:4px;">

@(Html.Kendo().Grid(Model.ParentWidgets).Name("grid")

    .Columns(columns =>

    {

        columns.Bound(p => p.ID).Width(48).Title("Parent ID");

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

    })

    .ClientDetailTemplateId("subrow")

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("HierarchyBinding_Widgets", "Widget", new { parentId = "#=ID#", someParameter = Model.SomeParameter }))

     )

     .Events(events=>events.DataBound("dataBound"))

     .ToClientTemplate()

    )

</div>

 

 

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

    @(Html.Kendo().Grid<WebUI.Models.Widget>().Name("grid_#=ID#")// <--parent row ID, thus #=HasChildren# would actually be for the parent?

    .Columns(columns =>

    {

        columns.Bound(p => p.Parent_ID).Width(48).Title("Parent ID");

        columns.Bound(p => p.ID).Width(48).Title("ID");

        columns.Bound(p => p.Name).ClientTemplate("what goes here?"); //Name should be a link if *this* Widget.HasChildren is false

    })

    .ClientDetailTemplateId("subrow")

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("HierarchyBinding_Widgets", "Widget", new { parentId = "#=ID#", someParameter = (Int32.Parse(Model.SomeParameter)) }))

     )

     .Events(events=>events.DataBound("dataBound"))

     .ToClientTemplate()

    )

</script>

[Shane]

I managed to deal with this in my dataBound event. I also solved another issue I had with graying-out the detail arrow if no children existed:

function dataBound() {
    var dataSource = this.dataSource;
    this.element.find('tr.k-master-row').each(function () {
        var row = $(this);
        var data = dataSource.getByUid(row.data('uid'));
        if (!data.get('HasChildren')) {
            var url = '@Html.ActionLink("__name__", "Index", "Widget", new { widgetId = "__widgetId__" }, null)';
            var widgetId = data.get('ID');
            var widgetName = data.get('Name');
            var finalUrl = url.replace('__name__', widgetName).replace('__widgetId__', widgetId);

            //grays-out hierarchy expansion arrow
            row.find('.k-hierarchy-cell a').css({ opacity: 0.3, cursor: 'default' }).click(function (e) { e.stopImmediatePropagation(); return false; });

            row.find('.gridCommandName').html(finalUrl);
        }
    });
 }