Binding Grid to XElement?

10 posts, 1 answers
  1. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 16 Feb 2012 Link to this post

    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!







  2. Rosen
    Admin
    Rosen avatar
    2662 posts
    Member since:
    Sep 2012

    Posted 17 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 17 Feb 2012 Link to this post

    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
    });

  4. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 18 Feb 2012 Link to this post

    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?

  5. Chris
    Chris avatar
    7 posts
    Member since:
    Jan 2012

    Posted 19 Feb 2012 Link to this post

    -

  6. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 19 Feb 2012 Link to this post

    Steven,

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

    Joel

  7. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 19 Feb 2012 Link to this post

    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?

  8. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 19 Feb 2012 Link to this post

    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).

  9. Answer
    Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 19 Feb 2012 Link to this post

    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.

  10. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 19 Feb 2012 Link to this post

    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!!

Back to Top