This is a migrated thread and some comments may be shown as answers.

ListView does not render MVVM grid in template

3 Answers 68 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Luca
Top achievements
Rank 1
Luca asked on 13 Sep 2016, 12:36 PM

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");

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Sep 2016, 06:49 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Luca
Top achievements
Rank 1
answered on 15 Sep 2016, 09:28 PM

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

0
Stefan
Telerik team
answered on 19 Sep 2016, 07:36 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
ListView
Asked by
Luca
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Luca
Top achievements
Rank 1
Share this question
or