1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Open dialog : If Textbox or Numeric text box Change Eevent not working

Open dialog : If Textbox or Numeric text box Change Eevent not working

I have a grid, and open dialog. Edit/New Record

I have 3 textbox (Numeric or Simple Text Box) on Open Dialog Form

Textbox 2, TextBox 3 value change basis on Textbox 1

Suppose :

So Whatever Value present in Textbox 1 then  following value will be for TextBox 2 & Textbox3

TextBox 2 =  Textbox1.Value / 5

TextBox 3 = (Textbox1.Value * 10) / Texbox2.Value 

I tried with change event but it did not work

<ejs-numerictextbox id="numeric" change="onChange()" value="120"></ejs-numerictextbox>
<script>
function onChange(args) {
alert('hi');
}
</script>
or 
<ejs-textbox id="numeric" change="onChange()" value="120"></ejs-textbox>
<script>
function onChange(args) {
alert('hi');
}
</script>

I want to know the documentation link which help me to implement advance stuff my own. The document online is either high level or very basic https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.Data.html


7 Replies 1 reply marked as answer
JO Joseph October 3, 2020 07:41 PM UTC

For reference see attached sample code and screen shot



Attachment: Edit_d8346e9c.zip

SM Shalini Maragathavel Syncfusion Team October 6, 2020 10:26 AM UTC

Hi Joseph, 

Greetings from Syncfusion Support. 

Based on your requirement you need to bind the change event for the EJ2 NumericTextbox or EJ2 Textbox in the dialog template. In the change event you need to change the value of the NumericTextbox based on the another NumericTextbox value in the Grid. 

We have created a sample and in our sample we have binded the change event to the NumericTextbox. In our sample we able to trigger the change event and we have modified the value based on the another value. 

Please find the code example: 
 
Editpartial.cshtml

<div class="e-float-input e-control-wrapper"> 
                    <ejs-numerictextbox id="percent" value="0.5" min="0" max="1" change="changehandler" step="0.01"  format="n2" floatLabelType="Auto"></ejs-numerictextbox> 
 
                </div> 
                <div class="e-float-input e-control-wrapper"> 
                    <ejs-numerictextbox id="percent1" value="0.5" min="0" max="1"  step="0.01" format="n2" floatLabelType="Auto"></ejs-numerictextbox> 
                    
                </div>



index.cshtml

<script> 
    function changehandler() { 
       
        var textbox1 = document.getElementById('percent').ej2_instances[0]; 
        var val = textbox1.value; 
        var textbox2 = document.getElementById('percent1').ej2_instances[0]; 
        textbox2.value=val+0.1; 
 
 
    } 
</script> 

Please find the  below sample for more information. 

  
Please get back to us if you need further assistance. 

Regards, 
Shalini M. 








Marked as answer
JO Joseph October 11, 2020 03:38 PM UTC

Thanks
Although I have fixed it in another way. Let me try with your  code.

JO Joseph October 11, 2020 03:53 PM UTC

Hi There,

Suggestion : If you can mention that "You need to write code in Index page instead of you Edit Partial page" than programmer jobs is quite easy.  

Do we get a in depth learning document ?  which help us to get resolved more thing by ourselves. 

Can we have such document?

Regard
Alok Saxena

SM Shalini Maragathavel Syncfusion Team October 12, 2020 12:18 PM UTC

Hi Alok, 

Thanks for the update. 

Query 1: “Although I have fixed it in another way. Let me try with your  code.” 

We are happy to hear that you have fixed the mentioned issue in another way. 

Query 2: Do we get a in depth learning document?

In Syncfusion we have documentation only for basic requirements of Grid and your requirement is a unique requirement. So, we have logged a KB task for this requirement as per your suggestion and we will publish it online as soon as possible. 

Please get back to us if you need further assistance. 
Regards, 
Shalini M. 



SI Sidhartha April 14, 2021 06:26 AM UTC

Hi,

I have a similar issue, but instead of going for edit partial can we do it in the same index.cshtml page where we have our grid ? I tried to do it by fetching the id of the input control and apply the same method you suggested, that didn't work as the id of the input was unrecognized.

Can you please provide a solution for such scenario where I won't have to go for partial view?

RR Rajapandi Ravi Syncfusion Team April 15, 2021 12:56 PM UTC

Hi Sidhartha, 

We have analyzed your query and we could see that you like to render the dialog template in same index.cshtml page. So, based on your query we have prepared a sample and achieved your requirement. Please refer the below code example and sample for more information. 

. . . . .  
    <ejs-grid id="Grid" . . . . .> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" defaultValue="" isIdentity="true" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" defaultValue="" validationRules="@(new { required=true})" width="150"></e-grid-column> 
            <e-grid-column field="EmpDetails.EmpID" headerText="Employee ID" defaultValue="" width="150"></e-grid-column> 
. . . .  
        </e-grid-columns> 
    </ejs-grid> 
 
<div id="grid"></div> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div> 
        
        <div id="edittab"></div> 
        <div id="tab1"> 
            <div class="form-row"> 
                <div class="e-float-input e-control-wrapper"> 
                    <input id="OrderID" name="OrderID" type="text" value="${OrderID}" ${if(isAdd)} ${else} disabled ${ /if} /> 
                    <span class="e-float-line"></span> 
                    <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 
                </div> 
 
            </div> 
          .  .  .  .  .  .  .  .   
          .  .  .  .  .  .  .  . 
          .  .  .  .  .  .  .  . 
    </div> 
</script> 



Regards,
Rajapandi R 


Loader.
Up arrow icon