React Grid with dropdown in column

9 posts, 1 answers
  1. Telmo
    Telmo avatar
    3 posts
    Member since:
    Dec 2017

    Posted 14 Dec 2017 Link to this post

    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 

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 Dec 2017 Link to this post

    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.
  3. Telmo
    Telmo avatar
    3 posts
    Member since:
    Dec 2017

    Posted 22 Feb 2018 in reply to Stefan Link to this post

    That's it, thank you!
  4. Telmo
    Telmo avatar
    3 posts
    Member since:
    Dec 2017

    Posted 22 Feb 2018 Link to this post

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

     

    Thank you

  5. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 26 Feb 2018 Link to this post

    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
  6. Mayank
    Mayank avatar
    2 posts
    Member since:
    Jun 2014

    Posted 20 Jul 2018 Link to this post

    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

     

     

  7. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 23 Jul 2018 Link to this post

    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
  8. Mayank
    Mayank avatar
    2 posts
    Member since:
    Jun 2014

    Posted 23 Jul 2018 in reply to Stefan Link to this post

    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!


  9. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 24 Jul 2018 Link to this post

    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
Back to Top