Implementing adding columns with JS-grid

Question

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" },

    ]

});`

tabalin · Accepted Answer · 2017-07-29 20:33:52Z

1

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.

answered Jul 29, 2017 at 20:33

tabalin

2,3231 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Over a year ago

Thanks for you reply I was able to find the custom field documentation. I do have question though as far as designing the custom field button to add the field. Is it possible to two have another control column and change the base fuctionality of it to only add columns? that would be two control groups on one grid?

Collectives™ on Stack Overflow

Implementing adding columns with JS-grid

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related