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>
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.
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