One datasource 3 different grids (sorting)

[Markus]

Good day to you all.

I am developing an icenium app in which I get data from an SQL Server. Now I do want to split this data into three different views and display them with different initial sorting.

Kind of 

name   age    height    weight
Joe           33       180cm     80 kg
Jane         28       170cm    50 kg
Baby         1            50cm   9 kg


View 1 Grid with
name  age

View 2 Grid with
name height

View 3 Grid with
Name  weight

I have two problems

1) the initial sorting does only work with the give code below for the first view I load
2) sorting works only on the first view I sort.

Any advice. Should I make 3 different API calls or can it be handled dynamicly


Markus

<!-- Gemeinden  Steuerfüsse-->

 <div data-role="view" id="view-gemeinden-steuerfuesse" data-init="getGemeindeDaten('SteuerfussTotal')" data-layout="drawer-layout-gemeinden" data-title="Steuerfüsse" >
<div data-role="content" class="view-content" >
<div id="grid-gemeinden-steuerfuesse"></div>
</div>
</div>

         <!-- Gemeinden  Einwohner-->

 

        <div data-role="view" id="view-gemeinden-einwohner" data-init="getGemeindeDaten('Einwohner')" data-layout="drawer-layout-gemeinden" data-title="Einwohnerzahlen" >
<div data-role="content" class="view-content" >
<div id="grid-gemeinden-einwohner"></div>
</div>
</div>

         

         <!-- Gemeinden  Ausländeranetiel-->

 

        <div data-role="view" id="view-gemeinden-auslaender" data-init="getGemeindeDaten('Auslaenderanteil')" data-layout="drawer-layout-gemeinden" data-title="Ausländeranteil" >
<div data-role="content" class="view-content" >
<div id="grid-gemeinden-auslaender"></div>
</div>
</div>

function getGemeindeDaten(sortBy) {
    var dataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: {
                url: "http://mobile.mydomain.com/api/t_gemeindens/GetSteuerfuesse",
                data:{
                    Accept: "application/json"
                }
            }
        },

        sort: {field: sortBy, dir: "asc"},
    });

    $("#grid-gemeinden-steuerfuesse").kendoGrid({
        dataSource: dataSource,
        sortable: true,
               columns: [
            {
                field: "Gemeinde",
                title: "Gemeinde",
                width: 150,
                attributes: {

                    style: "text-align: left; font-size: 0.8em; "
                },
                headerAttributes: {

                    style: "text-align: left; font-size: 1em; "
                }
            }, {
                field: "SteuerfussJahr",
                title: "  Jahr",
                width: 90,

                attributes: {

                    style: "text-align: left; font-size: 0.8em; "
                },
                headerAttributes: {
                    style: "text-align: left; font-size: 1em; "
                }
            }, {
                field: "SteuerfussTotal",
                title: "Total",
                width: 90
            }
            , {
                template: "<a href='http://www.web.statistik.zh.ch/cms_gp_neu/gpzh/index.php?p=gp&gem=#= Statistiklink #' target='_blank' style='font-size:0.8em;'>Quelle</a>",
                title: "Quelle"
            }

        ]

    });
    $("#grid-gemeinden-einwohner").kendoGrid({
        dataSource: dataSource,
        sortable: true,
        columns: [
            {
                field: "Gemeinde",
                title: "Gemeinde",
                width: 150,
                attributes: {

                    style: "text-align: left; font-size: 0.8em; "
                },
                headerAttributes: {

                    style: "text-align: left; font-size: 1em; "
                }
            }, {
                field: "Einwohner",
                title: "Einwohner",
                width: 90,
                 attributes: {

                    style: "text-align: left;k font-size: 0.8em; "
                },
                headerAttributes: {

                    style: "text-align: left; font-size: 1em; "
                }
            }
            , {
                template: "<a href='http://www.web.statistik.zh.ch/cms_gp_neu/gpzh/index.php?p=gp&gem=#= Statistiklink #' target='_blank' style='font-size:0.8em;'>Quelle</a>",
                title: "Quelle"
            }

        ]

    });
    $("#grid-gemeinden-auslaender").kendoGrid({
        dataSource: dataSource,
        sortable: true,
              columns: [
            {
                field: "Gemeinde",
                title: "Gemeinde",
                width: 120,
                attributes: {

                    style: "text-align: left; font-size: 0.8em; "
                },
                headerAttributes: {

                    style: "text-align: left; font-size: 1em; "
                }
            }, {
                template: "#=Auslaenderanteil# %",
                 field: "Auslaenderanteil",
                title: "2012",
                width: 70,
                 attributes: {

                    style: "text-align: right; font-size: 0.8em;padding-right:10px;"
                },
                  headerAttributes: {

                   style: "text-align: right; font-size: 1em;padding-right:10px;"
                }
            }
            , {
                template: "<a href='http://www.web.statistik.zh.ch/cms_gp_neu/gpzh/index.php?p=gp&gem=#= Statistiklink #' target='_blank'  style='font-size:0.8em;'>Quelle</a>",
                title: "Quelle",

                 attributes: {

                    style: "text-align: right; font-size: 0.8em;padding-right:10px;"
                },
                  headerAttributes: {

                   style: "text-align: right; font-size: 1em;padding-right:10px;"
                }
            }

        ]

    });

[Alexander Valchev]

Hi Markus,

I noticed the following issues with your code:

1. It is not possible to pass parameters to the init event handler from the data attribute like this data-init="getGemeindeDaten('SteuerfussTotal')" . The data-init data attribute value should be string equal to the name of the function that is supposed to be executed.

2. It is not recommended to have the same init event handler for multiple Views as it is likely to cause multiple times widget initialization. In your case the getGemeindeDaten function will execute up to 3 times and each time all of the Grid widgets will be initialized. This is not supported. The event handler should contain only the initialization script of the Grid located in that particular View.

3. In your case you will have to use 3 separate DataSources as it is not possible to have one DataSource sorted in tree different ways. Alternatively you may bind all grids to one shared DataSource which will be sort manually at the view show event each time when the user navigates to a View that contains Grid.

I hope the information will help.

Regards,
Alexander Valchev
Telerik

[Markus]

Dear Alexander

Thank you very much for your fast, detailed, helpfull response.

After rearanging the stuff according to your advice it is now working.

AAA rating for your help

Markus