Grid.Select()

11 posts, 3 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 26 Mar 2012 Link to this post

    I am tying to find the values (mostly string) in a Grid (datasource was remotely populated).

    The documentation for Grid.change is pretty slim, it does not say what the values of event (e) is, I am assuming, that I have to do a myGrid.select() which will return an array of rows (but the format for the row object is not in the framework). I have used Firebug to look at the object, but this seems a slow path to figure things out. (I.e. I am making a plea for better documentation, to complement the examples).

    But for right now, an example of using a Grid (which has selection by multiple rows enabled) and how I find what rows have turned on and which have turned off, and how I get values out of the row (my grid is mostly text), would be very useful.

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 27 Mar 2012 Link to this post

    Hello,

    The easiest way to get field value from Grid's selected row is by using dataItem method of the grid. This will return the record associated with given row form which you can access the desired fields:

    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. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 28 Mar 2012 Link to this post

    I like your answer, and I think that is it. But, on the change event, I want to figure out which rows have been added, and which have been removed. An exhaustive listing of all items (I have up to 3500 in my grid) is too much.

    (what I am doing is finding the map rectangle in the row and highlighting it on the map) So I want to show footprints for only the selected items, but I don't want to repaint all rectangles each time a user selects just one more row.

  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 29 Mar 2012 Link to this post

    Hi,

    I'm afraid that getting only the added to or removed from the selection items is not supported as built-in feature. Therefore, you should consider handling this yourself though custom code, for example by persisting the selected regions and then update only the those which has changed in the selected items array.

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 29 Mar 2012 Link to this post

    Yes, I know how to do that. ( associative arrays are fun!).

    But I did seem something in firebug when I inspected the row object (please document it). I see that when I add a new item, old rows have the state:
    and added rows have

    I was hoping that there might be some other state info in the row item.

    Consider this for the next release, since it seems a logical thing to add.




  7. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 29 Mar 2012 Link to this post

    Actually, I am still having a more basic problem.

    I am not able to get the dataItem. Using FireBug, I never reach the breakpoint on the line after the call to .dataItem().

    If I can trust firebug, then the select() is returning the entire grid, not just a row, and indeed, I only get an array size one for rows,
    regardess of how many rows I have selected.

    [ div#tabPane-2.k-grid ]


    Ok, I fixed it, but there is something very bizzare, I have to add the extra line shown in the comment or catalogGrid is not bound in the change event handler. I think I am running into something odd in the run-time (versus scope) based binding of variables in javascript (I have been doing C# for a long time now, and am rusty in my javascript)

    var catalogGrid;
     
    function buildGrid() {
        catalogGrid = $("#gridPane").kendoGrid({
            pageable: true,
            scrollable: true,
            selectable: "multiple, row",
            groupable: true,
            autoBind: false,
            sortable: true,
            dataSource: searchData,
            columns: [
                {
                    field: "creator",
                    title: "creator"
                },
            {
                field: "date",
                title: "date"
            },
            {
                field: "size",
                title: "size"
            },
            {
                field: "type",
                title: "type"
            },
            {
                field: "description",
                title: "description"
            },
            {
                field: "distributor",
                title: "distributor"
            },
            {
                field: "product",
                title: "product"
            },
            {
                field: "bbox",
                title: "bbox"
            }
            ],
            change: function (e) {
                rowSelect(e)
            }
        });
        catalogGrid = $("#gridPane").data("kendoGrid");  // WHY DO I NEED TO DO THIS?
    }
     
    function rowSelect(e) {
        var rows = catalogGrid.select();
        var record;
        rows.each(function () {
            record = catalogGrid.dataItem($(this));
            mapShowBounds(record.bbox);
        });
    }

  8. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 Mar 2012 Link to this post

    Hello,

    This is required as the kendoGrid method will return the jQuery object on which it is called in order to keep the chaining possible. In order to get the object of the widget, you will need to use the element's data store. As described in the this help article.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 30 Mar 2012 Link to this post

    I learned a lot from this thread. I hope you can capture some of it for others in your documentation and help (search of the forums needs to have tag and sub-group filtering).

  10. Donovan
    Donovan avatar
    1 posts
    Member since:
    Mar 2014

    Posted 01 Apr 2014 in reply to Rosen Link to this post

    var dataItem = grid.dataItem(this);
  11. Cheryl
    Cheryl avatar
    2 posts
    Member since:
    Mar 2013

    Posted 24 Jun Link to this post

    Hello, 

    Is there any way I can get the value of first cell by index from selected row? Please note that I do not want to user column header(property).

    I got the selected row from kendo MVC grid using below snippet.

    var grid = $("#gridParentControl").data("kendoGrid");
    var selectedItem = grid.dataItem(grid.select());

    Thanks

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 29 Jun Link to this post

    Hello Cheryl,

    You could use the columns field of the Grid, which represents the current order of the Grid columns.
    E.g.

    var first = grid.columns[0].field;

    and retrieve the value of this field from the dataItem.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready