This is a migrated thread and some comments may be shown as answers.

Find row and select it in Grouped, Sorted and paged grid?

10 Answers 632 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 30 Oct 2017, 03:34 PM

Hello,

I'm having some grid's - some with paging or grouping (Expanded and Collapsed) where I want to search for a specific row (Model_Id) and

select that row (if it is a grouped row it should be expand)...

  • I know that I can get the dataitem with
var dataItem = $("#grid").data("kendoGrid").dataSource.get(id);

but does this work also in a paged grid?

  • If I find the row how to select this row if it is on another page?
  • If I select the row and it is in a Group which is colapsed - how to expand that Group?

robert

 

 

 

 

10 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Nov 2017, 09:41 AM
Hello, Robert,

The Grid can select rows only on the current page, as the select method works with DOM elements, and if the item with the needed ID is on another page, those page DOM elements are still not rendered:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

If the item is on the current page I can suggest the following approach, to go over the items, select the desired one, and if the group is collapsed, to programmatically expand it:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-items

http://dojo.telerik.com/OZIsUd

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 02 Nov 2017, 11:48 AM

Hi,

I now the new ID after the insert and have to reload (Ajax) the grid so is there a possibility tp pass that new ID to the Server Action and tell the grid on the server to load the right page?

or any other solution on the server side availible?

robert

0
Stefan
Telerik team
answered on 07 Nov 2017, 07:09 AM
Hello, Robert,

Could you please share more details about the scenario?

Based on the provided information, the desired result is to pass a new ID to the server and based on that ID to return a specific page?

Please specify if this is the ID of a new record, as if it is, the ID is made on the server and the information should be available.

As for setting a specific page, this could be done by programmatically return the page that holds the new item instead of using the built-in ToDataSource result method.

If my assumption was not correct, I will be expecting more details and gladly assist further. 

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 07 Nov 2017, 07:35 AM

Yes, the new record is generated on the Server through a Ajax call from the Client and after that creation of the record I want to reload the grid from the client and move the the new record and edit that new record...Yes the new record is generated on the Server through a Ajax call from the Client and after that creation...

And for that I search for a solution

robert

0
Stefan
Telerik team
answered on 09 Nov 2017, 02:13 PM
Hello, Robert,

Thank you for the clarification.

By default, the Grid will return the new item on the first page after it is saved in the database. This can be observed in our demo:

http://demos.telerik.com/aspnet-core/grid/editing

The ID of the record can be retrieved on the requestEnd event of the dataSource inside the response:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-requestEnd

As the new row is positioned first, the editRow method can be called on the first row after a create operation:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-editRow

http://dojo.telerik.com/OLElA

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 09 Nov 2017, 02:22 PM
there is a misunderstanding, I use not the add new functionality of the grid but create the new record by ma won with a popup Form and save that new row through a Ajax Form post. After that I reload the grid and the new record is not on the first row because it depends on sorting and grouping...
Is it now clear?
robert
0
Georgi
Telerik team
answered on 14 Nov 2017, 09:52 AM
Hello Robert,

A possible solution is to expose an Action method which will compute the page which holds the item and then navigate to this page using the page method.

Action to find the page which contains the item:
public  IActionResult GetPageOfItem(int id, int pageSize, string sortField, string groupedField)
{
    //TODO: validate the data
 
    var items = this._context.Students.OrderBy(x => x.GetType().GetProperty(groupedField).GetValue(x,null))
        .ThenBy(x=>x.GetType().GetProperty(sortField).GetValue(x, null)).ToList();
 
    var item = items.First(x => x.ID == id);
 
    var index = items.IndexOf(item);
 
    return Json(Math.Ceiling((decimal)index/pageSize) + 1);
}

Request to get the page and navigate to it:

$.ajax({
    url: '/Home/GetPageOfItem?id=1&pageSize=3&sortField=Field&groupedField=Field', //in real world scenario parameters will not be hardcoded
    method: 'GET',
    success: function (result) {
        $('#grid').data('kendoGrid').dataSource.page(+result);
    }
})

Attached you will find a sample which demonstrates the above solution. Please examine it and let me know if it is suitable for your case.

I look forward to your reply.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 17 Nov 2017, 10:37 AM

Thank's but you Code doesn't work as it should if you search for ID=4 it goes to page 2 but ID=4 is on page 1 - see Video: https://www.screencast.com/t/fivO5sI9C

robert

0
Accepted
Georgi
Telerik team
answered on 20 Nov 2017, 01:03 PM
Hi Robert,

Indeed the algorithm did not return the correct page. I have modified the GetPageOfItem method and now correct page is returned:

public  IActionResult GetPageOfItem(int id, int pageSize, string sortField, string groupedField)
{
    //TODO: validate the data
  
    var items = this._context.Students.OrderBy(x => x.GetType().GetProperty(groupedField).GetValue(x,null))
        .ThenBy(x=>x.GetType().GetProperty(sortField).GetValue(x, null)).ToList();
  
    var item = items.First(x => x.ID == id);
  
    var index = items.IndexOf(item);
  
    return Json((index/pageSize) + 1);
}


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 22 Nov 2017, 08:17 AM
Thanks - now it works...
Tags
Grid
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Stefan
Telerik team
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Georgi
Telerik team
Share this question
or