[Solved] Problem updating grid datasource

[Best Doctors]

Hi, I have a filter on the left side of my web and a grid with the result on the left side. By default that grid is empty, but when I submit the filter form the result should be shown in this grid. I am using kendo spa and mvvm so my observable (model) is something like this:

var vm = kendo.observable({
     getAgentOnlyFound: function(){....},
});

where getAgentOnlyFound get the data in json format from the server, so... 

var dataSourceOnlyFound = new kendo.data.DataSource({
                    transport: {
                        read: function(options) {
                            options.success(vm.getAgentOnlyFound());
                        },
                    },
                    schema: {
                        parse: function (data) {

                            $.each(data, function (i, val) {
                                val.EffectiveDate = kendo.toString(new Date(parseInt(val.EffectiveDate.substr(6))), "MMM/dd/yyyy");
                            });

                            return data;
                        },
                        model: {
                            id: "Id"
                        }
                    }
                });

$("#agent-list-grid").data("kendoGrid").setDataSource(dataSourceOnlyFound);


and my html:

<div id="agent-list-grid"
     data-role="grid"
     data-editable="false"
     data-columns="[
        { 'field': 'FullName', title: 'Agent Name', 'width': 270 },
        { 'field': 'Country.Name', title: 'Country' },
        { 'field': 'EffectiveDate', title: 'Effective Date' }]"
     data-bind="visible: isListView">

the real example is pretty much large but I just put here the important part. My problem is: this example works in random way. Sometime it works and sometime doesn't and I do not receive any javascript errors from my browser.

Any idea ??

Thanks in advance...

[Nikolay Rusev]

Hello,

This line `options.success(vm.getAgentOnlyFound());` will not work in case `getAgentOnlyFound` function doesn't return the result right away. 

You say that `where getAgentOnlyFound get the data in json format from the server` which means that it will perform remote request to retrieve data. However returning this data will happen long after this method has been executed.

Regards,
Nikolay Rusev
Telerik

 

 

[Best Doctors]

Hi, thanks for the response. I tried it in other way but I am still getting the same problem. Here is the code:

var vm = kendo.observable({
    formSerialized: "",
    gridOnlyFoundDS: new kendo.data.DataSource({
        serverFiltering: true,
        transport: {
            read: {
                url: "/Agent/SearchAgents",
                type: "POST",
                data: "",
                dataType: "json"
            },
            parameterMap: function(data, op) {
                return vm.get("formSerialized");
            }
        },
        schema: {
            data: "list",
            model: {
                id: "Id"
            }
        }
    })
});


    $.subscribe('/formFilterAgent/change', function (e) {
        vm.set("formSerialized", $(e).serialize());

        vm.gridOnlyFoundDS.read();
    });

My html:

<div id="agent-list-grid"
     data-role="grid"
     data-auto-bind="false"
     data-scrollable="false"
     data-editable="false"
     data-pageable="true"
     data-pagesize="5"
     data-columns="[
        { field: 'FullName', title: 'Agent Name' },
        { field: 'IssuerName', title: 'Issuer'}
     ]"
     data-bind="visible: isListView, source: gridOnlyFoundDS">

</div>

Using this way the 50% of the time it works but the other does not works. The data is being received by the datasource successfully because I put console.log(...) in several parts of the code, but the data is not being shown.

Also, when it works the pagination not refresh ( still saying "No items to show" although there is data in the grid ).

I remember you I am using kendo spa, just in case... If you don't know what is the problem then please propose me how can I update a grid with a form sumit using kendo spa.

Thanks in advanced..

[Best Doctors]

Hi guys,
I found the source of the problem. I was including the files kendo.router.min, kendo.view.min, kendo.fx.min and kendo.web.min, and I changed it for kendo.all.min, and all the problem disappear. All works perfect, I don't know why but it works.

But on the other side, I am still having the issue with the pagination. When the datasource refresh, it does not refresh the footer (still saying "No items to display") and the pager doesn't works at all. Also, I need to know how to configure all parameters using declarative way (using data attributes) for mvvm purpose.

Thanks!

[Nikolay Rusev]

Hello,

The first issue seems to be caused due to incorrect order of scripts. Inclusion of kendo.all.min.js resolves this as it combines all scripts in single file based on widget dependencies.

Regarding the paging issue - you will have to return the total item count from server and configure schema.total /similar to schema.data / of the DataSource. This way the data source will know the total item count and the pager will be formed correctly.

I'm not sure what you mean by this part: " Also, I need to know how to configure all parameters using declarative way (using data attributes) for mvvm purpose.". Can you please explain?

Regards,
Nikolay Rusev
Telerik