Binding listview mobile

[Roel]

Hello support,

We are looking for documentation about this demo:

https://demos.telerik.com/kendo-ui/m/index?&_ga=2.87831967.627147470.1612949974-420973595.1604377799#mobile-listview/hierarchical-databinding

And more specific about how to use: hierarchical-listview.

Please let us know if any questions.

Kind regards,

Roel Alblas

[Aleksandar]

Hello Roel,

The example in question demonstrates how to bind the mobile LsitView to HierarchicalDataSource. In general, details about data binding for the mobile ListView are available here:

https://docs.telerik.com/kendo-ui/controls/hybrid/listview/overview#data-binding

I suggest also referring to the mobile View documentation https://docs.telerik.com/kendo-ui/controls/hybrid/view/view as the example for the ListView demonstrates how to customize the template and display as ListView the items for the current level:

<div data-role="view" data-show="rebindListView" id="hierarchical-view" data-transition="slide" data-title="Employees">
      <header data-role="header">
        <div data-role="navbar" id="employee-navbar">
          <a data-role="backbutton" id="employee-back" data-align="left">Back</a>
          <span data-role="view-title"></span>
          <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
          <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
        </div>
      </header>
      <ul id="hierarchical-listview" data-role="listview" data-template="hierarchicalMobileListViewTemplate"></ul>
    </div>

<script id="hierarchicalMobileListViewTemplate" type="text/x-kendo-template">
    # if (data.HasEmployees) { #
        <a href="\#hierarchical-view?parent=#: data.id #" class="parent">
            <img class="km-thumbnail" src="../content/web/Employees/#: id #.jpg" />
            <h2> #: FullName # </h2>
      </a>
    # } else { #
        <img class="km-thumbnail" src="../content/web/Employees/#: id #.jpg" />
        <h2> #: FullName # </h2>
    # } #
    </script>

Navigational widgets can pass additional URL parameters when navigating to Views. The parameters are accessible in the view show event handlers - in the example, the rebindListView function sets the dataSource for the mobile ListView to the items for the current level:

    function rebindListView(e) {
        var parentID = e.view.params.parent,
            element = e.view.element,
            backButton = element.find('#employee-back'),
            scButton = element.find('[data-icon="source-code"]');
            listView = element.find("#hierarchical-listview").data('kendoMobileListView'),
            navBar = element.find('#employee-navbar').data('kendoMobileNavBar');

        if (parentID) {
            employees.fetch(function() {
                var item = employees.get(parentID);
                if (item) {
                    backButton.show();
                    navBar.title(item.FullName);
                    listView.setDataSource(item.children);
                } else {
                    // redirect to root
                    setTimeout(function() {
                        kendo.mobile.application.navigate('#hierarchical-view');
                    }, 0);
                }
            });
            scButton.hide();
        } else {
            backButton.hide();
            scButton.show();
            navBar.title('Employees');
            listView.setDataSource(employees);
        }

        e.view.scroller.scrollTo(0, 0);
    }

Click on the View Source Code button in the top right corner to review the details behind the example

If it is easier for you, you can review the complete example in this dojo as well.

Regards,
Aleksandar
Progress Telerik