ListView does not render MVVM grid in template

[Luca]

Hi, I'm trying to show a grid inside a ListView. In order to do that I added a MVVM div data-role="grid" in the ListView template.

When the ListView is bound, everything is displayed correctly except the grid ( not rendered ). If I copy the same MVVM div inside the editTemplate, and click Edit at runtime, the grid is displayed in the editTemplate. Here and example of the code: ( as you can see both Template and EditTemplate have the same grid, but it's only displayed on EDITING mode )

<script type="text/x-kendo-tmpl" id="level-template">
        <div class="hierarchy-view k-widget">
            <dl>
                <dt>Event</dt>
                <dd>#: Description #</dd>
                <dt>Escalation Time Seconds</dt>
                <dd>#: EscalationTimeSeconds #</dd>
                <dt>Subscriber</dt>
            </dl>
         <div data-role="grid" data-columns='["Subscriber.Name", "Subscriber.Description"]' data-bind="source: Subscriptions"></div>
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="level-editTemplate">
        <div class="hierarchy-view k-widget">
            <dl>
                <dt>Description</dt>
                <dd>
                    <input type="text" class="k-textbox" data-bind="value:Description" name="EscalationHierarchyDescription" required="required" validationMessage="required" />
                    <span data-for="EscalationHierarchyDescription" class="k-invalid-msg"></span>
                </dd>
                <dt>Escalation Time Seconds</dt>
                <dd>
                    <input type="text" data-bind="value:EscalationTimeSeconds" data-role="numerictextbox" data-type="number" name="EscalationHierarchyEscalationTimeSeconds" required="required" min="30" validationMessage="required" />
                    <span data-for="EscalationHierarchyEscalationTimeSeconds" class="k-invalid-msg"></span>
                </dd>
                <dt>Subscriber</dt>            
            </dl>
        <div data-role="grid" data-columns='["Subscriber.Name", "Subscriber.Description"]' data-bind="source: Subscriptions"></div>
            <div class="edit-buttons">
                <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
            </div>
        </div>
    </script>

    var listLevel = $("#lvLevel").kendoListView({
        autoBind: false,
        dataSource: dsEscalationHierarchy,
        template: kendo.template($("#level-template").html()),
        editTemplate: kendo.template($("#level-editTemplate").html()),
        cancel: function(e) {
            dsEscalationHierarchy.read();
        },
        remove: function (e) {
            if (viewModel.EscalationHierarchy.length <= 1) {
                e.preventDefault();
                alert("At least one item is required");
            }
        }
    }).data("kendoListView");

[Stefan]

Hello Luca,

The different result in the edit mode occurs because when the editTemplate is used, it is calling the kendo.bind method internally, which is required for the Grid initialization. You can call kendo.bind manually for every row, but we do not recommend it, as it can cause unexpected behaviour. 

Please check the following example demonstrating how to initialize the Kendo UI Grid, using the jQuery approach on the dataBound event of the ListView:

http://dojo.telerik.com/ekIgA

I hope this will help you to achieve the desired result.

Regards,
Stefan
Telerik by Progress

 

 

[Luca]

Hi Stefan, thank you for the answer. I will keep that in mind.

I actually changed the approach for this page,instead of building the components thru Javascript I decided to create a model and use MVVM, and I'm not having that issue anymore.

I'm having a different problem this time though, but I can't figure out the root cause.

I still have this ListView with a template and an editTemplate. The template contains a Grid with a detailGrid inside. When I click on edit, the editTemplate displays the Grid ( editable now ) but when I try to expand one item to see and modify the details the event "detailInit" this time throws an error ( Object Expected ). I did a quick test, I made a simple DropDown and I added the event "change", when I changed the value, I got the same Object Expected error. It looks like it's trying to find the function in the DropDown/Grid source, instead of looking at the model bound.

I made a quick example here:

http://dojo.telerik.com/@lsemeraro/anOGi

[Stefan]

Hello Luca,

Thank you for the provided example.

After inspecting it, I found 3 possible issues with this implementation.

1) The mentioned error occurs because when the ListView is in edit mode the view model is different from the root model, and the event handler for the onEditDetailInit is not attached correctly. I can suggest manually binding the onEditDetailInit event on the edit event of the ListView:

http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-binding-after-initialization

http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#events-edit

2) The schema.model.fields properties cannot be nested, as this can lead to unexpected issues:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model

3) The Grids cannot have duplicate IDs:

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

Additionally, I can suggest checking our demos for Grid with detail Grid:

http://demos.telerik.com/kendo-ui/grid/angular

http://demos.telerik.com/kendo-ui/grid/detailtemplate

Regards,
Stefan
Telerik by Progress