React Grid with dropdown in column

[Telmo]

I want in one of the columns in a grid, add a dropdown or combobox component. As I see, in the documentation,

"Templates are only supported in the form of "strings". Templates in the form of React components are not supported".

Do you know if I can bypass this in any other way? 

Cheers 

[Stefan]

Hello, Telmo,

Currently, in order to have a DropDown editor, the jQuery syntax has to be used inside the editor function in order to append it to the current place in the DOM.

I made an example demonstrating this:

http://dojo.telerik.com/iVidE

Our native React Grid is planned to support placing React components directly as editors. The release of the native React components is planned for R1 2018 (mid-January).

Regards,
Stefan
Progress Telerik

[Telmo]

That's it, thank you!

[Telmo]

It is possible using react grid component to a title be an element (eg. a dropdown) instead of a string? 

 

Thank you

[Preslav]

Hi Telmo,

Could you please elaborate what the title of a grid means for you?

If it is the Toolbar, you could use a custom template by using an approach similar to the one outlined in this demo:

• https://demos.telerik.com/kendo-ui/grid/toolbar-template

I look forward to your reply.


Regards,
Preslav
Progress Telerik

[Mayank]

Hi All, I want to have a react grid using kendi ui react wrapper grid component. But i want to have a dropdown list on column when user clicks on inline editable row. Could you please help me out of this, how can we do this ? My try is shown in this link : https://codesandbox.io/s/zkv55jzjqm

 

 

[Stefan]

Hello, Mayank,

Thank you for the example.

The issue occurs because there are two different Grids used. Once is the wrapper and one is the native Grid.

Please advise which Grid would you like the use.

1) This demonstrates how to add it inside the wrapper Grid:

http://dojo.telerik.com/iVidE

2) This is how to do it inside the native Grid:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/

If you need additional assistance, please share which version of the Grid you decide to go for and I will happily assist.


Regards,
Stefan
Progress Telerik

[Mayank]

Thank Stephan, It really helpful.

Another question, what is your suggestion about to support kendo templates, as your react doc mentioned that Templates are only supported in the form of "strings". Templates in the form of React components are not supported.
Earlier for mvc version grids we use templates like below :


<script type="text/x-kendo-template" id="crud-template" >
    <div>
        #if (isEdit ==='True') {#
        <a class='k-button'>
            <span class='k-icon k-edit' id="edit"></span> Edit
        </a>
        #}
    </div>
</script>

Similar like possible in kendo react version ?
Thanks!

[Stefan]

Hello, Mayank,

Yes, this syntax is still possible using the wrapper version of the components.

The specific part is that this template will be searched inside the index file and placing inside the component directly will not find it.

Some of the templates can be set directly inline if there are not very complex.

The MVC and the React wrappers are based on the same jQuery widgets and nearly all of the functionalities that were possible with the MVC version are possible with the React wrapper. The main differences will come from a feature that the platform specific.

Regards,
Stefan
Progress Telerik