How to implement the dynamic grid

4 posts, 0 answers
  1. Tisson
    Tisson avatar
    12 posts
    Member since:
    Jun 2020

    Posted 19 Nov 2020 Link to this post

    Hi, 

    We are trying to make grid with dynamic data where number of column will not be constant and it may be vary and columns name too. Could you please let us know how to implement this type scenario. 

    And also please let me know how can we add a dropdown which will show the data types of that column in dynamic columnheader. ? 

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 20 Nov 2020 Link to this post

    Hello, Tisson,

    Regarding both questions:

    1) Dynamic columns - This can be done by passing a dynamic JSON columns collection to the Grid. When the columns collection is changed, the Grid will re-rendered. A similar approach can be seen in this demo:

    https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#custom-components

    2) And also please let me know how can we add a dropdown which will show the data types of that column in dynamic columnheader. ?  - Iн this case, we can suggest using the headerCellRender as it will be called for each header of the Grid and the developer can render anything in it including dropdowns. As it will be called for each header, even if they are 2 do 100, it will be automatically called for each of them:

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#headercellrender

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Tisson
    Tisson avatar
    12 posts
    Member since:
    Jun 2020

    Posted 20 Nov 2020 in reply to Stefan Link to this post

    HI stefan, 

    Thanks for the answer. for dynamics columns it worked. 

    It will be great if you please give any example or demo code for second answer ?

  4. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 24 Nov 2020 Link to this post

    Hi,

    Here is how to render a DropDownList in the Grid's header cell - https://stackblitz.com/edit/react-qdv3pn?file=app/main.jsx.

    Can you explain what you mean by "show the data types of that column in dynamic columnheader."?

    Regards,
    Nikolay
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top