How to modify the automatic generated javascript in onchange method?

[Angela]

Hi,

I created a Rad Grid dynamically in the VB code behind.  Following the procedures in programmatic creation of RadGrid.  There are TextBox control in the GridTemplateColumn.  I also defined a GridTemplate class with the InstantiateIn method in it.  I added the event handler for TextChanged event.  I also set the EnableAjax flag of the RadGrid and the AutoPostBack flag of the TextBox to be true.  The update of the TextBox works totally fine with the ajaxified feature.

I tried to do a view source after the page is loaded and the TextBox is defined like this:
<input name="_ctl0:ContentPlaceHolder1:_ctl11:_ctl1:_ctl4:txt" type="text" value="90.00" onchange="javascript:setTimeout('RadGridNamespace.AsyncRequest(\'_ctl0$ContentPlaceHolder1$_ctl11$_ctl1$_ctl4$txt\',\'\', \'_ctl0_ContentPlaceHolder1__ctl11\', event)', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" language="javascript" id="_ctl0_ContentPlaceHolder1__ctl11__ctl1__ctl4_txt" style="width:70px;text-align:right;" />

Now, my question is, how can I add a javascript function in the "onchange" event of the TextBox?  My goal is to use that javascript function to validate the text in the TextBox first, if everything is correct, then move to the TextBox.TextChanged event in the code behind. Is it possible to do something like this after the page is loaded?

<input name="_ctl0:ContentPlaceHolder1:_ctl11:_ctl1:_ctl4:txt" type="text" value="90.00" onchange="javascript:if validateTextBox() then {setTimeout('RadGridNamespace.AsyncRequest(\'_ctl0$ContentPlaceHolder1$_ctl11$_ctl1$_ctl4$txt\',\'\', \'_ctl0_ContentPlaceHolder1__ctl11\', event)', 0)}" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" language="javascript" id="_ctl0_ContentPlaceHolder1__ctl11__ctl1__ctl4_txt" style="width:70px;text-align:right;" />

[Iana Tsolova]

Hi Angela,

Try handling the client-side event of you textbox as follows:

.cs

MyTextBox.Attributes["onchange"] = "return validateTextBox(); return false;"

javascript

<script type="text/javascript">
function validateTextBox()
{
   if(isValid)
   {
       return true;
   }
   return false;
}
</script>

Thus the server-side method will be executed only if the validation in the client-side method passed successfully.

Let us know if this helps.

Greetings,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Angela]

Hi,

I tried the method you suggest.  But, I can only run the javascript code and it stops.  The server side code never get run.  Any ideas to solve this?

Thanks,
Angela

[Iana Tsolova]

Hi Angela,

Please try changing the previously suggested code as follows and check if the problem persists:

MyTextBox.Attributes["onchange"] = "if(!validateTextBox()) return false;"

Let me know how it goes.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Angela]

Hi,

I also tried modifying the code as you've suggested.  Again, only the validate javascript function is running, it cannot continue to run the server side TextChanged event.  Any ideas?

Thanks,
Angela

[Iana Tsolova]

Hello Angela,

Please find attached a sample project implementing the desired functionality. Try it on your end and let me know how it goes.

Best wishes,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Angela]

Hi,

Thanks for the sample project, but I need to create the Rad Grid and everyting in the code behind in VB.  I currently have everything done with the Instantiate in my template class which inherits from ITemplate.  That is why I am having trouble in putting the javascript onChange method together with the server side TextChanged event.  Maybe can you give an example that having the grid created in VB?  I need a javascript validation in the text box in the GridTemplateColumn before the text box's TextChanged event fires.

Thanks a lot.
Angela

[Iana Tsolova]

Hi Angela,

However your grid is created dynamically, to achieve the functionality of the example sent in my previous post, you need to:

• make the javascript function accessible - it could be placed in an external script file and referenced in the web page/control.
• and attach the onchange client event to the TextBox. You could use the following code for that purpose and place it in the InstantiateIn method, where you create the TextBox.

MyTextBox.Attributes["onchange"] = "if(!validateTextBox()) return false;"

Give it a try and let us know how it goes.

All the best,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.