I use React Kendo Grid. There are some operations on the page which changes data in the grid.

I want to reload grid without grid buttons. Actually I'm looking for grid.reload() method but couldn't find.

Can you help me please?

Hi,

I am working on Kendo React toODataString with Odata .net core.

I am facing a problem when i am call custom filter with Kendo Grid Filter.

Manual Filter:

filter=clients/any(c:c/id eq 2)

it is possible to merge two filter auto using '@progress/kendo-data-query' or can i add my manual query in kendo react datastate like this?

dataState: {
    take: 10,
    skip: 0,
    filter: {
        filters: [{
            logic: "and",
            filters: [{
                field: "clients",
                operator: "any",
                value: {
                    field: "id",
                    operator: "eq",
                    value: 2
                }
                }]
        }]
    },
    
}

Hi,

I am working on "OData Server Operations" with .NET Core and implement following logic and its working fine.

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/

now I am editing a row using modal but after update data, how can I refresh this gird to get latest data.

service.updateData(dataItem).then((response) => {
    //how can i refresh grid here
 })

I've been having trouble building something using the grid.

I have several requirements:

• A grouped table or grid with three levels, having about 50 rows with six to eight numeric columns of percents.
• Sums (aggregates) of the columns at the top level and the second level.
• All of the numeric value cells should be in-cell editable.
• Editing the numeric value cells should update the aggregate numbers.
• Formatting and validation for values should be enforced: cells may only contain values from 0.00% to 100.00% to two decimal places.

I know that's a lot - we *might* be able to flex on the last three, but it would be preferred not to.

My issue is that updating a value updates the Grid's `data` prop, and the implementations I've tried so far seem to have one or two issues:

1) The input delay is quite large (calls to update the row onItemChange recalculate aggregates on every input). Recalculating and changing the state hook for the Grid's `data` prop takes noticeable time.

2) When using a custom cell via `cells={{}}`, updating causes the input to lose focus. If one enters a value and hits the Tab key to focus the next (custom) cell input, updating the Grid's `data` prop causes the Grid to be redrawn. I'm passing `dataItemKey` to the Grid component, and each custom cell has set `key={id}`, but the focus is lost regardless.

I would appreciate any input you could provide, including "You should use <<other thing>>".

hi, 

i am working on server side pagination and grouping, i am using the example below in giver url,

https://www.telerik.com/kendo-react-ui/components/dataquery/mvc-integration/

when i implement this example in my code its working fine with pagination, filtering and sorting, but when i am try to group data

my UI showing nothing. can you please give an example with server side grouping and pagination?

Hello! 

I have a problem with displaying data in the grid. Kendo react grid is in version: 5.9.0, React in version: 18.2.0.

If I send data to the grid several times, a problem appears. I send custom records to props [data] Kendo grid. But in the grid, other records will be displayed, as if the previous state.

When I toggled the pagination, the entries displayed correctly. As if there was some incorrect condition.

I don't have any filter set.

There was no such problem in the Reac 17 version. Is it a bug? Is there any way to force a data reload in kendo grid?

Thank you for your response.

Hi,

How to expand all nodes by default in treeList in react?

Can anyone give example how to achieve this?

Does exists any operator, which is able to filter all data values, where "X includes 1" ?

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", birthday: new Date(1983, 1, 1), x: [1, 2]},
    { name: "John Doe", birthday: new Date(1980, 1, 1), x: [2, 3]}
  ],
  filter: { field: "x", operator: "eq", value: 1 }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0]); // displays "Jane Doe"
});
</script>

Thanks a lot for an each help :-)

Hi, I am using filterBy from @progress/kendo-data-query to allow filtering of the data displayed in my kendo-react-grid. For more intuitive UI, i'd like to change the icon for this from a filter to a search magnifying glass. Is this possible? I saw some other Q/As related to this but they all suggested editing the css.... my file uses makeStyles instead for styling so I wasn't sure how to proceed. Let me know if you have suggestions for how to do this. 

Hi,

When using the grid, you can single click rows, shift click a range and ctrl click. These all work fine. I'm creating a wrapper around the grid to return the clicked rows, so this is the code I use to do this:

    const onSelectionChange = event => {
        const newSelectedState = getSelectedState({
            event,
            selectedState: selectedState,
            dataItemKey: DATA_ITEM_KEY,
        });
        const selectedRows = Object.keys(newSelectedState).map(x => data.find(d => d[DATA_ITEM_KEY].toString() === x.toString()));
        props.onSelected(selectedRows);
        setSelectedState(newSelectedState);
    };

So I loop the data keys returned from the getSelectedState method on my data collection. Great, works fine.

However, when shift selecting a range and then deselecting a single row holding control, the row still remains as selected using getSelectedState (visibly it's unclicked, but not the state object). This is not the case with shift. Shift correctly unselects the rows. I see the event returns a ctrlKey property, so I could probably add my own code around this issue - but it looks like a bug to me? I am using the newest versions of the grid and data tools (kendo-data-tools: 5.2.0 and kendo-react-grid: 5.2.0).