selecting a grid row

14 posts, 0 answers
  1. Omar Beaconsfield
    Omar Beaconsfield avatar
    4 posts
    Member since:
    Dec 2009

    Posted 06 Dec 2011 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 07 Dec 2011 Link to this post

    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
    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. Mark
    Mark avatar
    5 posts
    Member since:
    Apr 2012

    Posted 09 Jun 2012 Link to this post

    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
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 12 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 15 Jun 2012 Link to this post

    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.

  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Edward
    Edward avatar
    6 posts
    Member since:
    Jul 2012

    Posted 05 Sep 2014 in reply to Rosen Link to this post

    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.
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 08 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Edward
    Edward avatar
    6 posts
    Member since:
    Jul 2012

    Posted 08 Sep 2014 in reply to Rosen Link to this post

    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.
  11. Edward
    Edward avatar
    6 posts
    Member since:
    Jul 2012

    Posted 08 Sep 2014 in reply to Edward Link to this post

    I'll start a new thread.
  12. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2013

    Posted 30 Jan 2015 in reply to Rosen Link to this post

    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: {
                    },
                    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>
  13. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 02 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2013

    Posted 02 Feb 2015 in reply to Rosen Link to this post

    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.
  15. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Feb 2015 Link to this post

    Hi Chris,

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

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready