ListView does not render MVVM grid in template

4 posts, 0 answers
  1. Luca
    Luca avatar
    11 posts
    Member since:
    Jul 2012

    Posted 13 Sep Link to this post

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

  2. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 15 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Luca
    Luca avatar
    11 posts
    Member since:
    Jul 2012

    Posted 15 Sep in reply to Stefan Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 19 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready