KendoReact Grid external link behaviors

1 Answer 65 Views
Grid
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Sanja Tolo asked on 12 Jun 2023, 11:36 AM

Hi,

Do you have any example or advice how we could achieve the 2 scenarios:

1) We put custom filters in the command bar of the grid - one dropdown with categories, one text box with product name search - custom filters, not column filters

We want to make them prepopulated with initial state and grid already filtered when we land on the page - e.g. url is ?categoryId=5&product=MY PRODUCT

And when the grid opens, already in dropdown with Categories a category with id 5 is preselected, and in the textbox already text for filtering MY PRODUCT is entered, and both values are already used as initial query values with the data shown in the grid



2) Also an external link behavior...we have an inline editable grid which has an ID column

And we call the page with something like ?Id=23&mode=edit

Result is that the row with ID = 23 is already in edit model (cells changed to inputs and state of row to edit) for that row with ID 23



We did it in the past with JQuery and ASP.NET with your grids, but would now like to do these 2 scenarios with your KendoReact Grid.

Can these 2 scenarios be done?


Thnx!

Sanja

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 14 Jun 2023, 01:55 PM

Hi, Sanja,

I understand the scenario properly you want to initially activate the editing of a specific row and apply initial filtering based on the available query parameters. Is this correct? In ASP.NET scenario this could be achieved through query string as these values are passed as parameters on every request. In the React world, though, you can achieve a similar result by keeping and updating variable in the state, holding the id of the edited cell. You can see possible suggestions to get the available query parameters in the following StackOverflow thread:

https://stackoverflow.com/questions/35352638/how-to-get-parameter-value-from-query-string

Once you collect the needed values, you can apply initial filtering to the grid by using our built-in `filterBy` or `process` methods:

As for the initial editing of the cells, you can use the approach given in this article in order to enable the editing of all or specific dataItems:

For convenience, I prepared a sample demonstrating how to use the `filterBy` method in a custom filter cell scenario where the cell with ProductID="2" is put in Edit mode:

Regards,
Vessy
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
Grid
Asked by
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or