change event

[Voss]

Is leverage the "change" event the correct approach to wire up some templates and grid that use a common DataSource?

I have the following code, but it take about 5 seconds for the binding to occur even though the data is returned in under a second.

<script>

    $(document).ready(function () {
        var dsBoxScore = new kendo.data.DataSource(
            {
                type: "json",
                transport:
                {
                    read: "JsonBoxScoreGet"
                },

                change: function () {

                    var scriptTemplateBoxscoreHomeTeam = kendo.template($("#templateBoxScoreHomeTeam").html());
                    $("#scriptBoxScoreHomeTeam").html(scriptTemplateBoxscoreHomeTeam(this.data().HomeTeam));

                    var scriptTemplateBoxscoreAwayTeam = kendo.template($("#templateBoxScoreAwayTeam").html());
                    $("#scriptBoxScoreAwayTeam").html(scriptTemplateBoxscoreAwayTeam(this.data().AwayTeam));

                    $("#gridBoxScore").kendoGrid({
                        dataSource: this.data().HomeTeam.Players,
                        height: 350,
                        selectable: "row",
                        scrollable: true,
                        sortable: true,
                        pageable: false,
                        navigatable: true,
                        rowTemplate: kendo.template($("#rowTemplateBoxScorePlayerStats").html())

                    });

                },

                serverPaging: false,
                serverSorting: false

            });

        dsBoxScore.read();

    });
    </script>

[Atanas Korchev]

Hi Voss,

 Yes, the change event is the recommended way to consume a datasource. In your code you seem to initialize a new grid every time the change event is raised. Are you sure this is the desired result? You can just create a data source and the grid after that:

var dsBoxScore = new kendo.data.DataSource( { ... } )

$("#gridBoxScore").kendoGrid({
    dataSource: dsBoxScore
    ...
});

Regards,

Atanas Korchev
the Telerik team

[Voss]

Not sure I know what you mean.

So how should I structure it then? You state that the change event is the recommended way to consume the datasource, but not the right place to init a grid. So not sure what to do.

I need to do the following and I'm not sure how to reference the datasource sub properties outside of the change event:

  $("#gridBoxScoreHomeTeam").kendoGrid({
                    dataSource: dsBoxScore.data().HomeTeam.Players,
                    height: 350,
                    selectable: "row",
                    scrollable: true,
                    sortable: true,
                    pageable: false,
                    navigatable: true,
                    rowTemplate: kendo.template($("#rowTemplateBoxScorePlayerStats").html())

                });

[Atanas Korchev]

Hello Voss,

I guess we need more information about your scenario in order to help you further. Could you provide some more details? How much data are you binding the grid to? How do the templates look like? Ideally you could send a live url or a test project.

Regards,
Atanas Korchev
the Telerik team