MVC dropdownlist inside grid

[Cosmin]

Hello,

I would like to insert a dropdownlist inside a grid column(not using edit mode) by converting the widget to a client side template. The template works and outputs a simple input, but the script that initializes the dropdown is not ran. 

I am obtaining the client side template using this:

var ruleSetDropDown = Html.Kendo().DropDownList()
                .Name("RuleSets_#=Id#")
                .BindTo(Model.RuleSets)
                .DataTextField("Name")
                .DataValueField("Id")
                .ToHtmlString();

And then apply it to the AJAX bound grid like this:

column.Template(t => t)
             .ClientTemplate(ruleSetDropDown.ToString())
             .Title("")

If i try to render it inside the toolbar(with a different name of course) it works fine:

.ToolBar(t =>
           {
                t.Template(ruleSetDropDown);
            })

But the same technique seems not to be working with row templates.
How can i achieve this?

[Dimiter Madjarov]

Hi Cosmin,


The reason for the issue is that the MVC Wrapper syntax generates a script block, which executes on document ready, but the Grid rows are initialized afterwards i.e. when the data is read.This is why only the input elements are shown, but the widget initialization code is not executed. A sample solution would be to bind to the dataBound event and execute all scripts inside the Grid rows.
E.g.

function dataBound(e) {
    this.tbody.find("script").each(function () {
        eval($(this).text());
    });
}

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Dimiter Madjarov]

Hi Cosmin,


I missed one details regarding the current implementation. You should also use the .ToClientTemplate() method when configuring the widget.
E.g.

var ruleSetDropDown = Html.Kendo().DropDownList()
   ...
   .ToClientTemplate()
   .ToHtmlString();

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik