e.dataItem is null

[Robby Parker]

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);
        }
    });
}

[Kiril Nikolov]

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