how to show loading image while loading items in listview HTML helper

4 posts, 0 answers
  1. Kalpana
    Kalpana avatar
    2 posts
    Member since:
    Mar 2017

    Posted 15 Aug 2017 Link to this post

    I'm using HTML helper list view. I'm not getting loading image or loading message while loading the Items in the listview HTML helper. Also, how to display "No items to display" message when the listview is empty. Below is the code that I have

     
       <div class="col-sm-12 k-content wide">
            @(Html.Kendo().ListView<CNO.CA.MemberPortal.Web.UI.Viewmodels.DocumentManagementModel>(Model.document)
                .Name("DocumentslistView")
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(datasource => datasource
                .Read(read => read.Action("GetDocumentsByPersonId", "Profile"))
                .Model(m => m.Id("ID"))
                .ServerOperation(false)
                .PageSize(10))
                .Pageable()                    
                 )
    )
        </div>

  2. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 17 Aug 2017 Link to this post

    Hello Kalpana,

    The Kendo UI ListView has a loading indicator by default. This can be observed in our demo:

    http://demos.telerik.com/aspnet-mvc/listview/remote-data-binding

    Currently, the ListView does not support "No data" template.

    I can suggest submitting a feature request and based on its popularity we may implement it in a future release:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/170328-listview

    For now, I can suggest custom container where the message can be displayed if there is no data. This can be achieved using jQuery on the dataBound event. The same approach can be used for the MVC ListView as it uses a client side logic

    https://dojo.telerik.com/ABehE

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

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kalpana
    Kalpana avatar
    2 posts
    Member since:
    Mar 2017

    Posted 17 Aug 2017 in reply to Stefan Link to this post

     

     

    Hi Stefan, thanks for the reply ! I'm getting loading message when I refresh or rebind the list view. I'm not getting the loading image while loading list view for the first time.

    <%: Html.Kendo().ListView<ProductViewModel>()

    .Name("listView").TagName("div")

    .ClientTemplateId("template")

    .DataSource(dataSource => { dataSource.Read(read => read.Action("Products_Read", "ListView"));})

    .Events(e => e .DataBound("productListView_dataBound")

    .Change("productListView_change")) %>

    <script>

    function productListView_dataBound()

     {

    //handle databound event

    }

    </script>

     

    it throws error saying productListView_dataBound is undefined. What am I missing here?

  4. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 21 Aug 2017 Link to this post

    Hello Kalpana,

    Thank you for the provided code.

    Based on it can assume that there is an issue defining the name with an underscore. 

    When I tested it, I received the same error with that function name. When a changed it to a name with no underscore the function was called as expected.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top