CODEWITHSUNDEEP
javascriptjquery-uijsgrid
Christopher
Christopher

Reputation: 15

Implementing adding columns with JS-grid

I am working on the js-grid and I am trying to find a way to dynamically add columns to the grid. I know there is a way to add rows, but I am looking to see if the grid has this functionality to add columns with a button. I have been reading the documentation and not sure if this is possible. My Code is listed below. Any help examples or resources would be greatly appreciated.

`var data = [ { "Name": "Christopher ", "Married": false, "Testing": "Here", "Col": "new" }, { "Name": "David ", "Married": false, "Testing": "Here", "Col": "new" }, { "Name": "Sal", "Married": true, "Testing": "Here", "Col": "new" }, { "Name": "Mike", "Married": false, "Testing": "Here", "Col": "new" } ];

$j("#jsGrid").jsGrid({
        height: 300,
        width: "100%",

        paging: true,
        autoload: true,
        inserting: true,
        editButton: true,
        editing: true,


        pageSize: 6,

        controller: {
            loadData: function() {
            return data;
        }
    },


    onRefreshed: function(args) {
            var items = args.grid.option("data");
            console.log( items, 'lets get dangerous')
         },

    fields: [

        { name: "Name", itemTemplate:function(value, item){
            if(!value){
                value = 'new';
                return item.Name = value;
            }else{
                return item.Name = value;
            }
        }, type: "textarea", width: 50 },




        { name: "Testing", itemTemplate:function(value, item){
            if(!value){
                value = 'new';
                return item.Testing = value;
            }else{
                return item.Testing = value;
            }
        }, type: "textarea",width: 50, height: 50},


        { name: "Col", itemTemplate:function(value, item){
            if(!value){
                value = 'new';
                return item.Col = value;
            }else{
                return item.Col = value;
            }
        }, type: "textarea",width: 50, height: 50},
        { type: "control" },

    ]

});`

Upvotes: 0

Views: 3892

Answers (1)

tabalin
tabalin

Reputation: 2313

You can add new columns setting fields option of the grid to the new array of columns (fields):

$("#grid").jsGrid("option", "fields", newFieldsArray);

Having initial set of fields, push new columns to it and set fields option of the grid.

Upvotes: 1

Related Questions