To add New column in grid Dynamically

7 posts, 0 answers
  1. WantToKnow
    WantToKnow avatar
    5 posts
    Member since:
    Feb 2008

    Posted 26 Sep 2017 Link to this post

    Hi Team,

    We are exploring to use Kendo UI for one of our project.There are few below requirements which I couldn't find in Demo or not very clear.

    1) Add Column on button click.

    There will be a add column button in UI which should allow to add new column in the grid.

    Case 1
                                    Add New Col[Button] Copy from Existing[Button]

                                 Col 1 [Checkbox]
    Group A
          Value 1
          Value 2

    Group B
          Value 3
          Value 4

    When click on add Button it should add new column as shown below:

                                  Add New Col[Button]     Copy from Existing[Button]

                                 Col 1 [Checkbox]      Col 2[Checkbox] 
    Group A 
          Value 1              1                               
          Value 2              2

    Group B 
          Value 3              3
          Value 4              4

     

    2) Copy Column on button click using existing Column.

    User has filled the value for col 1 and added new col 2 and Col 3 copied from existing Col1. as shown below:

                                               Add New Col[Button]          Copy from Existing[Button] 

                             Col 1 [Checkbox]  Col 2 [Checkbox]  Col 3 [Checkbox]
    Group A
          Value1                      1                       5                                   1
          Value2                     2                       6                                   2

    Group B
          Value3                      3                      7                                    3
          Value4                     4                      8                                    4

    3) Add section/group capability.

    Case 3 Add Group or delete group:

    Value 5 and Value 6 added in the Group B.

                                             Add New Col[Button]          Copy from Existing[Button] 

                          Col 1 [Checkbox]         Col 2 [Checkbox]
    Group A
          Value 1              1                                5
          Value 2              2                                6

    Group B
          Value 3              3                               10
          Value 4              4                                11
          Value 5
          Value 6

     

    I have searched for point 1 and 2 and couldnt find any proper solution. Please confirm if above points has been supported by Kendo grid. If not is there any way to achive above by any tweak or customization?

    Thanks in advance.

    Mahendra

     

     

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 28 Sep 2017 Link to this post

    Hello Mahendra,

    Adding columns to an existing Grid widget is not a built-in feature. Since the Grid can render complex DOM structure just appending a column to it will not be a simple task. 

    However, if you would like to create the Grid structure dynamically you can pass function for the columns setting in the Grid. That function would return the columns configuration based on specific custom requirements. Check out the article below that describes how you can create a Grid dynamically. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Ravi
    Ravi avatar
    13 posts
    Member since:
    Feb 2016

    Posted 25 Oct 2017 in reply to Viktor Tachev Link to this post

    Hi,

    I have been modifying the example for dynamic columns.

    It loads fine on the initial load but if my new data has a new set of columns, my column headings are not being updated.

    How can I fix this?

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 27 Oct 2017 Link to this post

    Hi Ravi,

    Please send us a runnable sample or a dojo demo where the behavior is replicated so we can examine it locally. If you would like to send us a project you can open a support ticket and attach the files there.


    Regards,
    Viktor Tachev
    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.
  5. Ravi
    Ravi avatar
    13 posts
    Member since:
    Feb 2016

    Posted 27 Oct 2017 in reply to Viktor Tachev Link to this post

    http://dojo.telerik.com/OWaGA/3

    Is this the right approach to deal with changing column data between data sets?

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 31 Oct 2017 Link to this post

    Hi Ravi,

    The columns collection could be changed only by re-initializing the Grid widget through the "setOptions" method or by destroying and initializing it from scratch. I would personally recommend the setOptions method:
    var oldOptions = grid.getOptions();
    oldOptions.columns = getMyNewColumns();
    grid.setOptions(oldOptions);


    Best Regards,
    Konstantin Dikov
    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.
  7. Ravi
    Ravi avatar
    13 posts
    Member since:
    Feb 2016

    Posted 31 Oct 2017 in reply to Konstantin Dikov Link to this post

    Thanks, using setOptions and setDataSource is working.
Back to Top