localStorage doesn't refresh the grid

Question

I can't solve this problem.

Here is my code

var selectedID = "";
    var selectedIDPremise = "";
    var PremisesGrid = "";
    var PremisesGrid2 = "";
    var selectedIDPremise2 = "";
    //var selectedOD2 = "";
    var nova = "";

    $(document).ready(function () {



        $("#routes").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: {
                type: "application/jsonp",
                transport: {
                    read: {
                        url: "http://" + servername + "/uBillingServices/Administration/Administration.svc/getRoute",
                        dataType: "json",
                        data: {
                            ID: 0
                        }
                    }
                }
            },
            select: onSelect
        });

        //nova = PremisesGrid2.getKendoDropDownList().dataSource.transport.options.read.data.Route_ID;

        function onSelect(e) {

            //$.getJSON("http://" + servername + "/uBillingServices/Administration/Administration.svc/getRoute", { ID: nova }, function (json) { });
            window.localStorage.setItem("Nova", "");
            nova = this.dataItem(e.item.index());
            window.localStorage.setItem("Nova", nova.ID);
            PremisesGrid2.getKendoGrid().dataSource.read();
            //nova = PremisesGrid2.getKendoDropDownList().dataSource.transport.options.read.data.Route_ID;
            // var data = [{}];
            //PremisesGrid2.getKendoGrid().dataSource.data(data)
            for (var i = 0; i < 3000; i++) {
                if (i == 2999) {
                    PremisesGrid2.getKendoGrid().dataSource.read();
                }
            }

        }
            PremisesGrid2 = $("#assignedRoute").kendoGrid({
                //dataTextField: "Name",
                //dataValueField: "Id",
                dataSource: {
                    type: "application/jsonp",
                    transport: {
                        read:
                                {
                                    url: "http://" + servername + "/uBillingServices/Premise/Premise.svc/GetAllPremisesByRoute",
                                    dataType: "json",
                                    data: {
                                        Route_ID: window.localStorage.getItem("Nova"),
                                        UserName: userName,
                                        WorkStation: workStation

                                    }
                                }
                    },
                    schema: {
                        model: {
                            fields: {
                                ID: { type: "string" },
                                PostalCode: { type: "string" },
                                Latitude: { type: "string" },
                                Longitude: { type: "string" },
                                IsMember: { type: "string" }

                            }
                        }
                    }
                },
                change: function (arg) {

                    myIndex = this.select().index();
                    var PremisesRow = this.select();

                },
                dataBound: function (e) {

                    row = e.sender.tbody.find(">tr:not(.k-grouping-row)").eq(0);
                    if (row.length == 0) {
                        e.sender.select(e.sender.tbody.find(">tr:first"));
                    }
                    else {
                        e.sender.select(row);
                    }
                },
                selectable: true,
                scrollable: true,
                filterable: true,
                groupable: false,
                sortable: {
                    mode: "single",
                    allowUnsort: false
                },
                height: 330,

                columns: [
                    { field: "PostalCode", title: "Assigned Route" }
                    ]//, width: "100px"
            });

the localStorage is working fine(in resources it changes), but it doesn't refresh the grid when I select another Reon (form the DropDown list),and when I refresh the page it shows the last one I selected

Can anyone tell me what is the problem? Thanks

Answer 1

There is a couple of questions:

1. Confusion between ID and Id.
2. data definition in transport.read.data needs to be a function.

Regarding 1. In the DropDownList definition you say dataValueField: "Id" but in onSelect you use: window.localStorage.setItem("Nova", nova.ID);

Regarding 2. Change the definition of data from object to function. This way:

data    : function () {
    return {
        {
            Route_ID: window.localStorage.getItem("Nova"),
            UserName: userName,
            WorkStation: workStation
        }
    }
}