This is a migrated thread and some comments may be shown as answers.
React Grid with dropdown in column
8 Answers 101 Views
This is a migrated thread and some comments may be shown as answers.
Telmo
Top achievements
Rank 1
Telmo asked on 14 Dec 2017, 08:10 PM

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 

8 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 18 Dec 2017, 10:56 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Telmo
Top achievements
Rank 1
answered on 22 Feb 2018, 12:01 PM
That's it, thank you!
0
Telmo
Top achievements
Rank 1
answered on 22 Feb 2018, 02:57 PM

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

 

Thank you

0
Preslav
Telerik team
answered on 26 Feb 2018, 09:54 AM
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:
I look forward to your reply.


Regards,
Preslav
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mayank
Top achievements
Rank 1
answered on 20 Jul 2018, 06:53 PM

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

 

 

0
Stefan
Telerik team
answered on 23 Jul 2018, 07:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mayank
Top achievements
Rank 1
answered on 23 Jul 2018, 03:55 PM

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!


0
Stefan
Telerik team
answered on 24 Jul 2018, 07:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Telmo
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Telmo
Top achievements
Rank 1
Preslav
Telerik team
Mayank
Top achievements
Rank 1
Share this question
or