data connection between 2 grids on same page

7 posts, 0 answers
  1. Rahul
    Rahul avatar
    11 posts
    Member since:
    Dec 2011

    Posted 07 Jan 2012 Link to this post

    Hi,

    i have a master grid displaying on a page, depending on the selection of the grid row, have to generate a dynamic url to be passed to the datasource of grid2 and this reloads the data into grid 2.

    is there a way where on change event of grid 1: i can pass a parameter via datasource.read() for loading data into grid 2 dynamically.\


    thanks in advance.

    R
  2. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 10 Jan 2012 Link to this post

    I thought that I could set the url property on the dataSource.transport.read object before called the dataSource.read method but I was wrong. So, I also need something similar, i.e. update dataSource url and no use of filters
  3. Kendo UI is VS 2017 Ready
  4. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 11 Jan 2012 Link to this post

    Figured it out. Thought not obvious from the documentation, you can update the dataSource read url in this fashion:

    var grid = $grid.data("kendoGrid");
    grid.dataSource.transport.options.read.url = dynamicUrl;
    
    grid.dataSource.read();
  5. Rahul
    Rahul avatar
    11 posts
    Member since:
    Dec 2011

    Posted 11 Jan 2012 Link to this post

    so dynamicUrl gets updated inside the change function of the first grid and then dynamically updates the dratasource2 reads.
    Below is my code for both grids with change function for grid reloading the datasource2 for grid2 :
    var dynamicUrl;
    $("#grid").kendoGrid({
        dataSource: dataSource,   
        pageable: true,
        selectable: true,
    toolbar: kendo.template($("#template").html()),
        columns: ["topic_id", "name","parent_topic_name","owner_name","description"],
        change: function() {
            var row = this.select();
            var id = row.data("id");
            $("#log")
                .html(dataSource.get(id).get("parent_topic_name") + " > " + dataSource.get(id).get("name") + "        " +"\
                      Owned By :" + dataSource.get(id).get("owner_name"));
    $("#desc")
                .html("Description : " + "<br>" + dataSource.get(id).get("description"));

    dynamicUrl = id + "/properties.json";
    var grid1 = $grid1.data("kendoGrid");
                grid1.dataSource.transport.options.read.url = dynamicUrl;
                grid1.dataSource.read();



        }


    });


    var dataSource2 = new kendo.data.DataSource({
            transport: {
                read: {url:"dynamicUrl",
                          dataType:"json"}
            },
           schema: {
                model: {
                    id: "topic_property_id",
                    fields: {
                        topic_property_id: { type: "string" },                    
                        name: { type: "string" },
    data_type: { type: "string" },
                        sort_order: { type: "number" },
    description: {type: "string"},
                    }
                }
            },
            pageSize: 8,
        });



    $("#grid1").kendoGrid({
        dataSource: dataSource2,   
        pageable: true,
        selectable: true,
       columns: ["topic_property_id", "name","data_type","sort_order","description"]
    });

    am i missing something ?  the json file at the url id/properties.json looks fine.



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

    Posted 12 Jan 2012 Link to this post

    I'm not sure if you have $grid1 initialized but if not, just $("#grid1") instead.

    It would help if you had what you were trying to do set up under jsfiddle. You can use this sample as a starting point: http://jsfiddle.net/CuQDc/5/ 

  7. durga bhavani
    durga bhavani avatar
    19 posts
    Member since:
    May 2012

    Posted 27 Jun 2012 Link to this post

    hi ,
       I have two grids.I want to move the data from one grid to another grid when i click on the button.can u please send the sample code for moving data from one grid to another grid.
  8. rupendra
    rupendra avatar
    1 posts
    Member since:
    Dec 2013

    Posted 10 Dec 2013 Link to this post

    plz anybody can send me the two grid implementation code..its urgent
Back to Top
Kendo UI is VS 2017 Ready