Question

I know there is a question about conditional DetailView, I however feel that’s not what I’m looking for. I’ve been messing around with the Telerik Grid for MVC, and I’ve managed to create a DetailView for my rows in my grid. The thing is as of now, my DetailView is filled with HTML-code, and I want to have a new model inside.

Based on one columns value, I want to create a DetailView only for rows matching that columns value. So, for instance, if Column “Type” equals Fruit, it shall create a DetailView for it (with the “+” sign). Now if “Type” is Vegetable, it should not create the DetailView (without the “+” sign).

My current code looks like this:

Html.Telerik().Grid<SearchViewModel>(Model)
        .Name("Search")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Type).Width(60);
                        //etc.
                    })
        //.PrefixUrlParameters(false)
        .DetailView(detailView => detailView.ClientTemplate(
            "<div>" +
            "<h5><span>Details for Type:</span></h5><div><#= DetailsType #></div>" +
            "</div>"
        ))

As you can see, I’m create the DetailView for every row in my grid.

Also, I’ve found a JavaScript that hides the plussign for certain conditions, it however doesn’t work on initial load (only after I’ve made a filtering, paging or refresh request).The Script is bound with the .OnRowDataBound.

function hidePlusSign(e) {
    var row = e.row;
    var dataItem = e.dataItem;

    if (dataItem.Type != "Fruit") {
        $('a.t-icon', e.row.cells).css('display', 'none');

    }

Answer 1

What you need to do just add condition in your detail view, its look like this:

"<# if (DetailsType == 'MyType') { #>" +    
    "<div>some html code here</div>" +
"<# } else { #>" +
    "<div>another html code here</div>" +
"<# } #>" +