How to show/hide ClientDetailTemplateId on cell change in Grid?

[Vivek]

I have enabled conditional ClientDetailTemplateId in Kendo MVC Grid, It's working as expected.

 

But I also want to enable/disable the row on cell value change in the grid. So If ID is X then should not be expandable, but if it's other than X then it should be expandable (show the expandable mark on the first cell, and on click of it it should show the child div).

I have tried this, But it is not working.

 

<script id="templateSubRow" type="text/kendo-tmpl">
    # if (ID == 'X') { #

    <div>Child Div</div>

    # } #
</script>

@(Html.Kendo().Grid<MyModel>()
.Name("mygrid")

.Columns(columns =>
{
    columns.Bound(config => config.ID).Width(90).Title("ID").HeaderHtmlAttributes(new { @class = "grid-headercustom" })
        .HtmlAttributes(new { @class = "grid-rowcustom" }).Filterable(ftb => ftb.Enabled(true));
})
.HtmlAttributes(new { style = "height:100%" })
.NoRecords("No Data Available")
.Editable(e => e.Mode(GridEditMode.InCell))
.Scrollable()
.Sortable()
.Navigatable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(e => e.Change("onChange"))
.Read(read => read.Action("MyActionMethod", "MyController"))
.PageSize(150)
.Model(model => { model.Id(p => p.ID);
    model.Field(p => p.ID).Editable(true);
}))
.ClientDetailTemplateId("templateSubRow")
.Events(x => x.DataBound("dataBound"))

)
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.ID === 'X') {
            row.find('.k-hierarchy-cell a').css({ opacity: 0.0, cursor: 'default' }).click(function (e) { e.stopImmediatePropagation(); return false; });
        }
    });
}

function onChange(e) {
    if (e.action == "itemchange") {
        var items = e.items;
        var grid = $('#mygrid').data('kendoGrid');
        for (var i = 0; i < items.length; i++) {
            var dataItem = items[i];
            if (e.field == 'ID') {
                var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
                if (dataItem.ID === 'X') {
                    $(rowCells[0]).addClass('kendo-cell-highlighter');
                    $(rowCells[0]).click(function (e) { e.stopImmediatePropagation(); return false; });
                }
                else {
                    $(rowCells[0]).removeClass('kendo-cell-highlighter');
                    $(rowCells[0]).click(function (e) { return true; });
                }
            }
        }
    }
}

<style>
    .kendo-cell-highlighter {
        opacity: 0.0;
        cursor: default
    }
</style>

[Milena]

Hello,

Thank you for reaching out to us. We have arranged for a Product Specialist to get in touch with you. Please expect to hear from us soon.

Thank you!

Regards, Milena Progress Telerik