1. Home
  2. Forum
  3. ASP.NET MVC
  4. Insert New Item Placeholder

Insert New Item Placeholder

Hi,

Is there a way to add an empty row (empty placeholder row ) at the bottom of the grid to allow the user to click and quickly fill a new record?

kind Regards

7 Replies
RS Renjith Singh Rajendran Syncfusion Team May 14, 2018 12:59 PM UTC

Hi Islam, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We have achieved your requirement by using the actionComplete event of Grid. In the actionComplete event we have appended the newly added row as the last record of Grid and focused the first editable cell. Please refer the code example below, 

<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging(true).Width("auto").Columns(col => 
    { 
        ... 
   }).ActionComplete("gridActionComplete"). 
      . 
      .Render() 
</div> 
 
<script type="text/javascript"> 
    function gridActionComplete(args) { 
        if (args.requestType === 'add') { 
            args.row.parentElement.appendChild(args.row); 
            document.getElementsByClassName('e-field')[0].focus(); 
        } 
    } 
</script> 

We have also prepared a sample, which could be downloaded form the link below, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


IY Islam yahia May 14, 2018 02:57 PM UTC

Dear Renijth,

Thanks for your appreciated help. I'll try to apply your sample code and get back to you.

Kind Regards

RS Renjith Singh Rajendran Syncfusion Team May 15, 2018 03:33 AM UTC

Hi Islam, 

And also we have considered ‘Adding new row in bottom position of Grid’ as feature improvement . This feature will be available in any of our upcoming release.  

Until then we suggest you to use the workaround from our previous update to achieve your requirement. 

Regards, 
Renjith Singh Rajendran. 


IY Islam yahia May 20, 2018 08:27 AM UTC

Hi Renjith,

The sample that you've provided works indeed, but not with batch mode enabled, I wonder if there is a little tweak to the code above to make it work in batch mode.

Also, I'm using EJ1 for ASP.NET MVC, not EJ2 so I'm sorry I didn't post in the right forum.

Kind Regards

VN Vignesh Natarajan Syncfusion Team May 21, 2018 11:57 AM UTC

Hi Islam, 
 
Thanks for the update. 
 
In EJ1 Grid, we have given support to render the edit row at the bottom of the Grid when RowPosition property of editSettings is given as “Bottom”. 
 
Refer the below code snippet 
 
@(Html.EJ().Grid<OrdersView>("Editing") 
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom).EditMode(EditMode.Batch); }) 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer our help documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


IY Islam yahia May 21, 2018 08:50 PM UTC

Hi Renjith,

Thanks for the update, I thought RowPosition wouldn't work in batch mode so thanks for reminding me.

The only issue I'm facing now is that I want to maintain an empty row as a placeholder for a new record, I've tried calling addRecord method inside the cellSave event but that led a recursive call to cellSave which caused the web page to crash.

I need to find an easy way to call addRecord once the current row has been saved, or find another alternative approach to achieve the same result.

Edit: there is one more issue with the RowPosition.Bottom is that in responsive mode (mobile mode for example) the new row does not show and remain hidden unless you restore the full page size.

VN Vignesh Natarajan Syncfusion Team May 22, 2018 12:03 PM UTC

Hi Islam, 

Thanks for the update. 

Query: “The only issue I'm facing now is that I want to maintain an empty row as a placeholder for a new record” 

In ejGrid, we have default support to display the blank add new row in the grid content during grid initialization itself to add a new record easily. It can be achieved using ShowAddNewRow property of the EditSettings. But this feature will work only for normal editing. 

Refer the below UG documentation  


For batch editing as a workaround, we have achieved your requirement using ActionComplete event and AddRecord() method of the grid.  

Refer the below code snippet 

@(Html.EJ().Grid<OrdersView>("Editing") 
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().ShowConfirmDialog(false).AllowEditing().RowPosition(RowPosition.Bottom).EditMode(EditMode.Batch); }) 
 
  .        .           .             .  
 
     col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(v => v.AddRule("range", "[0,1000]")).Add(); 
            col.Field("ShipName").HeaderText("ShipName").Width(150).Add(); 
            col.Field("ShipCountry").HeaderText("ShipCountry").Width(90).EditType(EditingType.Dropdown).Add(); 
        }) 
         .ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("begin").EndEdit("endEdit").EndAdd("endAdd"); }) 
) 
<script type="text/javascript"> 
    function complete(args) { 
        if (args.requestType == "refresh" || args.requestType == "paging" || args.requestType == "searching" || args.requestType == "filtering" || args.requestType == "grouping" || args.requestType == "sorting") { 
            setTimeout(function () { 
                var G = $("#Editing").ejGrid("instance");  // take the grid instance 
                G.addRecord(); 
            }, 300) 
        } 
    }    
</script> 

Refer the below screenshot for the output 

 

We have prepared a sample which can be downloaded from below link 




Query: “there is one more issue with the RowPosition.Bottom is that in responsive mode (mobile mode for example) the new row does not show and remain hidden unless you restore the full page size.”  


As per your suggestion we have prepared a sample(attached in previous query) and we are not able to reproduce the reported issue at our end. But we are able to reproduce some issue. kindly refer the below screenshot for the issue due to css styles. 

 
  
If above mentioned is the issue you are facing in responsive mode? Please get back to us. If not kindly share the following details to reproduce the reported issue at our end. 
 
  1. Share the full grid rendering code
  2. Share the essential studio version (XX.X.X.XX).
  3. Share the video demonstration of the issue your are facing.
  4. If possible try to reproduce the reported issue in provided sample.
  5. Share the replication procedure of the issue.

Regards,
Vignesh Natarajan  



Loader.
Up arrow icon