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

[Robert Madrian]

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

 

 

 

 

[Stefan]

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

[Robert Madrian]

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

[Stefan]

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

[Robert Madrian]

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

[Stefan]

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

[Robert Madrian]

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

[Georgi]

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

[Robert Madrian]

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

[Georgi]

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

[Robert Madrian]

Thanks - now it works...