Inline Grid Numeric Textbox Validation

[KALPATHARU]

Hi,

"edittype"  property  is not working when I use "edit" property for columns in Inline grid. And  I need to achieve the following

1. Default value as "00.000" 
2. Numeric text box
3. Hide Spin Button

Please help me to find a solution. 

Syncfusion Version : 19.4.0.48

Column :  rate, rateper

Sample Code :

 <ejs-grid id="Grid" style="padding:35px" dataSource="ViewBag.WasteSaleOrder" height="300" allowFiltering="true" actionBegin="actionBegin" allowSorting="true" toolbarClick="toolbarClick"

                      created="created" gridLines="Both" toolbar="@(new List<string>() { "Add","Edit","Update","Delete","Cancel" })" allowPaging="true">

                <e-grid-editSettings showDeleteConfirmDialog="true" allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Bottom"></e-grid-editSettings>

                <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>

                <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                <e-grid-columns>

                    <e-grid-column field="wastecode" headerText="Waste Code" editType="dropdownedit" dataSource="ViewBag.wastecode" isPrimaryKey="true" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" validationRules="@(new { required=true})" width="200"></e-grid-column>

                    <e-grid-column field="wastename" headerText="Waste Name" width="280"></e-grid-column>

                    <e-grid-column field="packtype" headerText="Pack Type" edit="@(new {create = "createpack", destroy = "destroypack", write = "writepack"})" validationRules="@(new { required=true})" width="250"></e-grid-column>

                    <e-grid-column field="packid" headerText="PackID" width="195" ></e-grid-column>

                    <e-grid-column field="packs" headerText="Packs" edittype="NumericEdit" format="C2" validationRules="@(new { required=true,number = true})" width="280" > </e-grid-column>

                    <e-grid-column field="netkgs" headerText="Net Kgs" edittype="NumericEdit" edit="@(new { create = "createtotalkgs",write = "gentotalnetkgs" })" validationRules="@(new { required=true,number = true})" width="280"></e-grid-column>

                    <e-grid-column field="rate" headerText="Rate" edittype="NumericEdit" edit="@(new { create = "createrate",write ="gentotalrate" })" validationRules="@(new { required=true,number = true})" width="280"></e-grid-column>

                    <e-grid-column field="rateper" headerText="Rate Per" edittype="NumericEdit" width="175" validationRules="@(new { number = true})"></e-grid-column>

                    <e-grid-column field="delfromdate" headerText="Del From Date" format="dd/MM/yyyy" editType="datePickerEdit" width="195"></e-grid-column>

                    <e-grid-column field="deltodate" headerText="Del To Date" format="dd/MM/yyyy" editType="datePickerEdit" width="195"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

Thanks,

Siranjeevi V

[Rajapandi Ravi]

Hi KALPATHARU,

Greetings from Syncfusion support

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

@{

    var ddParams = new { @@params = new { value = "00.000", format = "00.000" } };

}

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="complete" height="135" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>

    <e-grid-columns>

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

        <e-grid-column field="Freight" edit=ddParams headerText="Freight" textAlign="Right" editType="numericedit" width="120"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<script>

    function complete(args) { //actionComplete event of Grid

        if (args.requestType === "beginEdit") {

            args.form.querySelector('.e-numerictextbox').ej2_instances[0].showSpinButton = false;

        }

    }

</script>

 

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

API: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete

Regards,

Rajapandi R