selecting a grid row

[Omar Beaconsfield]

I have a datasource bound to a grid. Knowing a specific data item, I would like to select that item in the grid programatically. How can this be done?

Thanks

[Rosen]

Hi Omar Beaconsfield,

In order to select an item visible in the grid widget, you may use select method passing the row element. Similar to the following:

Regards,
Rosen
the Telerik team

[Mark]

Hi,  

I know this thread is old, but I just wanted to ask one more thing.  In your given example, you are selecting something from the first page.  What if you select something in the 10th page, say 10338?  How would I instruct the grid to page to that page and display that row as selected?

Reason for this: In my application, after a user fills up a form to create a product, they will get redirected to the product listing page and I want the session to be read and using javascript, highlight the product row that was just created.  

Regards,
Mark

[Rosen]

Hello Mark,

Such functionality can be achieve by using DataSource's indexOf method to calculate the index of the item which should be selected and then the page method to page to the correct page. Note that in order indexOf to work correctly serverPaging should be disabled. Here is a test page which demonstrates simple implementation:

 

Greetings,
Rosen
the Telerik team

[Jerry T.]

Going back to the first example above, how would one pass the value of the data-id without hard-coding it?

I keep seeing examples here and in the docs where IDs or other values are hard-coded and that is useless for a real-world example.

[Rosen]

Hi Jerry,

This will depend on your particular scenario. You may read it from another widget or from a variable somewhere etc. 

Greetings,
Rosen
the Telerik team

[Edward]

Do you have any examples of this?  I don't understand how we are supposed to know the data-id ahead of time.   Especially if I wanted to traverse down the grid selecting one at a time in order.

[Rosen]

Hi Edward,

As I have already mentioned in my previous message, how you get the id will depend on your exact scenario. Generally speaking in order to select particular row (which demonstrates the sample) you will need to know which row you want to select in the first place - will it be a row which has been already select by the user after some other action in the grid or from some other widget on the page, or send from the server etc.

Regards,
Rosen
Telerik

 

 

[Edward]

So are the docs for the grid select method correct?  http://docs.telerik.com/kendo-ui/api/web/grid#methods-select


It was my understanding you don't need the data-id.  But, this example doesn't work for me.

[Edward]

I'll start a new thread.

[Chris]

I am having trouble getting this code to work. My grid is working as expected, and on document.ready I am getting my alert with the correct Id from the query string, but after the alert nothing else works... can you help?

​

<script>
    // document ready fires when the whole page is ready
    // and all elements, scripts, styles have been loaded
    $(function () {
        // regex for some date parsing
        // select the div and create the grid element
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://envaffairs.washington.county/complaints/ApplicationData.svc/Complaints"
                },
                sort: {
                    field: "EnforcementNumber",
                    dir: "desc"
                },
                schema: {
                    data: "value",
                    total: "['odata.count']",
                    model: {
                        id: "Id",
                        fields: {
                            Id: {type: "number" },
                            EnforcementNumber: {type: "string" },
                            ParcelNumber: {type: "string" },
                            Street: {type: "string" },
                            DateAndTimeOfComplaint: {type: "datetime" },
                            TypeOfComplaint: {type: "string" }
                        }
                    }
                },
                pageSize: 5,
                serverPaging: false,
                serverFiltering: true,
                serverSorting: true
            },
            filterable: true,
            selectable: "row",
            sortable: true,
            pageable: true,
            columns: [
                {
                    field: "Id",
                    width: 75,
                    filterable: false
                },
                {
                    field: "EnforcementNumber",
                    title: "Case"
                },
                {
                    field: "ParcelNumber",
                    title: "Parcel"
                },
                {
                    field: "Street",
                    title: "Address"
                },
                {
                    field: "DateAndTimeOfComplaint",
                    title: "Complaint Date",
                    format: "{0:MM/dd/yyyy}",
                    width: 200
                },
                {
                    field: "TypeOfComplaint",
                    title: "Complaint Type"
                }
            ]

        });

    });

    $(document).ready(function () {
        $("#fileToUpload").kendoUpload({
            multiple: false
        });
        var caseId = getParameterByName('id');
        alert(caseId);
            var el = $("#grid"),
                grid = el.data("kendoGrid"),
                dataSource = grid.dataSource,
                model = dataSource.get(caseId),
                index = dataSource.indexOf(model);
            dataSource.page(index/dataSource.pageSize() + 1);
            var row = el.find("tbody>tr[data-id=" + model.id + "]");
            grid.select(row);
    });
</script>

[Rosen]

Hello Chris,

Most probably the code does not work as the data for Grid widget is loaded asynchronous. Thus, when the select method is executed the Grid data rows are not yet rendered. You should use the dataBound event in order to set a row as selected.

Regards,
Rosen
Telerik

 

 

[Chris]

Thank you for the response, Rosen. I have attempted to implement the dataBound event. But it still seems as if my selectRow() function is executing before the grid is finished. If i take my code out of the function and place it below this...

var grid = $("#grid").data("kendoGrid");
                    grid.bind("dataBound", grid_dataBound);
                    grid.dataSource.fetch()

it seems to get a little farther, however i get the error message "Cannot get the value "uid" of undefined, as if something about my model code is incorrect.

[Rosen]

Hi Chris,

We have provided an answer to your request in the other forum post you have opened.

Regards,
Rosen
Telerik