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
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
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()"/>';
}
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
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
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.
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
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
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
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
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
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
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
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.
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
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
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
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!