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

Binding listview mobile

1 Answer 92 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Roel
Top achievements
Rank 1
Iron
Veteran
Roel asked on 11 Feb 2021, 08:33 AM

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

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 12 Feb 2021, 02:44 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListView (Mobile)
Asked by
Roel
Top achievements
Rank 1
Iron
Veteran
Answers by
Aleksandar
Telerik team
Share this question
or