Changing Grid Data

5 posts, 1 answers
  1. Rafi
    Rafi avatar
    3 posts
    Member since:
    Jan 2012

    Posted 28 Jan 2012 Link to this post

    Hi all,
    I'm trying out Kendo as an alternative to jQuery-UI and so far it is working nicely.
    One thing I couldnt really figure out (I'm probably missing something....) - I created a grid from an array.
    Now, I want to redraw the grid using the same element but with a different data set.
    With jQuery-UI I simply could destroy the grid and the recreate it. How do I do it in Kendo?

    Thanks
    Rafi
  2. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 28 Jan 2012 Link to this post

    Hi Rafi,

    My thought would be to empty the contents of the element and then create a new grid with the same element.

    For example, if I had an the following html element defined:

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

    And I initialized the grid with person information like this:

    $(document).ready(function () {
        var peopleData =
            [
                { Id: 1, FirstName: "John", LastName: "Doe", Age: 46 },
                { Id: 2, FirstName: "Jayne", LastName: "Smith", Age: 13 }
            ];
      
        $('#grid').kendoGrid({
            dataSource: { data: peopleData },
            height: 250,
            columns:
            [{
                field: 'FirstName',
                title: 'First Name',
                width: 200
            }, {
                field: 'LastName',
                title: 'Last Name',
                width: 200
            }, {
                field: 'Age',
                title: 'Age',
                width: 50
            }]
        });
    });

    I could empty the div and populate the grid with product information like this:

    changeDataSource = function () {
        // Define an array of products.
        var productData =
            [
                { Id: 1, ProductName: "Widget A", Sold: 1000 },
                { Id: 2, ProductName: "Widget B", Sold: 2000 }
            ];
      
        // Empty the grid element of all html.
        $('#grid').empty();
      
        // Initialize a new grid with the product information.
        $('#grid').kendoGrid({
            dataSource: { data: productData },
            columns:
            [{
                field: 'ProductName',
                title: 'Product Name'
            }, {
                field: 'Sold'
            }]
        });
    }

    Hope this helps....

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. Rafi
    Rafi avatar
    3 posts
    Member since:
    Jan 2012

    Posted 29 Jan 2012 Link to this post

    Hi John,

    That actually worked perfectly.
    Thanks for the assistance and quick reply.

    Rafi
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 29 Jan 2012 Link to this post

    Glad that worked out for you =)  If you get a chance, can you mark it as the answer...

    Regards,

    John DeVight
  6. Nick
    Nick avatar
    2 posts
    Member since:
    Jan 2012

    Posted 01 Feb 2012 Link to this post

    So what is the use of refresh method exactly?
    is there no way I can just make a data refresh call (often needed when working with remote data)?
    UPDATE: Ok I guess grid.dataSource.read() is the method I was looking for.
Back to Top
Kendo UI is VS 2017 Ready