Hi,

I am using the KendoReact grid with checkbox selection as outlined here: https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection

I was hoping for some help on the best way to selectively hide the checkbox for certain rows based on row data while still using default Grid selection behaviours i.e. Grid selectedField, onSelectionChange and onHeaderSelectionChange.

I know that I can use a custom cell template to selectively hide or show the checkbox, but if I do this is there any way to still use the Grid onSelectionChange handler for the checkboxes that are shown? Or do I have to use the Grid onItemChange event to change the selected field instead?

Kind regards,

David

as you can see the first item (and the last one), does not start from the most right/left, how can I get rid of that space?

Hi.

If I use your example for re-ordering grid rows by drag&drop, there are a lot of console warnings showing up:

https://stackblitz.com/run/?file=app%2Fdraggable-row.tsx

I think the issue results from the file drag-handle-cell.tsx where there is a td tag just adding the ...props as attributes which doesn't seem to result in valid HTML.

I'm not sure if this has an impact on the re-ordering because if I simply delete the ...props from the td, it still seems to work. Can you please check and let me know if it's ok to remove the ...props from the td?

Thanks,

Greetings,

Bernd

Is it possible for the drawer component to use Inertia JS instead of react router?

Is there a way to format/create cells that has a sub grid structure (see attached)?

Hi.

I am trying to only show the detail (+) button in a grid row if a field has a specific value but I can't make it work. Here is an example:

https://stackblitz.com/edit/react-skjcz7?file=app%2Fmain.tsx

As you can see, the + button in the first row does not get replaced by my new button and also if I click on my button it results in an error.

I found a quite old example from a similar thread here but it was build with a class based component. I tried to do this with my function based approach but obviously I'm missing something.

Thanks for your help!

Greetings,

Bernd

I see that KendoReact offers a lot of the CSS utility classes like e.g. Tailwind CSS does. I would like to use those for things like flexbox and CSS grid, but also for generic padding and margins and such, in the same way I would with Tailwind.

Is there any documentation for these utility classes somewhere on the site? I cannot seem to find any.

Also, in my IDE (Webstorm) the autocomplete offers classes prefixed with 'k-' but also '!k-' and 'k-i-'. What is the difference between these?

Lastly, would it be possible to use Tailwind instead of KendoReact's utility classes alltogether?

How would I go about removing the classes from KendoReact if I wanted to? (without having to delete all of them by hand from the ...-all.css files)

Or perhaps better yet... is there a general 'kendo-react' way to use flexbox or css grid classes?

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 :-)