Grid programmatically select row by DataItem values -- when the item is not on the current grid page.

16 posts, 0 answers
  1. Matthew
    Matthew avatar
    4 posts
    Member since:
    Mar 2013

    Posted 04 Nov 2013 Link to this post

    Hi,

    I have a set of kendo widgets displaying the same underlying data.

    One is a ListView, the other is a Grid. They have different PageSize.

    When I select an item in my ListView, I want my grid to select the same row. I can't seem to figure out how to do this by dataitem.

    I get the dataItem from my listView change event -- how can I programatically select the same item in my Grid?

    This is fairly simple if both controls have the item on the selected page, but what happens when it is on a different page? How can I page my grid to the page containing my dataItem?

    Thanks!
    -Matt
  2. Matthew
    Matthew avatar
    4 posts
    Member since:
    Mar 2013

    Posted 04 Nov 2013 Link to this post

    I've put a fiddle up that loosely is trying to do the same thing.

    i can get grid2's data item that matches -- but now how can I get my grid to page/select to this item?



    http://jsfiddle.net/Sbb5Z/1047/
  3. Matthew
    Matthew avatar
    4 posts
    Member since:
    Mar 2013

    Posted 04 Nov 2013 Link to this post

    Updated the fiddle: http://jsfiddle.net/Sbb5Z/1060/
  4. Matthew
    Matthew avatar
    4 posts
    Member since:
    Mar 2013

    Posted 05 Nov 2013 Link to this post

    I've got a working solution, but it seems really wasteful. Surely there is a better way to do this?

    http://jsfiddle.net/Sbb5Z/1096/

    I am copying the datasource, applying all filters ( but no paging), then figuring out the index, then figuring out the page/pageindex.

    function findDataItem(theGrid, dataItem) {
    //get grid datasource
    var ds = theGrid.dataSource;
    //copy the datasource
    var fakeDS = $.extend({}, ds);
    //pagesize 10 gazillion, requery
    fakeDS.query({
    pageSize: 10000
    });
    fakeDS.filter(ds.filter());
    fakeDS.sort(ds.sort());
    //var index = fakeDS.indexOf(dataItem); --this doesn't work, objects aren't equal
    var view = fakeDS._view;
    for (var x = 0; x < fakeDS._view.length; x++) {
    if (fakeDS._view[x].Id == dataItem.Id) {
    index = x;
    break;
    }
    }

    var page = Math.floor(index / theGrid.dataSource._pageSize);
    var targetIndex = index - (page * theGrid.dataSource._pageSize) + 1;
    //page is 1-based index
    theGrid.dataSource.page(++page);
    //grid wants a html element. tr:eq(x) by itself searches in the first grid!
    var row = $("#grid2").find("tr:eq(" + targetIndex + ")");
    theGrid.select(row);

    console.log('Found it at Page: ' + page + 'index: ' + targetIndex);

    }
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 06 Nov 2013 Link to this post

    Hello Matthew,

    Indeed this is one way to do it. The reason is that the DataSource.data()  contains all data items /in case of local data/ unprocessed, while DataSource.view() contains only part /current page/ of the original data with all required transformations applied, namely filtering/sorting/paging etc.

    So in order to find the page in which one item should appear you will have to first transform the original data with sorting/filtering etc.

    Here is another way to implement this: http://jsfiddle.net/RZwQ2/

    Regards,

    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 28 Apr 2015 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    This is almost what I need, expect I have the following option set. How can I select the correct row when using virtual scrolling? Wouldn't the index (in the jsFiddle) be incorrect in this situation?

    scrollable: { virtual: true },

    Thanks,

    --Ed

  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 30 Apr 2015 Link to this post

    Hello Ed,

    This scenario will not work in case of virtual scrolling as with virtual scrolling you cannot use dataSource.page. Currently viewable data can only changed by user interaction, i.e scrolling.

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 28 May 2015 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    As part of the data in the transport > read > data, I am sending the id and on the server side, I can find the row and modify the DataSourceRequest Page prior to the .ToDataSourceResult to get the correct page. How can I make sure the js side of things is showing the correct page? Perhaps in the transport > read > complete? I can send down (from server to client) as additional JSON using the class below.

    public class DataSourceResultEx : DataSourceResult
    {
        public DataSourceResultEx(DataSourceResult result, string additionalJsonData = null)
        {
            AggregateResults = result.AggregateResults;
            Data = result.Data;
            Errors = result.Errors;
            Total = result.Total;
            AdditionalJsonData = additionalJsonData;
        }
     
        public string AdditionalJsonData { get; set; }
    }

  9. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 28 May 2015 in reply to Ed Link to this post

    Actually, to use the above class, I'd need to update things in the parse function so I can return just the data for the grid and make necessary updates to the page given the additional json data.

    --Ed

  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 01 Jun 2015 Link to this post

    Hello Ed,

    I'm not sure I fully understand your question. This thread has diverged from the orignal question posted. Thus I suggest you open a new thread and explaining the scenario which you are trying to implement.

    Have in mind that while scrolling a virtualized grid, it will request pages of data before the need to be displayed in order to achieve more smooth scrolling behavior.

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 17 Nov 2015 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

     

    Can you please tell how to select a particular cell and also to work its editing functionality? 

    grid.select("td:eq(1)")

    I was able to select the required cell, but the selected cell is not editable, I have to again click on the already selected cell to make it editable.

    Is it possible to dynamically select as well as edit the cell??

  12. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 19 Nov 2015 Link to this post

    Hello Aravind,

     

    select method only selects (visually) the cell. To put a cell in edit mode you can use editCell method, but only if edit mode is set to incell.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 19 Nov 2015 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

     In this fiddle http://jsfiddle.net/aravind_93/c1f3t6yo/3/ I'm not able to edit the subsequent cell(NEXT ROW'S 2ND CELL) value on enter key press (Code line number 118-122). Here it's working only in the first tab.

    When you add a new tab and then try to press enter key it's not working. (I had written a code just to test if it's working on new rows added..)(It'll work only if the class name is given as such in grid.editCell($("#grid td:eq(0)"));) But as i have multiple tabs, it's not possible.. 

    I should be able to highlight the subsequent row's 2nd cell in edit mode if there are rows below the present row, when you press enter key.

    And, here, a new row is added when enter key is pressed when you are in the last row. (Here also, the new row is not added dynamically, you have to click on the cell which is newly created and then press enter key for a new row to be added) (Code line number 105-117). This is probably not working mainly because I'm not getting the index of the row i am currently in. (I tried to get the index via var rnum = $($(n).find("#aria_active_cell")).closest("tr").index()+1;) (Code line number 112 in jsfiddle.. )

     

    Can you please tell me what's the problem here (The edit cell issue as well as the enter key issue)?

  14. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 23 Nov 2015 Link to this post

    Hello Aravind,

     

    I believe this thread has drastically diverged from the original topic. Please open a separate thread the issues which you describe.

     

    The `Enter` key doesn't work due the follwing keyup handler:

     

    $(tbl).on("keyup", function (e) {
              e.preventDefault();
              var keycode = (e.keyCode ? e.keyCode : e.which);
              if(keycode == '13'){
                var grid = $(tbl).data("kendoGrid");

                var rnum = $($(n).find("#aria_active_cell")).closest("tr").index()+1;
                console.log(rnum);
                var totalrows = $(tbl).data("kendoGrid").dataSource.total();
                console.log(totalrows);
                if(rnum==totalrows){
                  grid.addRow();     
                }else{
                  //alert("testing");
                  var x = $($(n).find(".stocks_tbl"))[0];//console.log(x);
                  grid.editCell($("x td:eq(7)"));
                }
              }
            });

     

     

    I'm not sure what's the purpose for this implementation.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Larry
    Larry avatar
    27 posts
    Member since:
    Apr 2017

    Posted 30 Jul 2017 in reply to Nikolay Rusev Link to this post

    That the
    Nikolay Rusev said:

    Hello Ed,

    This scenario will not work in case of virtual scrolling as with virtual scrolling you cannot use dataSource.page. Currently viewable data can only changed by user interaction, i.e scrolling.

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
    This should be noted in red in the virtual scrolling API doc. It certainly isn't something that is obvious and actually isn't expected  Thanks ....
  16. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 02 Aug 2017 Link to this post

    Hello,

    The observed behavior is a limitation of the virtually scrollable Kendo UI Grid which is pointed in the following section of the documentation:
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#limitations-of-virtual-scrolling

    This scenario is not supported, because when using virtual scrolling, the DataSource page method may return different page number than it is currently shown in the Grid widget. This is due to the fact that the scrollbar does not display exact pages. Thus, currently the data shown in the grid may be constructed from multiple pages of data and it is impossible to represent this as a single page number.

    However, If scrolling to a particular grid row is one of your requirements I would suggest switching to normal paging.

    Regards,
    Pavlina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top