Grid numeric edit column

[Aaron Khan]

I am using .EditType("numericedit") for one of the columns in my grid and I am trying to make it so that it doesn't accept decimal places so I set .Edit(new { @params = new { decimals = 0 } }) but that doesn't seem to be working. Is there a way to make it so that the numericedit doesn't allow decimals? Also is there a way to have create a custom edit field for a column?

[Dhivya Rajendran]

Hi Aaron, 

Thanks for contacting Syncfusion support, 

Query1:  Is there a way to make it so that the numericedit doesn't allow decimals? 

We have analyzed your requirement and created a sample for your reference, In the below sample we have set numericedit for the Freight column and pass parameter as format = “N0” so that the numericedit is not allowed decimals. Kindly refer the below code snippet for more information. 

<div> 

   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

  . . . .  

  col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Edit(new { @params = new { format = "n0" } }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

  . . . . 

}).AllowPaging().Locale("es-AR").PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

</div> 

 

Query2: Also is there a way to have create a custom edit field for a column? 

 

Yes, we have an option for celleditTemplate  to customize the edit field for particular column in Grid. In this below sample we have created custom datepicker for OrderDate column using Edit property of Grid.  Kindly refer the below code snippet and sample for more information. 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

  . . . . 

  col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("130").Format("yMd") 

  .Edit(new { create= "create", read = "read", destroy = "destroy", write = "write" }).Add(); 

 

}).AllowPaging().Locale("es-AR").PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

<script> 

  function create() { 

    elem = document.createElement('input'); 

    return elem; 

  } 

  function read() { 

    return datePickerObj.value; 

  } 

  function destroy() { 

    datePickerObj.destroy(); 

  } 

  function write(args) { 

      datePickerObj = new ej.calendars.DatePicker({ 

      value: new Date(args.rowData[args.column.field]), 

      floatLabelType: 'Never' 

    }); 

    datePickerObj.appendTo(elem); 

} 

</script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridMvc-editparams-template1802180562  

Documentation: https://ej2.syncfusion.com/16.1.32/aspnet/documentation/base/intl.html?syntax=razor#supported-format-string  

Regards, 

R.Dhivya 

[Aaron Khan]

Query1:  Is there a way to make it so that the numericedit doesn't allow decimals? 

Thanks this answer worked perfectly.

Query2: Also is there a way to have create a custom edit field for a column? 

 

This is not working for me I keep getting an error:

edit-renderer.js:117 Uncaught TypeError: s.edit.create is not a function

    at e.getEditElements (edit-renderer.js:117)

    at e.update (edit-renderer.js:32)

    at t.e.startEdit (normal-edit.js:88)

    at t.startEdit (inline-edit.js:38)

    at e.startEdit (edit.js:137)

    at t.e.dblClickHandler (normal-edit.js:31)

    at e.notify (observer.js:70)

    at t.notify (component.js:173)

    at t.dblClickHandler (grid.js:2184)

[Dhivya Rajendran]

Hi Aaron, 

Thanks for your update. 

We have validated the reported problem. We have provided window support from v16.1.34. Hence you can either upgrade to the latest version to resolve this issue or use the below code example to achieve custom edit field for a column in your current version.  

 

In the below sample we have assign column.edit property value in load event.  Kindly refer the below code and sample for more information. 

<div> 

@Html.EJS().Grid("Grid").Load("load").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

  . . . . 

 col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("130").Format("yMd").Add(); 

 

}).AllowPaging().Locale("es-AR").PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

</div> 

<script> 

  function load() { 

    this.columns[5].edit = {       // assign edit template for OrderDate column 

      create: function () { 

        elem = document.createElement('input'); 

        return elem; 

      }, 

      read: function () { 

        return datePickerObj.value; 

      }, 

      destroy: function () { 

        datePickerObj.destroy(); 

      }, 

      write: function (args) { 

        datePickerObj = new ej.calendars.DatePicker({ 

        value: new Date(args.rowData[args.column.field]), 

        floatLabelType: 'Never' 

       }); 

       datePickerObj.appendTo(elem); 

     } 

    } 

  } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvc-edittemplate-1756993075  

Please get back to us if you need further assistance. 

Regards, 

R.Dhivya 

[Aaron Khan]

Thanks this solved my issue.

[Dhivya Rajendran]

Hi Aaron, 

 

We are glad to hear that your issue has been resolved. Please get back to us if you need further assistance. 

 

Regards, 

R.Dhivya