This is a migrated thread and some comments may be shown as answers.

Sorting and Filtering not working with xml dataSource?

3 Answers 127 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Michael Hilgers asked on 14 Dec 2011, 11:38 AM

Hi Everyone!

Yesterday i started evaluationg KendoUI. I've created a html page showing a grid with a xml data source. Here's the code (sorry, but the 'Format Code Block Dialog' issn't working (FF8)).
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>New HTML5 page</title>

   <link href="kendoui/styles/kendo.common.min.css" rel="stylesheet" />
   <link href="kendoui/styles/kendo.kendo.min.css" rel="stylesheet" />

   <script src="kendoui/js/jquery.min.js"></script>
   <script src="kendoui/js/kendo.all.min.js"></script>
</head>
<body>
   <div id="grid"></div>

   <script>
       $(document).ready(function() {
           $("#grid").kendoGrid({
               dataSource: new kendo.data.DataSource({
                   transport: {
                       read: "../mssql/xml.php"
                   },
                   schema: {
                       type: "xml",
                       data: "/articles/article",
                       model: {
                           fields: {
                               number: "number/text()",
                               description: "description/text()",
                           }
                       }
                   }
               }),

               height: 500,
               groupable: true,
               filterable: true,
               scrollable: {
                   virtual: true
               },
               sortable: true,
               columns: [ {
                               field: "number",
                               width: 100,
                               title: "Artikelnummer"
                           } , {
                               field: "description",
                               width: 400,
                               title: "Bezeichnung"
                           }
                       ]
           });
        });
    </script>
</body>
</html>
--------------------------------------

All data from the data source is displayed correctly in the grid. BUT i can't sort the grid by clicking the column headers nor is the filter option displayed.

Is there anything wrong in my code? I've reviewed all examples and walkthroughs, but all use the same options for the grid like i do.

Please help :)

Regards,
Michael

3 Answers, 1 is accepted

answered on 14 Dec 2011, 03:56 PM

So i tried a litte bit more and i can say that it's definitily the xml binding which is preventing the grid from sorting and filtering. With the same data as json, the grid works as expected, with xml it freezes when sorting / filtering.

JSON Grid (working correctly)

<!DOCTYPE html>

<html>

<head>

<title>New HTML5 page</title>

<link href="kendoui/styles/kendo.common.min.css" rel="stylesheet" />

<link href="kendoui/styles/kendo.default.min.css" rel="stylesheet" />

<link href="grid_custom.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="kendoui/js/kendo.all.min.js"></script>

</head>

<body>

<div id="grid"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

url: "../mssql/json.php",

dataType: "json"

}

},

height: 700,

filterable: true,

scrollable: {

virtual: true

},

sortable: {

mode: "single",

allowUnsort: false

},

columns:[ {

field: "number",

width: 70,

title: "Bausteinnr."

} , {

field: "country",

width: 30,

title: "Land"

}, {

field: "descript1",

width: 200,

title: "Bezeichnung deu."

}, {

field: "descript2",

width: 200,

title: "Bezeichnung engl."

} ],

rowTemplate: "<tr><td>#= number #</td><td>#= country #</td><td>#= descript1 #</td><td>#= descript2 #</td></tr>",

altRowTemplate: "<tr class='row_alt'><td>#= number #</td><td>#= country #</td><td>#= descript1 #</td><td>#= descript2 #</td></tr>",

});

</script>

</body>

</html>

JSON data



[{"number":"11A001","country":"DE","descript1":"Dubel LUX warum sollte hier null stehen??","descript2":"der englische text"},{"number":"11A100","country":"DE","descript1":"Universalschrauben","descript2":""},{"number":"11A102","country":"DE","descript1":"Universalschrauben","descript2":""},{"number":"11A103","country":"DE","descript1":"Universalschrauben","descript2":""},{"number":"11A104","country":"DE","descript1":"Edelstahlschrauben","descript2":""},{"number":"11A105","country":"DE","descript1":"Edelstahlschrauben","descript2":""},{"number":"11A106","country":"DE","descript1":"Verbindungsschrauben,Muttern","descript2":""},{"number":"11A107","country":"DE","descript1":"Verbindungsschrauben,Muttern","descript2":""},{"number":"11A108","country":"DE","descript1":"Verbindungsschrauben,Muttern","descript2":""},{"number":"11A109","country":"DE","descript1":"Haken,\u00d6sen","descript2":""}]

And here come the same, but with xml binding:

XML Grid (not working)

<!DOCTYPE html>

<html>

<head>

<title>New HTML5 page</title>

<link href="kendoui/styles/kendo.common.min.css" rel="stylesheet" />

<link href="kendoui/styles/kendo.default.min.css" rel="stylesheet" />

<link href="grid_custom.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="kendoui/js/kendo.all.min.js"></script>

</head>

<body>

<div id="grid"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: new kendo.data.DataSource({

transport: {

read: "../mssql/xml.php"

},

schema: {

type: "xml",

data: "/bblocks/bblock",

model: {

fields: {

number: "number/text()",

country: "country/text()",

descript1: "descript1/text()",

descript2: "descript2/text()",

}

}),

height: 700,

filterable: true,

scrollable: {

virtual: true

},

sortable: {

mode: "single",

allowUnsort: false

},

columns:[ {

field: "number",

width: 70,

title: "Bausteinnr."

} , {

field: "country",

width: 30,

title: "Land"

}, {

field: "descript1",

width: 200,

title: "Bezeichnung deu."

}, {

field: "descript2",

width: 200,

title: "Bezeichnung engl."

} ],

rowTemplate: "<tr><td>#= number #</td><td>#= country #</td><td>#= descript1 #</td><td>#= descript2 #</td></tr>",

altRowTemplate: "<tr class='row_alt'><td>#= number #</td><td>#= country #</td><td>#= descript1 #</td><td>#= descript2 #</td></tr>",

});

</script>

</body>

</html>

XML data

<bblocks><bblock><number>11A001</number><country>DE</country><descript1>Dubel LUX warum sollte hier null stehen?? </descript1><descript2>der englische text </descript2></bblock><bblock><number>11A100</number><country>DE</country><descript1>Universalschrauben </descript1><descript2> </descript2></bblock><bblock><number>11A102</number><country>DE</country><descript1>Universalschrauben </descript1><descript2> </descript2></bblock><bblock><number>11A103</number><country>DE</country><descript1>Universalschrauben </descript1><descript2> </descript2></bblock><bblock><number>11A104</number><country>DE</country><descript1>Edelstahlschrauben </descript1><descript2> </descript2></bblock><bblock><number>11A105</number><country>DE</country><descript1>Edelstahlschrauben </descript1><descript2> </descript2></bblock><bblock><number>11A106</number><country>DE</country><descript1>Verbindungsschrauben,Muttern </descript1><descript2> </descript2></bblock><bblock><number>11A107</number><country>DE</country><descript1>Verbindungsschrauben,Muttern </descript1><descript2> </descript2></bblock><bblock><number>11A108</number><country>DE</country><descript1>Verbindungsschrauben,Muttern </descript1><descript2> </descript2></bblock><bblock><number>11A109</number><country>DE</country><descript1>Haken,Ösen </descript1><descript2> </descript2></bblock></bblocks>

So, wheres the issue with the xml binding? A mistake on my side (missing field type definition e.g.) or a bug?

Regards,
Michael

answered on 14 Dec 2011, 05:04 PM

kendoui-web-dataviz-latest-open-source.zip

Hi Michael Hilgers,

Indeed, the behavior you have described is caused by an issue with the current version of the DataSource. However, we managed to address it and I'm attaching an internal build for you to try. I have also updated your telerik point as a token of gratitude for bringing this to our attention.

Also note that you will need to specify the type of the fields in the model definition in order filtering to work, for example:

schema: {

type: "xml",

data: "/bblocks/bblock",

model: {

fields: {

number: { field: "number/text()", type: "string" },

country: { field: "country/text()", type: "string" },

descript1: { field: "descript1/text()", type: "string" },

descript2: { field: "descript2/text()", type: "string" }

}

Regards,
Rosen
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!