Shared DataSource - each UI element seems to read?

[John]

I have a shared DataSouce that I wish to bind to multiple UI elements (dropdown and chart).

The DataSource has a change event so I can intercept the data.

What I observe is that EACH UI element seems to cause the DataSource to execute rather than the first one only.

Here is some code to illustrate :-

var metaDataSource

    ;

 

function createPieChart() {

    $("#pie").kendoChart({

        dataSource: metaDataSource,

        title: {

            text: "Total XDC Hits"

        },

        legend: {

            position: "bottom"

        },

        seriesDefaults: {

            type: "pie",

            labels: {

                visible: "true",

                template: "#= kendo.format('{0:P}', percentage)#"           

            }

        },

        series:

        [{

            field: "TotalHits",

            categoryField: "Name"

        }],

        chartArea: {

            height: 300,

            margin: 1

        },

        plotArea: {

            margin: 1

        }

    });

}

 

function createList() {

     $("#list").kendoDropDownList({

        index: 0,

        dataSource : metaDataSource,

        dataTextField: "Name",

        dataValueField: "ID",

        change: onSelectXDC

    });

}

 

function onSelectXDC() {

    var dl=$("#list").data("kendoDropDownList");

    var txt = dl.text();

    var val = dl.value();

    log(kendo.format("Select XDC :: {0} {1}", txt, val ));

}

 

function OnListXDC(e) {

    var view = metaDataSource.view();

    log(kendo.format("ds listxdc, #rows={0}",view.length));

    $(view).each(function() {

        log(kendo.format("ID={0}, Name={1}, Hits={2}",this.ID,this.Name,this.TotalHits));

    });

}

 

$(document).ready(function(){

    metaDataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: "/metrics/listxdc",

                data: {

                    json: "true",

                    simu: "true"

                }

            }

        },

        schema: {

            model: {

                fields: {

                    ID: { type: "number" },

                    Name: { type: "string" },

                    Path: { type: "string" },

                    TotalHits: { type: "number" }

                }

            }

        },

        change: OnListXDC

    });

 

    createList();

    createPieChart();

});

I define the DataSource and then call createList to use this with a dropdown.  This works and I see the change event for the DataSource as expected.

Next, I call createPieChart to use the same DataSource BUT I get another change on the DataSource and another network call is made?

I wish for there to be a single network call and for the results to be bound to the two UI elements until I call .read() on the DataSource to trigger an update.

Can you please take a look and see if I am doing something wrong here?

[Rosen]

Hi John,

The behavior you are observing is caused by the fact that both widgets will execute their initial requests before the first request finishes. Thus, at the point in which the requests are issued, the DataSource is not populated yet and both widgets will try to "fill" the DataSource. In order to issue only one initial request you should set both widgets autoBind options to false and populate the DataSource manually:

function createPieChart() {
    $("#pie").kendoChart({
        dataSource: metaDataSource,
        autoBind: false,
        //....
    });
}

function createList() {
     $("#list").kendoDropDownList({
        index: 0,
        dataSource : metaDataSource,
        autoBind: false,
        //....
    });
}

$(document).ready(function(){
    metaDataSource = new kendo.data.DataSource({
        //...
    });

    createList();
    createPieChart();

    metaDataSource.fetch();
});

Regards,
Rosen
the Telerik team

[John]

Perfect!

Thanks for your help.