Binding Grid to XElement?

[Steven]

I have a callback function that returns an XElement object with the following content:

<Rows>

  <Category Name="Management" ID="Management">Management</Category>

  <Col1 Name="Cost" ID="Cost">189812516</Col1>

  <Col2 Name="Ratio" ID="Ratio">29.73</Col2>

  <Col3 Name="Headcount" ID="Headcount">1296</Col3>

</Rows>

<Rows>

  <Category Name="Professional Staff" ID="Professional Staff" >Professional Staff</Category>

  <Col1 Name="Cost" ID="Cost">53599982</Col1>

  <Col2 Name="Ratio" ID="Ratio">23.39</Col2>

  <Col3 Name="Headcount" ID="Headcount">808</Col3>

</Rows>

 

etc....

How can i use this in KendoGrid?   I.e. how do I set this up in the data source so as to be able to bind to it.   I am not loading this from a url or a file, it is coming in from a variable.

Do I load this as an XML data source or convert it with a template?  Help!

[Rosen]

Hello Steven,

In order to show a string variable which contains the data in XML format you should configure the DataSource similar as shown in this jsFiddle sample:

Regards,
Rosen
the Telerik team

[Steven]

Thanks for the example.   That seemed to work just fine.  

However, now for some reason this grid, when placed inside of a tabstrip, no longer displays.   In the example below, grid is not rendered inside the main tab, but grid2 is.   Why?

http://jsfiddle.net/LzPbv/

With this markup

<div id="tabs">

    <ul>

        <li>main</li>

    </ul>

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

</div>

 

<div id="grid2"></div>

And this script:

var data = '<Root><Rows><Category Name="Professional Staff" ID="Professional Staff">Professional Staff</Category><Col1 Name="Cost" ID="Cost">53599982</Col1><Col2 Name="Ratio" ID="Ratio">23.39</Col2><Col3 Name="Headcount" ID="Headcount">808</Col3></Rows><Rows><Category Name="Management" ID="Management">Management</Category><Col1 Name="Cost" ID="Cost">189812516</Col1><Col2 Name="Ratio" ID="Ratio">29.73</Col2><Col3 Name="Headcount" ID="Headcount">1296</Col3></Rows></Root>';

 

var dataSource = new kendo.data.DataSource({

    data: data,

    schema: {

        type: "xml",

        data: "/Root/Rows",

        model: {

            fields: {

                Category: "Category/@Name",

                Cost: "Col1/text()"

            }

        }

    }

});

 

$("#tabs").kendoTabStrip();

 

$("#grid").kendoGrid({

    dataSource: dataSource

});

 

$("#grid2").kendoGrid({

    dataSource: dataSource

});

[Steven]

Also, I found out that when you make the grid editable, when you go into edit mode on a cell, it populates the value with what is in the last line.

Check out this fiddle, and edit something on the first line (not the second one).   The value is replaced by the second line.

http://jsfiddle.net/blackhawk/VhkBL/

How do I fix that?

[Chris]

-

[Joel]

Steven,

I fixed the tab markup to make the grid work within the tab : http://jsfiddle.net/latenightcoder/LzPbv/1

Joel

[Steven]

Joel,

The documentation and examples don't seem to indicate that it needs a surrounding div tag.   Thanks!

You woudn't happen to have the answer for the second part (editable issue), would you?

[Joel]

I've actually run into that issue before but for the life of me, can't remember what I did to fix it. I'm pretty sure it will come to me later (when I'm not coding on a Saturday night).

[Joel]

Consider yourself lucky. Here's the fix for the edit issue:

http://jsfiddle.net/latenightcoder/VhkBL/2/

An id field needs to defined to identify a unique model instance.

[Steven]

You da man!    I actually tried   id:Category/@ID, but never thought to use the name of the column.   I thought it would have to be the xpath.

Thanks again!!