[SOLVED] How to properly Sub-Class an existing Wisej control and augment with JavaScript

Answered Closed
0
0

Hi,

Currently we have sub-classed many of the controls that we use. We’re looking at moving some of the code from c# to JavaScript. For example we have sub-classed the TextBox control and added a ‘SelectAllOnFocus’ Boolean property. To implement this we override the ‘OnEnter’ method and execute the ‘SelectAll’ method if appropriate. We’ve looked into the code of some of the extensions and can’t figure out the best method to use. I think we need to use the ‘Wisej Control’ extension but can’t find a minimal example. Specifically if would be nice to have a project example that shows how to properly sub-class an existing control (i.e. TextBox) that would show:

  • How to access a user-defined c# property from JavaScript
  • How to update that property from JavaScript and have it update the c# property too

I think this would be a good starting point for us. We’ve only just dabbled in JavaScript, but wouldn’t moving some of this code to the client side (e.g. KeyPress events etc) be more efficient?

Thanks for any help!
Robin

  • You must to post comments
Best Answer
0
0

Hi Robin,

please find a sample that should illustrate questions you have raised about subclassing here:

http://wisej.s3.amazonaws.com/support/attachments/Wisej.SubclassExistingControl.zip

Please let us know if you have any additional questions.

Best regards
Frank

  • You must to post comments
0
0

Hi Frank,

Great updated example.

I get a ‘WidgetError: No such property: webMethods’ when each control is rendered on the form in design mode. I fixed it by declaring a ‘webMethods’ property in the control’s .js file (webMethods: {}) or by NOT executing the ‘config.webMethods = new [] {“TestCallback”}’ line if in design mode: (if (!this.DesignMode) config.webMethods = new [] {“TestCallback”};). Which way is the ‘correct’ way to fix? Or maybe it needs to be fixed by you internally?

Thanks,
Robin.

  • Luca (ITG)
    Sorry, the correct code should be if (!((IWisejControl)this).DesignMode) { config.webMethods = … }. The webMethods field is stripped from config before creating the component at runtime.
  • Robin Lao
    Thanks Luca!
  • You must to post comments
0
0

Good catch, Robin 🙂

Please find here an updated sample that uses the technique described in the docs.

http://wisej.s3.amazonaws.com/support/attachments/Wisej.SubclassExistingControl.zip

Please make sure to update to the latest build (1.3.14).

Best regards
Frank

  • You must to post comments
0
0

Thanks Cris!

I re-read the doc and missed the part at the bottom of the page where you need to manually register any web methods for sub-classed items in OnWebRender.

Robin.

 

 

protected override void OnWebRender(dynamic config)
{
base.OnWebRender((object)config);

// change the class name.
config.className = “myapp.TextBox”;

// send the additional properties.
config.selectAllMatch = this.SelectAllMatch;

//Manually register any web methods.
config.webMethods = new[] { “CallMe” };

}

 

  • You must to post comments
0
0

Hi Robin,

Try https://wisej.com/support/question/htmlpanel-get-click as an alternate solution.

Hope this helps.

  • You must to post comments
0
0

Hi Frank,

Thanks so much for the example. It helped a lot!

Just one more thing. In your, example how would you call back into the ‘MyTextBox’ class and execute a c# method from javascript? I think you need to use the [WebMethod] attribute on the method, but what is the syntax from calling it from  ‘myapp.TextBox.js’?

e.g.:
[WebMethod]
public void CallMe(string s)
{
MessageBox.Show(s);
}

Thanks again for all your help,
Robin

 

 

  • You must to post comments
0
0

Hi Robin,

we will provide a sample on monday.

Best regards
Frank

  • You must to post comments
Showing 7 results