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

[Matthew]

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

[Matthew]

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/

[Matthew]

Updated the fiddle: http://jsfiddle.net/Sbb5Z/1060/

[Matthew]

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

}

[Nikolay Rusev]

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

[Ed]

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

[Nikolay Rusev]

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

 

 

[Ed]

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

[Ed]

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

[Nikolay Rusev]

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

 

 

[Aravind]

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??

[Nikolay Rusev]

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

 

 

[Aravind]

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

[Nikolay Rusev]

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

 

 

[Larry]

That the [quote]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

 

 

[/quote]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 ....

[Pavlina]

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