Numeric Cell Edit customize spin icons

[Eddie Willcox]

Hi,

In my grid, I have added a column and set the EditType to "numericedit". Now I want to customize the spin up and down icons in the cell. I want to do one of the following:

1. Resize the icons
   
2. Change the icons to something else (+ and -) and possibly stack them on top of each other
3. Completely remove them from view if they cannot be customized as in options 1 an d2 above.

Is this possible?

[Ajith Govarthan]

Hi Eddie, 

thanks for contacting Syncfusion support. 

Based on your query, you want to resize the icons of the numeric edit cell textbox and also want to replace the icons with + and – icons in your Grid application. So, we have prepared sample in that we have used the CellEditTemplate feature to resize and replace the default Numerictextbox icons. For your convenience we have attached the sample please refer them for your reference. 

Code Example: 

Index.cshtml 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

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

    col.Field("Freight").HeaderText("Freight").Width("120").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add(); 

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

 

 

<script> 

    var elem; 

    var nObj; 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

    function write(args) { 

        nObj = new ej.inputs.NumericTextBox({ 

            format: 'c2', 

            created: function () { 

                var span = document.createElement("span"); 

                this.inputWrapper.container.append(span); 

                this.spinDown.className = this.spinDown.className + " " + "e-icons e-circle-remove"; 

                this.spinUp.className = this.spinUp.className + " " + "e-icons e-circle-add"; 

                span.append(this.spinUp); 

                span.append(this.spinDown); 

 

            }, 

            value: args.rowData[args.column.field], 

             

        }); 

        nObj.appendTo(elem); 

    } 

 

    function destroy() { 

        nObj.destroy(); 

    } 

    function read(args) { 

        return nObj.value; 

    } 

</script> 

 

<style> 

 

    .content-wrapper { 

        width: 35%; 

        margin: 0 auto; 

        min-width: 185px; 

    } 

 

    .e-float-input.e-numeric.e-input-group { 

        margin-top: 40px; 

    } 

 

    .control-label { 

        padding: 24px 0px 10px 0px; 

        font-size: 12px; 

    } 

 

    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { 

        margin-bottom: 0px; 

        margin-right: 0px; 

        margin-top: 0px; 

    } 

</style> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/numeric_textbox_icons1877029935.zip 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.