Get valuet from other NumericTextbox

Hello, I have a grid with 2 numericTextBox.

I use this function.

function templateRefresh(args) {

var DateTemplate = $(args.cell).find("#danado");
var DateTemplate1 = $(args.cell).find("#buenos");
$(DateTemplate).ejNumericTextbox({
value: 0,
maxValue: args.rowData["Cantidad"],
minValue: 0,
width: "80px",
change: function (argd) {
if (argd.value == null) {
argd.value = 0;
$(DateTemplate).ejNumericTextbox({ value: 0 });
}
},

I have a quantity,I want check the quantity from 2 input, example:
The quantity is 3, the input1 = 2 and input2 = 1, if I want add more input2, is not possible because the quantity is 3. Input1 + Input2 = 3, but if the input1 and input2 = 1, the can add a quantity input1 or input2.capturaeee.PNG


1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 26, 2023 10:49 AM UTC

Hi Arturo,


Greeting from Syncfusion.


As per your request, we have placed two ejNumericTextBoxes using ColumnTemplate feature of the Grid.  From the change event of ejNumericTextBox we have get the second NumericTextBox value and
compared with EmployeeID(i.e quantity value from your example) and disabled the NumericTextBox by applying enabled property as false when it clicked beyond the total value. We have apply the same procedure to the secondNumeric Textbox by comparing with its first Numeric value.


Refer to the code below:-

@*placed NumericTextboxes*@

 

<script type="text/x-jsrender" id="columnTemplate">

    <input id='Verified{{:EmployeeID}}' type='text'/>

                                                             

</script>

<script type="text/x-jsrender" id="columnTemplate1">

    <input id='Num{{:EmployeeID}}' type='text'/>

</script>

<ej-grid id="FlatGrid" allow-paging="true" template-refresh="template" datasource="ViewBag.datasource">

    <e-columns>

        <e-column field="Freight" header-text="Verified" template="#columnTemplate" width="150"></e-column>

         <e-column field="Freight1" header-text="Num" template="#columnTemplate1" width="150"></e-column>

        <e-column field="EmployeeID" header-text="Employee ID" width="90"></e-column>

                   .   .   .

     </e-columns>

</ej-grid>

 

<script type="text/javascript">

     function template(args) {

        if (args.column.field == "Freight") {

            var val = args.data["Freight"];

            $(args.cell).find("#Verified" + args.data.EmployeeID).ejNumericTextbox({

                value: val,

                width: "116px", height: "28px", decimalPlaces: 2,

                change: function (args) {

                    var empId = this.model.name.split("Verified")[1];     //Get the value of second NumericTextBox

                    var secondVal = $("#Num" + empId)[0].value;

                    var total = args.value + Number(secondVal);

                    if (total > Number(empId - 1)) {

                        args.model.enabled = false            //based on that value we have compared with EmployeeID and disabled the Numeric textbox

                    }

 

 

                },

            });

        }

        if (args.column.field == "Freight1") {

            var val = args.data["Freight1"];

            $(args.cell).find("#Num" + args.data.EmployeeID).ejNumericTextbox({ value: val, width: "116px", height: "28px", decimalPlaces: 2 });           //same above procedure can be applied here

        }

     }

</script>

 


API link of NumericText box:-

https://help.syncfusion.com/api/js/ejtextboxes#events:change

https://help.syncfusion.com/api/js/ejtextboxes#members:enabled


Please get back to us if you are facing any difficulties on this.


Regards,

Farveen sulthana T


Loader.
Up arrow icon