Grid.Select()

[Dr.YSG]

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.

[Rosen]

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

[Dr.YSG]

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.

[Rosen]

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

[Dr.YSG]

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:

tr.k-state-selected

and added rows have

tr.k-alt

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.

[Dr.YSG]

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

    });

}

[Rosen]

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

[Dr.YSG]

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

[Donovan]

var dataItem = grid.dataItem(this);

[Cheryl]

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

[Dimiter Madjarov]

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