Log in to start a topic

How can add new blank rows at the top of the grid

Posted by: ashish-sharma on 9 September 2017, 9:22 am EST

  • ashish-sharma

    Posted 9 September 2017, 9:22 am EST

    Hi,

    In one of our requirement we want to add new rows at the top of the grid. Like user click on add new row button and we will open a popup and user will enter the number of rows to be added once user click on ok button then the specified number of rows should be added to the top of the grid.

    How can we do it?

    Thanks

    Ashish

  • manish-gupta1

    Posted 9 September 2017, 9:22 am EST

    Hi Ashish,

    Alternatively, you can add an item by inserting the item in SourceCollection at the desired position. Please refer to the following code snippet;

    var itemToAdd={id:new Date().getMinutes()%60};
cvData.sourceCollection.splice(0,0,itemToAdd);
cvData.refresh();

    Suggested approach in the previous reply can be used if you are using unbound FlexGrid.

    Please read the following blog:

    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/

    Thanks,

    Manish Kumar Gupta

  • manish-gupta1

    Posted 9 September 2017, 9:22 am EST

    Hi Ashish,

    You can add Number of Rows at the top using insert method of RowCollection class. Please refer to following code snippet for adding the new Rows at the top:

    var row= new wijmo.grid.Row();
grid.rows.insert(index,row);

    Hope it helps!

    Thanks,

    Manish Kumar Gupta

  • ashish-sharma

    Posted 9 September 2017, 9:22 am EST

    I have tried this but it is not working for me can you give me a sample. One more thing our grid already has 200 records loaded now we need to add the empty rows in that grid.

    I am using this code

    dvGrid.flexGrid.dataView.addNew();

    dvGrid.flexGrid.dataView.commitNew();

    it is working for me but this is adding rows at the bottom

    How can we do it?

  • ashish-sharma

    Posted 9 September 2017, 9:22 am EST

    HI Manish

    Thanks for your support It worked for me.

    I have one more requirement like once i added the blank rows then my cursor location should be in first row first cell. How can I achieve it?

    Thanks

    Ashish

  • ashish.sharma

    Posted 11 September 2017, 5:05 am EST

    One more thing I want to Insert these newly added row into the database. But I am not able to get the newly added rows by using this

    var itemToAdd={};
cvData.sourceCollection.splice(0,0,itemToAdd);
cvData.refresh();

    I always get value of this ```

    dataView.itemsAdded.length;

    
How can I get the blank row to insert those into database

  • manish.gupta

    Posted 12 September 2017, 7:55 am EST

    Hi Ashish,

    You need to push the item in itemsAdded array too. Please use the following code for the same:

    
dataView.itemsAdded.push(item);

    It should work for you!

    Thanks,

    Manish Kumar Gupta

  • ashish.sharma

    Posted 13 September 2017, 3:22 am EST

    Hi Manish

    I am facing several problems in this functionality. I am adding rows using this code.

    
var itemToAdd={};
cvData.sourceCollection.splice(0,0,itemToAdd);
cvData.refresh();

    We are adding blank item How can we add items with same properties having in dataview. our data is dynamic and we don’t know which columns are we showing in grid.

    Items should be added like dataview.addnew() function. How can we achieve this?

    When do var itemToAdd ={} then we are not getting all the columns on server of this item only those columns which have value in it.Like if grid have 10 column and I have put value in 1 column then it sends us only one column. we all columns with nulls as well.

    Our scenario is Like we ask user to add number of rows then we add number of rows to grid

    like user have added 5 rows now user has edited the 3 newly added rows then we need to insert these rows in to the database and remove the remaining tow blank rows from the grid.

    How can we achieve this

  • manish.gupta

    Posted 14 September 2017, 5:17 am EST

    Hi Ashish,

    You can blank item with all column properties using following code snippet:

    var keys= Object.keys(cvData.items[0]),

    item={};

    for(var i=0;i<keys.length;i++){

    item[keys[i]]=null;

    }

    cvData.sourceCollection.splice(0,0,item);

    cvData.refresh();

    For removing blank rows from FlexGrid, you would like to remove the blank rows before updating to the Database.

    You know the number of rows added, you need to check for the added rows if a row is blank or not by checking for added rows. Please use the following code snippet for the same:

    function isAddedRows(row){

    if(row==0){

    return true;

    }

    return false;

    }

    flex.rowEditEnded.addHandler(function(s,e){

    var isEdited=false;

    for(var i=0;i<flex.columns.length;i++){

    if((s.getCellData(e.row,i)!==null && s.getCellData(e.row,i)!==“”) && isAddedRows(e.row)){

    isEdited=true;

    break;

    }

    }

    if(isEdited){

    cvData.itemsAdded.push(flex.rows[e.row].dataItem);

    }

    console.log(cvData.itemsAdded);

    });

    You need to update isAddedRows method as per your requirement, how you are adding rows.

    Please let me know if you have any further queries, we would be glad to help you.

    Thanks,

    Manish Kumar Gupta

  • ashish.sharma

    Posted 14 September 2017, 6:04 am EST

    Not getting full code

  • manish.gupta

    Posted 15 September 2017, 8:04 am EST

    Hi Ashish,

    We are sorry, I don’t know why full code do not get displayed.

    You can blank item with all column properties using following code snippet:

    
 var keys= Object.keys(cvData.items[0]),
                item={};
                for(var i=0;i<keys.length;i++){
                    item[keys[i]]=null;
                }
                cvData.sourceCollection.splice(0,0,item);
                cvData.refresh();

    For removing blank rows from FlexGrid, you would like to remove the blank rows before updating to the Database.

    You know the number of rows added, you need to check for the added rows if a row is blank or not by checking for added rows. Please use the following code snippet for the same:

    
function isAddedRows(row){
                if(row==0){
                    return true;
                }
                return false;
            }
            flex.rowEditEnded.addHandler(function(s,e){
                var isEdited=false;
                for(var i=0;i<flex.columns.length;i++){
                    if((s.getCellData(e.row,i)!==null && s.getCellData(e.row,i)!=="") && isAddedRows(e.row)){
                        isEdited=true;
                        break;
                    }
                }
                if(isEdited){
                    cvData.itemsAdded.push(flex.rows[e.row].dataItem);
                }
                console.log(cvData.itemsAdded);
            });

    You need to update isAddedRows method as per your requirement, how you are adding rows.

    Please let me know if you have any further queries, we would be glad to help you.

    Thanks,

    Manish Kumar Gupta

  • waheedahmed.hyder

    Posted 7 May 2018, 5:23 pm EST

    Hi,

    As per my implementation I have to add rows using modal popup and the new row template should be on top always

    I tried like this

    grid.beginUpdate();

    var item = grid.collectionView.addNew();

    item.name = ‘test data’;

    grid.collectionView.commitNew();

    grid.endUpdate();

    even though I have added new-row-at-top=“true” on grid but still the new row is getting to bottom after adding the row using above code.

    thanks,

    Waheed

  • waheedahmed.hyder

    Posted 5 September 2018, 3:44 pm EST

    Hi Manish,

    I am trying to implement the functionality where I want to new row on the top if we click in the new row template with some default data I tried all the steps from the above comment but not working for me

    kindly help me with it

    thanks,

    Waheed

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.