This is a migrated thread and some comments may be shown as answers.

Dynamically add new column

10 Answers 2225 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 07 Feb 2012, 05:11 PM
Hi,

I would like to programmatically add a column to the grid. I tried the following:

    grid.columns.push({ title: "Plan", field: "plan" });
    grid.refresh();

Inspection of the markup indicates that a new <col> element is added, but the <td> elements for the new column are not.

Is this possible?

Thanks,
Gary

10 Answers, 1 is accepted

Sort by
0
Jayalakshmi
Top achievements
Rank 1
answered on 08 Feb 2012, 01:19 PM
Please find the below code.... for your query

columns: [
                                          {
                                field: "sendername",
                                title: "Sender Name"
                            },
                                 {
                               title: "", width: "180px", template: '#= ShwEditView(primkey)#',
                                filterable: false
                           }              
                           ],



 function ShwEditView(primkey) {
            return '<input type="button" value="Edit/View" class="k-button" id="btnOpen" style="height:27px;"  onclick="ShowPop()"/>';
        }
0
Accepted
Dimo
Telerik team
answered on 08 Feb 2012, 01:42 PM
Hello Gary,

I am afraid the desired behavior is currently not supported. However, you can use a hack to achieve it.

http://jsfiddle.net/rusev/6yJkM/12/

Note that you will have to use autogenerated columns, and the datasource will have to return only the columns to be shown.

Unexpected side effects are possible.

If you need a reliable solution, I can advise you to remove the Grid altogether and instantiate a new one with the desired columns.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rahul
Top achievements
Rank 1
answered on 23 Sep 2014, 04:25 AM
Hi:

I see this post is dated 2 years back. I was wondering if there is any new feature that would support this. I have few columns bound and I need to add few more for each row based on the list associated to the main object. Please let me know if there is any possibility.
0
Dimo
Telerik team
answered on 23 Sep 2014, 01:59 PM
Hello Rahul,

The best and recommended way to add or remove Grid columns is to destroy and recreate the widget with the new settings.

http://docs.telerik.com/kendo-ui/framework/widgets/destroy

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Misiu
Top achievements
Rank 2
answered on 23 Sep 2014, 03:23 PM
@Dimo what about grid used in TeamPulse? It is using KendoUI Grid (I guess) and we can choose which columns we would like to see.
So after I choose additional 4 columns old grid is destroyed and new is added? What about events and bindings? Are they all recreated

In Ext.JS this is possible: http://jsfiddle.net/marcusschiesser/GvGCX/

Can You please provide demo showing proper way of reconfiguring grid?

Regards,
Misiu

0
Dimo
Telerik team
answered on 25 Sep 2014, 03:58 PM
Hello Misiu,

When you destroy a widget, its client object and event handlers are removed. That's why the event handlers should be redefined in the new Grid declaration, so that you can continue using them. The Grid recreation is practically the same as standard client-side initialization. So first you destroy the Grid and empty its <div>, as shown in the documentation article provided above. Then you initialize a new instance, as shown in all online Grid demos.

http://demos.telerik.com/kendo-ui/grid/remote-data-binding

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
William
Top achievements
Rank 1
answered on 06 Oct 2014, 12:21 AM
I have to be able to create a grid with 4 columns and then based on user input recreate the grid with either more or less columns (I won't know how many until I get user input).

Would it be possible to give a complete example that showed how to accomplish something like this? Especially something that could build a new grid on the fly with a number of columns that's based on user input.

Thanks

0
Dimo
Telerik team
answered on 08 Oct 2014, 01:50 PM
Hi William,

If you take the Grid's Remote Data Binding example as a starting point, you need to isolate the following two components of the configuration object:

- schema.model.fields
- columns

Once you have the fields' and columns' settings constructed, based on the user input and some custom logic, you can assign these settings to variables and incorporate them in the configuration object of the new Grid that must be created.


var myFields = {
    foo: { type: "..." }
    /* other fields ... */
};
 
var myColumns = [
    { field: "foo", title: "Foo" }
    /* other columns ... */
];
 
$("#grid").kendoGrid({
    dataSource: {
        schema: {
            model: {
                fields: myFields
            }
        }
        /* other fixed DataSource settings ... */
    },
    columns: myColumns
    /* other fixed Grid settings ... */
});


Note that the fields are defined with a multi-level object, while the columns are defined with an array of objects.

Constructing Javascript objects and arrays is a general development task and I suppose you have no issues with that. Let me know if you have any specific questions related to the Kendo UI Grid.


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Saurabh
Top achievements
Rank 1
answered on 07 May 2015, 07:59 AM

Hello,

I am also trying to change columns dynamically.

Solution given works for me (destroy then re create) but "ng-click" stops working when re create the grid.

"ng-click" attr is applied to html (checked by inspecting element) but it does not triggers the function. i think event is not binded when grid re-created dynamically.

please help.

my project is in angularjs.

0
Dimo
Telerik team
answered on 11 May 2015, 07:55 AM
Hi Saurabh,

You can't rely on Angular attributes when initializing the Grid with Javascript. Please attach and use event handlers the non-Angular way. Delegated event handlers can be attached to the Grid wrapper or table immediately after initialization. Non-delegated event handlers can be attached in the Grid's dataBound event.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Gary
Top achievements
Rank 1
Answers by
Jayalakshmi
Top achievements
Rank 1
Dimo
Telerik team
Rahul
Top achievements
Rank 1
Misiu
Top achievements
Rank 2
William
Top achievements
Rank 1
Saurabh
Top achievements
Rank 1
Share this question
or