Hi,
I want to add a column to ig grid using API.
I have a button in page if user click this button I want to add a new column to the grid. How can I do this. below is the code please see $("#btnAdd").click(function ()
<script type="text/javascript">
var products = [
{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
{ "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
{ "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
{ "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
{ "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
{ "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
{ "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
{ "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
{ "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
];
var adventureWorks;
$(function () {
$("#btnAdd").click(function () {
//Here I want to add a column to grid
});
$("#grid1").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "Name", dataType: "string" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" },
{ headerText: "Color", key: "Color", dataType: "string" },
{ headerText: "Safety Level", key: "SafetyStockLevel", dataType: "string" },
{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number" },
{ headerText: "List Price", key: "ListPrice", dataType: "number" },
{ headerText: "Standard Cost", key: "StandardCost", dataType: "number" },
],
dataSource: products,
responseDataKey: 'd.results',
features: [
{
name: 'Sorting',
type: "local"
},
name: 'Paging',
type: "remote",
pageSize: 12
name: "Hiding",
columnHidden: function (ui, args) {
var Columns = localStorage.getItem('Columns');
if (Columns === null) {
Columns = args.columnKey + ";";
localStorage.setItem('Columns', Columns);
}
else if (Columns.indexOf(args.columnKey) < 0) {
Columns += args.columnKey + ";";
columnShown: function (ui, args) {
if ((Columns != null) || (Columns.indexOf(args.columnKey) > 0)) {
Columns = Columns.replace(args.columnKey + ";", "");
columnSettings: [
{ columnKey: "FirstName", allowHiding: true }
]
name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true,
{ columnKey: "ProductID", allowResizing: true },
{ columnKey: "Name", minimumWidth: 40 }
</script>
<body>
<a href="BLOCKED SCRIPTvoid(0)" id="btnAdd">Add Column</a>
<br>
<table id="grid1">
</table>
</body>
hi,
you cannot add a column dynamically without re-creating the whole grid , or having the columns present but hidden initially (those are two separate solutions). i mean you cannot keep the rest of the data and simply append the new cells or insert them somewhere in the middle of the grid.
To do that:
//1. destroy the grid
$("#grid1").igGrid("destroy");
// now add the new column to the columns collection when you re-create the grid
$("#grid1").igGrid(<options with new columns>);
the other way is to include all columns you want to show at some point in the future, but mark the ones you don't want to show initially with hidden: true, like this:
(example)
{ headerText: "Product ID", key: "ProductID", dataType: "number" , hidden: true},
{ headerText: "Product Name", key: "Name", dataType: "string" , hidden: true},
The "hidden" property for column definitions works even if you don't have the Hiding feature added.
Hope it helps. Thanks,
Angel
Hello Alexander, Is there any solution is available even now because I have to decide the column creation at runtime, so the number of column here will vary at runtime.. Please Reply as soon as possible by giving some solution as I have done my almost work on the IgGrid, I don't wanna discard it.