Slickgrid add new row on demand

Question

Is there a way to add a new row to a slickgrid on demand? For example, have a button on the page that shows the new row when clicked.

Answer 1

It can be done easily using dataView.addItem(params), just replace params with your parameters..

function addNewRow(){
   var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "Controller": tempcont, "SrNo1": tempsrno };             
   dataView.addItem(item);
}

here id, Controller, SrNo1 are ids of colunm

Answer 2

You can add a row dynamically, such as with a button click, by subscribing the "onAddNewRow" listener to your grid object. As many have suggested, it is best to use the dataView plugin to interface with your data. Note that you'll want the "enableAddRow" option set to "true".

Firstly, DataView requires that a unique row "id" be set when adding a new row. The best way to calculate this is by using dataView.getLength() which will give you the number of rows that currently exist in you grid (which we'll use as the id for the new row). The DataView addItem function expects an item object. So we create an empty item object and append the id to it.

Secondly, you'll be only focusing a single cell when you add your data. After you've entered that data (by blurring that cell), DataView will notice that you have not entered data for any of the remaining cells in the row (of course) and will default their values to "undefined". This is not really a desired effect. So what you can do is loop through the columns you've explicitly set and append them to our item object with a value of "" (empty string).

Thirdly, we don't want all the cells to be blank. Actually, we want the original cell's entered data to appear. We have that data so we can set it last so that it will overwrite the "" (empty string) value we previously set.

Lastly, we'll want to update the grid such that it displays all of these changes.

grid.onAddNewRow.subscribe(function (e, args) {
            var input = args.item;
            var col = Object.keys(input)[0]
            var cellVal = input[Object.keys(input)[0]]

            // firstly
            var item = {}; 
            item.id = dataView.getLength();

            // secondly
            $.each(columns, function(count, value) {
                colName = value.name
                console.log(colName)
                item[colName] = ""
            })

            // thirdly
            item[col] = cellVal
            dataView.addItem(item);

            // lastly
            grid.invalidateRows(args.rows);
            grid.updateRowCount();
            grid.render();
            grid.resizeCanvas();
        });

I hope this helps. Cheers!

Answer 3

You can always add new rows to the grid. All you need to do is add the data object for the row to your grid data.

Assume you create your grid from a data source - myGridData (which is an array of objects). Just push the new row object to this array. Call the invalidate method on the grid.

Done :)

Answer 4

Beside creating the new row, I needed it to be shown, so that the user can start writing on it. I'm using pagination, so here is what I did:

//get pagination info
var pageInfo = dataView.getPagingInfo();

//add new row
dataView.addItem({id: pageInfo.totalRows});

//got to last page
dataView.setPagingOptions({pageNum: pageInfo.totalPages});

//got to first cell of new row
var aux = totalRows/ pageInfo.pageSize;
var row = Math.round((aux - Math.floor(aux)) * pageInfo.pageSize, 0);
grid.gotoCell(row, 0 ,true);

Before I use pagination, I just needed this:

var newId = dataView.getLength();
dataView.addItem({id: newId});
grid.gotoCell(newId, 0 ,true);

Answer 5

var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);

Working fine for me.