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, 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).

Hi,

I have a virtual scrolling in my grid, it's unknow total data because it depend which user is connected and if there is filter applied, so I just set total to 10000 , because I didn't find any solution to change the total depending on data loading.

So first issue is :

Is it possible to have virtual scrolling without knowing the total data length?

Another problem that I'm struggling with is virtual scrolling with Filtering, after applying a filter on the data I have empty rows in my grid (because now the data length is less than 10000- the total data decaled before).

So the big question is : Is that possible to have virtual scrolling with Filtering and unknow total data length?

I'm adding my code, if this is not possible so what you recommend me to do?

Thank you

I'm trying to prevent headerGroup rows from rendering based on certain conditions.

When I try to utilize rowRender for this purpose, I can't make it work because it controls only the render of cells within the row. Returning null and <td></td> don't work (the row still renders but with nothing in it or with empty cells).

Is there any way I can target the row instead of the cells? I would even take being able to simply add a class to the row to hide it from the user with CSS.

I can't target the row with the row:empty CSS selector because the groupHeader rows come with k-group-cell cells already rendered before the renderRow even starts rendering custom cells.

Did I overlook anything that Kendo offers? Thank you!

I am using the helper function process, like this example

https://www.telerik.com/kendo-react-ui/components/dataquery/bulk-operations/ 

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

I am expecting the result like the example

{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}

But I actually got this, which is not ordering by the product name, but order by the category name and then product name

{
  data: [
    {
      aggregates: {
        unitPrice: {
          sum: 37,
        },
        unitsInStock: {
          sum: 56,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Chang",
          unitPrice: 19,
          unitsInStock: 17,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
        {
          productName: "Chai",
          unitPrice: 18,
          unitsInStock: 39,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
      ],
      value: "Beverages",
    },
    {
      aggregates: {
        unitPrice: {
          sum: 31.35,
        },
        unitsInStock: {
          sum: 13,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Gumbo Mix",
          unitPrice: 21.35,
          unitsInStock: 0,
          discontinued: true,
          category: {
            categoryName: "Condiments",
          },
        },
        {
          productName: "Aniseed Syrup",
          unitPrice: 10,
          unitsInStock: 13,
          discontinued: false,
          category: {
            categoryName: "Condiments",
          },
        },
      ],
      value: "Condiments",
    },
  ],
  total: 4,
}

How can I achieve the result in the example?