JS error on "server-bound" grid

[D.]

Hey,

I've been using your MVC wrappers for some time and I absolutely love them!
I just migrated a project on which I was using the Telerik Extensions for ASP.NET MVC to use Kendo UI. There have been some problems, but in the end it works like a charm.

I'm just faced with an issue I can't resolve...
On a "Details" page, I have a static, server-bound grid with a column which has a specific EditorTemplate, itself using a Kendo DropDownList.

All my controls use the deferred JS output to keep all the JS clean and at the bottom of the page.
My issue is that the initalization script of the DropDownList is outputted right after the <input> and not at the bottom of the page where I call the DeferredScripts() function.

Let me show you some code that may clear up what I'm trying to explain.

My Models:

public class MyParentViewModel
{
    public IEnumerable<MyChildViewModel> Children
    {
        get;
        set;
    }
}

public class MyChildViewModel
{
    public String DummyString
    {
        get;
        set;
    }

    public Boolean? DummyBoolean
    {
        get;
        set;
    }
}

My view:

@model MyParentViewModel

@(
    Html.Kendo().Grid(Model.Children)
        .Name("Children")
        .Deferred()
        .Columns(c =>
        {
            c.Bound(x => x.DummyString);
            c.Bound(x => x.DummyBoolean);
        });
)

The EditorTemplate associated to the DummyBoolean property:

@model Boolean

@(
    Html.Kendo().DropDownListFor(x => x)
        .Deferred()
        .Items(items =>
        {
            items.Add().Selected(value == false).Text("Non").Value(Boolean.FalseString);
            items.Add().Selected(value == true).Text("Oui").Value(Boolean.TrueString);
        })
        .HtmlAttributes(new { style = "width:100px; line-height:normal;" })
)

And that's the outputted HTML:

<div class="k-widget k-grid k-secondary" id="Groupements" data-role="grid">
    <table role="grid">
        <colgroup>
            <col style="width:20%">
            <col>
        </colgroup>
        <thead class="k-grid-header">
            <tr>
                <th class="k-header" data-field="DummyString" data-title="DummyString" scope="col">
                    <span class="k-link">DummyString</span>
                </th>
                <th class="k-header" data-field="DummyBoolean" data-title="DummyBoolean" scope="col">
                    <span class="k-link">DummyBoolean</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Groupement #1</td>
                <td>
                    <input disabled="disabled" id="DummyBoolean" name="DummyBoolean" style="width:100px; line-height:normal;" type="text" value="True">
                    <script>
                        jQuery(function () { jQuery("#DummyBoolean").kendoDropDownList({ "dataSource": [{ "Text": "Non", "Value": "False", "Selected": false }, { "Text": "Oui", "Value": "True", "Selected": true }], "dataTextField": "Text", "dataValueField": "Value" }); });
                    </script>
                </td>
            </tr>
            <tr class="k-alt">
                <td>Groupement #2</td>
                <td>
                    <input disabled="disabled" id="DummyBoolean" name="DummyBoolean" style="width:100px; line-height:normal;" type="text" value="True">
                    <script>
                        jQuery(function () { jQuery("#DummyBoolean").kendoDropDownList({ "dataSource": [{ "Text": "Non", "Value": "False", "Selected": false }, { "Text": "Oui", "Value": "True", "Selected": true }], "dataTextField": "Text", "dataValueField": "Value" }); });
                    </script>
                </td>
            </tr>
        </tbody>
    </table>
</div>

As you can see, we only have here the DropDownLists' initialization scripts.
The table's is at the bottom of the page where I expect it to be.

Is there anything I'm missing?
Thanks in advance.
Sincerely,
Mickaël Derriey

[Alexander Popov]

Hi Mickaël,

Basically the templates are used to render some text that is later inserted into the right places. Since these DropDownList initialization scripts are generated by the Editor template, they are also inserted into the cells, thus cannot be moved to the end of the page. 

Regards,
Alexander Popov
Telerik

[D.]

Hey Alexander,

Thanks for your reply.
I understand that since the EditorTemplate works on the server side, it won't be possible to achieve what I want.

In this case, it's not a problem, I can find another way, like not using a DropDownList.
But I'd like to understand what would be the possibilities to achieve this.

If I understand well, I won't be able to use the server binding as this would induce the grid to render the EditorTemplate, thus the intiialization scripts.
Would it be possible to expose my data as JS in the view, then bind the grid with this data using a row template which would itself use a DropDownList?

Correct me if I'm wrong :-)
Thanks,
Mickaël Derriey

[D.]

Silly me!

I was wrong all the way, the Grid uses the DisplayTemplate to render my "DummyBoolean" property.
Guess what, I didn't have the .Deferred() in the DisplayTemplate, which was causing the initialization scripts to be rendered right after the HTML.

That was a miss in the migration from Telerik Extensions for ASP.NET MVC to Kendo UI.
It all works as expected now.

Sorry for bothering...
Thanks anyway,
Mickaël Derriey

[Alexander Popov]

I am glad that the issue you were facing is now resolved. Please do not hesitate to contact us if you have any additional questions.

Regards,
Alexander Popov
Telerik