e.dataItem is null

2 posts, 0 answers
  1. Robby Parker
    Robby Parker avatar
    18 posts
    Member since:
    Jul 2012

    Posted 01 Sep 2015 Link to this post

    I start with a listview that contains all states with a click event on each to build event headers by state (below). Once a state is selected, ​I fetch event headers and build another listview using this function. Once an event header is selected, I populate a detail page. When loading fresh and selecting a state (Arkansas), the listview is populated and selecting an event populates the detail screen as expected. Hitting the "back" button (data-role=backbutton), selecting another state, then an event for that state throws e.dataItem undefined in the click ​method of the function below. If I go back again, select another state, then sometimes it works, sometimes it doesn't. What am I doing wrong here?

    function BuildEventHeadersListByState(abbr)
    {   
        app.showLoading();
     
        var stateAbbr = abbr;
        var xml;
        var template = kendo.template($("#ulEventHeaders-template").html());
         
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function(options){
                $.ajax( {
                    type: "GET",
                    url: "http://xxx.xxxxx.xxx/DuMobileService/GetEventHeadersByState",
                    data: { "apikey": apiKey, "stateAbbreviation": stateAbbr},
                    dataType: "text",
                        success: function(result) {
                            options.success(result);
                            app.view().header.find(".km-navbar").data("kendoMobileNavBar").title(abbr + " Events");
                            app.hideLoading();
                        }
                    });
                }
            },
            schema: {
                type: "xml",
                data: "/ArrayOfEventHeader/EventHeader",
                model: {
                    // configure the fields of the object
                    fields: {
                        EventCity: "EventCity/text()",
                        EventDate: "EventDate/text()",
                        EventID: "EventID/text()",
                        EventTitle: "EventTitle/text()",
                    }
                }
            }
        });
         
        $("#ulEventHeaders").kendoMobileListView({
            dataSource: dataSource,
            template: $("#ulEventHeaders-template").text(),
            dataBound: function(){
                this.scroller().reset(); //scroll to top
            },
            click: function(e){
                var eventID = e.dataItem.EventID;
                BuildEventDetailsByEventID(eventID);
            }
        });
    }

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 04 Sep 2015 Link to this post

    Hello Robby Parker,

     

    First of all apologies for the delayed reply.

     

    I have tried to reproduce the issue but to no avail. Would it be possible to provide a runnable sample that we can look at and advise your further? You can use Kendo UI Dojo for this.

     

    Regards,
    Kiril Nikolov
    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
Back to Top