RadSignature: Lack of server-side features

[Matthias]

Hi,

I was very pleased to see the addition of the RadSignature-control to the Telerik UI for ASP-NET AJAX suite, however there are some functionalities, which we would require to properly make use of this control.

1. If one wants to read the resulting signature server-side (after a button-click / form submission), one kind of has to work with a lot of javascript and hidden input fields to transfer the base64-encoded png towards the server. It would be way nicer, if you could provide the content of the signature as a server-side property of the RadSignature-control (during post-back).
2. Relating to 1.: I've managed to use the client-event OnChange to write a hidden field each time the signature changes, but there's no event to hook in case of a reset; therefore I cannot detect resets to reset the value of the hidden field. (And let's just say, it's infeasible to us to read the signature-content on form submission because of dynamically generated controls.) Thus I cannot use the built-in reset button, but I would have to implement it myself to be able to reset the hidden field and the signature-control at the same time (using the js-method "reset" of the kendo widget).
   
3. If one opens a dialog/window containing a RadSignature-control and resizes the dialog (e.g. make it twice as large) then the position of the cursor on the canvas does not match the position of the strokes anymore. Painting in the top-left corner is sort of okay/close, but the further one moves the cursor towards the bottom-right, the bigger the offset will be.
4. It would be great, if the control would provide functionality to validate for mandatory user input. I.e. I (as a developer) don't want to have to memorize/manage a variable focusedSignatureDefaultContent (c.f. docs for RadSignature) for each RadSignature-control I want to put on a page. Best case, the RadSignature control manages this data for me and I can either read a boolean to determine if its contents have changed (client- and especially server-side).

And some other bugs, I've stumbled upon (- which are not as relevant to us):

• If you paint a stroke on the canvas, then "maximize" the RadSignature-control (effectively zooming in on the control) and then paint a second stroke, you'll see that those strokes will have a different line width; the second one being bigger.
• If you repeatedly maximize/minimize the RadSignature control and draw a stroke each time on the bottom of the canvas, then the resulting image will get distorted.

If you need any further information on any of those topics, feel free to ask.

Kind regards,
Matthias

[Doncho]

Hi Matthias,

Thank you for this detailed and extremely useful feedback!

Your effort in evaluating the Control and listing all these points is greatly appreciated. I will try to address each one of them separately:

1. Pass the Signature's Value to the server:

The value of the RadSignature component is not persisted across postbacks by design. The RadSignature is a wrapper over the entirely client-side Kendo jQuery Signature Widget. We have decided not to store its value in the state (not to be persistent over postbacks) because the value is usually holding a quite big base64string that would need to be carried back and forth with each server request. This would distort the user experience.

As you already mentioned, a possible solution is to store the value in an asp:HiddenField. A similar approach is used in this Demo.

On the other hand, I find your request valid and we have already received similar questions. I am logging it in our Feedback Portal so our developers can evaluate it for future implementation:

https://feedback.telerik.com/aspnet-ajax/1608718-persist-the-value-of-the-signature-to-the-server 

2. Expose a client-side event that is triggered when the Signature Value is cleared(reset).

Currently, neither the RadSignature nor the Kendo Signature Widget beneath are exposing events related to clicking the clear button.

What you can do is use the load event of the RadSignature to reach the DOM element representing the Clear button ('X') and subscribe to its native click event:

<script>
    function signatureLoad(sender, args) {
        $signatureElement = $telerik.$(sender.get_element());
        $clearButton = $signatureElement.find('.k-signature-clear');
        $clearButton.click(function () {
            alert("Clear Signature clicked");
        })
    }
</script>
<telerik:RadSignature runat="server" ID="RadSignature1">
    <ClientEvents OnLoad="signatureLoad" />
</telerik:RadSignature>

I am logging this request in the Kendo Feedback portal as it is related to the implementation of the Kendo Signature Widget. Once such an event is exposed by the Widget we will also port the functionality to the server-side RadSignature Control:

https://feedback.telerik.com/kendo-jquery-ui/1608720-add-clear-or-reset-event-that-fires-when-signature-is-cleared-with-its-built-in-clear-button 

3. Dynamically changing the size of the Signature by changing the size of the viewport leads to the misplacement of the stroke.

I was able to replicate the behavior both with the Kendo Signature and the RadSignature and I am logging it as a bug in the Kendo portal so it can be further researched by the developers:

https://feedback.telerik.com/kendo-jquery-ui/1608722-changing-the-size-of-the-signature-by-changing-the-size-of-the-viewport-leads-to-the-misplacement-of-the-stroke 

4. Improve the Validation capabilities

I agree with you that the currently suggested approaches for validating the Signature are not straightforward and intuitive. Improvement in this direction will ease the usage of the Control.

I am logging this as a feature request in the Kendo Portal as it comes with the Widget implementation.

https://feedback.telerik.com/kendo-jquery-ui/1608724-focusing-the-signature-changes-its-value-to-a-certain-base64string-which-makes-validation-of-the-widget-tricky 

Additional issues

I believe both of the described issues stem from the same bug in the RadSignature control. I was able to replicate the problem with the RadSignature for ASP.NET AJAX but not with the Kendo Widget. It seems the problem is in the implementation of the server-side wrapper.

This one is now logged as a bug in the Telerik ASP.NET AJAX feedback portal.

https://feedback.telerik.com/aspnet-ajax/1608725-different-stroke-width-when-signing-in-maximized-signature-pad 

I created all the public items on your behalf. Having them in the feedback portals will allow other developers facing similar issues to find them easily and vote for their sooner implementation. The issues need to be triaged and evaluated by our developers and at the moment I cannot commit to any estimation for their further handling. I would suggest you follow the items to get notified of future updates.

As an act of gratitude for your valuable feedback and contribution to our products, I have updated your Telerik Points.

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

[Matthias]

Hi Doncho,

thanks so much for your detailed response and the logging of all the bugs and feature-requests.

Just one final remark regarding item (2):
Thanks for supplying the code snippet. I am aware of the possibilities of using JavaScript to interact with the DOM. But just to illustrate my point of it being not very user/programmer-friendly: For each RadSignature-control I'd have to add an ASP:HiddenField to transmit the base64 data to the server and additionally I'd need to modify the signatureLoad-event in a way that it resets the correct HiddenField (otherwise I'd have to add functions signatureLoad1, signatureLoad2, ... which in turn would reset the proper HiddenField for their corresponding RadSignature). Surely it's possible, but a lot of hassle.

Kind regards,
Matthias

[Doncho]

Hi Matthias,

I understand the concern and the point is completely valid.

Looking at the feature requests, it seems that If a Clear event is exposed along with the option to persist the Value of the Signature on the server, the current issue will be eliminated.

One idea to avoid multiple event handlers for the same procedure is to pass the id of the corresponding hidden field added as a parameter to the event handler:

<script>
    function signatureLoad(sender, args, hiddenField) {
        $signatureElement = $telerik.$(sender.get_element());
        $clearButton = $signatureElement.find('.k-signature-clear');
        $clearButton.click(function () {
            var signature = sender;
            var hf = $get(hiddenField);
            alert("Clear Signature clicked");
        })
    }
</script>

<telerik:RadSignature runat="server" ID="RadSignature1">
    <ClientEvents OnLoad="function(sender,args){signatureLoad(sender,args,'HiddenField1')}" />
</telerik:RadSignature>

<asp:HiddenField runat="server" ID="HiddenField1" />

I understand that this is surely not the most convenient approach to use but I am sharing it just as an option to consider.

[Matthias]

Hi Doncho,

thanks again for your valuable input.

Having a structure of
Page containing asp:Repeater containing SomeControl1 containing SomeControl2 maybe containing Rad:Signature
certainly does not make it easier to work with all the required validation and data-transmission. Additionally we're required to work with the ClientIDs of those controls, which, if I remember correctly, won't allow us to declare the client-side OnLoad-event within the markup.

Surely, all of the mentioned hurdles can be circumvented using code-behind or even more JS, but it's quite a bit of hassle, which we wouldn't need to care about if those features were available out of the box - as you yourself have confirmed. ;-)

Kind regards,
Matthias