Limit or bug in listview control?

7 posts, 0 answers
  1. Doug
    Doug avatar
    17 posts
    Member since:
    Aug 2015

    Posted 20 Sep 2015 Link to this post

    I have an app that has several listviews tied to remote data sources.  I have tied three buttons on the main form to each display a different listview and allow the user to select an item on the list, which is populated on the main form.  All three Listviews have the same code as listed below. They display the code for the selected item in a field on the form.  That doesn't seem to matter.  The code blow includes a section to check if there is no data item selected.  This is where the problem lies.

            $(document).ready(function () {
                $("#proclist").kendoListView({

                     change: function () {
                        var item = this.dataItem(".k-state-selected");
                        if (item === undefined) {
                            alert("nothing selected");
                            return;
                        }
                        window.encounterView.setProcCode(this.dataItem(".k-state-selected").code);

            }

    }

    When you select something on the listview the change code is fired.  The third time you open a different listview and click on an item, item is always returned as undefined.

    It doesn't matter what order you click on the buttons, it always fails on the third time.  Is this a bug or just a limitation of the simulation environment?

     Also 2 of these lists have almost 9000 items in them.  I've tried limiting them to 500 items  but that fails in the same way.  Is there a limitation I should be aware of?

     

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Sep 2015 Link to this post

    Hello Doug,

    this does not sound like a known issue. Please replicate it in a Dojo - we will examine it further and advise you from there.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Doug
    Doug avatar
    17 posts
    Member since:
    Aug 2015

    Posted 22 Sep 2015 in reply to Petyo Link to this post

    It's a bit too complicated to get it to run in just a dojo.  There are multiple pages, remote data sources, etc.  What I've done is build you a simplified working app that illustrates the problem.  It's called dojo app and it's in my project files.  When you are running it, click on the login button.  When the form displays, click on the search buttons and select an item from the form that shows up.  (This is where the error occurs).  Click on the select button at the bottom of the form.  Then click on the next search button.  When you click on an item in the list, the problem should occur.  It might be on the second or third search.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 24 Sep 2015 Link to this post

    Hello Doug,

     

    I ran the project in the icenium environment - it is not runnable anywhere else. I think that I followed the steps you have outlined, but could not reproduce any kind of error. Worth mentioning is that the approach you have taken (using desktop listview and initializing it in document.ready) is not recommended nor for that matter, supported in a mobile environment. I am not sure if the listviews are not instantiated multiple times.

     

    I would definitely suggest that you isolate your problem further as the project setup is quite complicated. Please try abstracting the remote datasources with local data and remove the unnecessary pages, for example. Further tips on isolating Kendo UI specific issues may be found in this blog post.

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Doug
    Doug avatar
    17 posts
    Member since:
    Aug 2015

    Posted 30 Sep 2015 in reply to Petyo Link to this post

    I've reworked the listview to use the mobile version properly and I've managed to get most of it working.  What I'm trying to do with the list view is to have a "favourite" icon which the user can click on and have it change between two different possible values.

     I've simplified this into a dojo and all I'm doing is changing the description when you click on an item, but I can't figure out how to get the listview to reflect the changes.

     I need some help/direction to make this work.  (Or tell me if there is another way to do this)

    Here is the dojo code:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>

      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.rtl.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.default.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.mobile.all.min.css">

      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://kendo.cdn.telerik.com/2015.2.902/js/angular.min.js"></script>
      <script src="http://kendo.cdn.telerik.com/2015.2.902/js/jszip.min.js"></script>
      <script src="http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script></head>
    <body>
    <script>
        mobileApp = new kendo.mobile.Application();
        procedureModel = new kendo.data.Model.define({
            id: "code",
            hasChildren: false,
            fields: {
                code: {
                    type: "string",
                    editable: false
                },
                description: {
                    type: "string",
                    editable: true
                },
                favourite: {
                    type: "boolean",
                    editable: true
                },
                index: {
                    type: "number",
                    editable: false
                }
            },
            icon: function () {
                if (this.get("favourite") == true) {
                    return "blue.jpg";
                } else {
                    return "grey.jpg";
                }
            }
        });

      procArray = [];

      for(i=0; i<= 100; i++) {
        procArray.push({code: "a" + i.toString(), description: "desc-" + i.toString(), favourite: false, index: i});
      }
      
    localProcs = new kendo.data.DataSource({
    data: procArray,
            schema: {
                model: procedureModel,
                total: function() {
                    return procArray.length;
                }
            }
    });
      function change(e) {
        console.log("change");
        procObs.flipFav(e);
      };
      procObs = new kendo.observable( {
            flipFav: function (e) {
                console.log("flipFav");
              var item = e.dataItem;
               if (item.get("favourite") == true) {
                    item.set("favourite", false);
                } else {
                    item.set("favourite", true);
                }
                item.set("description", e.dataItem.code);
      $("#proclist").data("kendoMobileListView").setDataItem($("#listview li").eq(item.index), item);        }
        });

      </script>
        <script id="procTemplate" type="text/x-kendo.template">
            <div>
                <div style="width:85%;float:left">(#:code#) #:description#
                </div>
            </div>
        </script>
      <div id="main" data-role="view" data-model="procObs" data-layout="default">
        <ul id="proclist" data-role="listview" data-source="localProcs" data-template="procTemplate"  data-virtual-view-size=150 data-endless-scroll="true" data-click="change">
        </ul>
      </div>
      </body>
    </html>​

     

  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Oct 2015 Link to this post

    Hello Doug,

     

    I would recommend doing something like this.

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Doug
    Doug avatar
    17 posts
    Member since:
    Aug 2015

    Posted 02 Oct 2015 in reply to Petyo Link to this post

    Thanks.  That helped a whole lot.  I've taken the simplified code and made it so that I can change an image in the list by clicking on it.  Dealing with changing an image was more complex but it's now working. 

     

Back to Top
Kendo UI is VS 2017 Ready