A textbox, serial port data capture, and Ajax

[Jeff]

Hello,

I am trying to update a radtextbox inside a radwindow with the data received from a serial port where a scale is connected.  The data is received on the serial port by a command issued from the scale.

Here is the setup of the radwindow and the radtextbox:

<telerik:RadWindow ID="RadWindowAddToSets" runat="server"
            Width="520px"
            Height="390px"
            Modal="True"
            CenterIfModal="false"
            Left="150"
            Top="20"
            OnLoad="RadWindowAddToSets_Load"
            Behaviors="Resize, Minimize, Pin, Maximize, Move, Reload">
            <ContentTemplate>
                <asp:Panel ID="PanelAddToSets" runat="server">
                    <div style="height: 40px">
                        <telerik:RadTextBox ID="RadTextBoxWeight" runat="server"
                            Width="300px"
                            AutoPostBack="True"
                            Height="20px"
                            OnTextChanged="RadTextBoxWeight_TextChanged">
                        </telerik:RadTextBox>
                        <telerik:RadButton ID="RadButtonAddToSetsOK" runat="server"
                            OnClick="RadButtonAddToSetsOK_Click"
                            Style="position: relative;"
                            Text="OK"
                            OnClientClicking="RadButtonAddToSetsOK_OnClientClicking">
                        </telerik:RadButton>
                        <telerik:RadButton ID="RadButtonAddToSetsCancel" runat="server"
                            Style="position: relative;"
                            Text="Cancel"
                            AutoPostBack="True"
                            OnClientClicking="RadButtonAddToSetsCancel_OnClientClicking">
                        </telerik:RadButton>
                    </div>
                </asp:Panel>
            </ContentTemplate>
        </telerik:RadWindow>

 

This is the code that is fired when the scale sends the data through the serial port.  Here is where I tried to update the radtextbox directly.  This seems to be working well as I see the RadTextBoxWeight.Text being populated during debugging. 

private void SerialPortOnDataReceived(object sender, SerialDataReceivedEventArgs serialDataReceivedEventArgs)
        {
            //string capturedSerial = "";
            while (_serialPort.BytesToRead > 0)
            {
                RadTextBoxWeight.Text += string.Format("{0:X2} ", _serialPort.ReadByte());
            }

 

I have tried a few things with the RadAjaxManager in attempts to display the data in the radtextbox, including using a hidden field and trying the ajaxRequestWithTarget method inside the add_load in JavaScript.  I see the the alerts, but nothing else seems to happen.

Sys.Application.add_load(WindowSerialControl);

                function WindowSerialControl() {
                    alert(form1.HiddenSerial.value);

                    if (form1.HiddenSerial.value == "Capture") {
                        alert("Inside Capture");
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                        ajaxManager.ajaxRequestWithTarget('<%= RadTextBoxWeight.UniqueID %>', '');
                    }
                }

 

I have tried multiple configurations in my testing with the radaajaxmanager.  I currently have it like this:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTextBoxWeight" UpdatePanelRenderMode="Inline" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadTextBoxWeight">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="PanelAddToSets" UpdatePanelRenderMode="Inline"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

 

I'm sure I need to trigger an Ajax request somewhere/somehow, but am lost at this point.

Any help is appreciated.

G.

[Marin Bratanov]

Hello,

When is the SerialPortOnDataReceived event fired? Is it part of a postback?

In the meantime I can suggest you look into the following approaches:

• see how to ajax-enable RadWindow contents here. It is likely that the initiator of the request is not part of the AjaxSettings collection. Thus, you can look into using an asp:UpdatePanel with UpdateMode=Conditional and call its Update() method in the SerialPortOnDataReceived event.
• use a tool like SignalR to raise a client-side event when the server-side SerialPortOnDataReceived fires. The client-side event can use JavaScript to populate the textbox.

Regards,

Marin Bratanov
Telerik by Progress

[Jeff]

Hello Marin,

There is not a postback when SerialPortOnDataReceived fires. The event is only triggered by data received from the serial com port.  Page_Init does not occur.  I was hopeful with your suggestion of using an UpdatePanel and issuing and Update() method in the SerialPortOnDataReceived event.  Unfortunately, I get the error message 'The Update method can only be called on UpdatePanel with ID 'UpdatePanelAddToSets' before Render' when the Update() is fired.  I am not familiar with this type of error, and my web-search research didn't help me any.  Here is the current partial ASP and code:

<telerik:RadWindow ID="RadWindowAddToSets" runat="server"
            Width="520px"
            Height="390px"
            Modal="True"
            CenterIfModal="false"
            Left="150"
            Top="20"
            OnLoad="RadWindowAddToSets_Load"
            Behaviors="Resize, Minimize, Pin, Maximize, Move, Reload">
                <ContentTemplate>
                    <asp:UpdatePanel ID="UpdatePanelAddToSets" runat="server"
                        UpdateMode="Conditional">
                        <ContentTemplate>
                        <div style="height: 40px">
                            <telerik:RadTextBox ID="RadTextBoxWeight" runat="server"
                                Width="300px"
                                AutoPostBack="True"
                                Height="20px"
                                OnTextChanged="RadTextBoxWeight_TextChanged">
                            </telerik:RadTextBox>
                            <telerik:RadButton ID="RadButtonAddToSetsOK" runat="server"
                                OnClick="RadButtonAddToSetsOK_Click"
                                Style="position: relative;"
                                Text="OK"
                                OnClientClicking="RadButtonAddToSetsOK_OnClientClicking">
                            </telerik:RadButton>
                            <telerik:RadButton ID="RadButtonAddToSetsCancel" runat="server"
                                Style="position: relative;"
                                Text="Cancel"
                                AutoPostBack="True"
                                OnClientClicking="RadButtonAddToSetsCancel_OnClientClicking">
                            </telerik:RadButton>
                        </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
        </telerik:RadWindow>

private void SerialPortOnDataReceived(object sender, SerialDataReceivedEventArgs serialDataReceivedEventArgs)
        {
            //string capturedSerial = "";
            while (_serialPort.BytesToRead > 0)
            {
                RadTextBoxWeight.Text += string.Format("{0:X2} ", _serialPort.ReadByte());
            }

            UpdatePanelAddToSets.Update();
        }

 

I can start looking into SignalR, which is foriegn to me, so if you have any other ideas please let me know.  I was hoping that maybe I could force Ajax from the Sys.Application.add_load JavaScript, but the ajaxManager.ajaxRequestWithTarget doesn't seem to respond there.  Is 'forced' Ajax available available on the Client-Side at this point?

Thanks in advance.

g.

 

 

[Jeff]

Hello Marin,

Please ignore my thought on using Sys.Application.add_load JavaScript as it isn't loaded after the SerialPortOnDataReceived event is triggered by the serial port activity.  I guess that makes sense without Postback.

It looks like something does need to be triggered from the SerialPortOnDataReceived event itself.

Any possible tricks to fire a partial postback with Ajax?

Thanks,

g.

[Marin Bratanov]

Hello,

I am not sure what type of event that is, but it seems it is not part of the normal postback cycle.

If you can register a script, you could invoke a postback to get the updated controls (you should use the Sys.Application.Load event as shown here).

The easier approach is to just set the textbox text with JavaScript if you can get it to run (again, use the Sys.Application.Load event and the set_value() method of the RadTextBox).

Regards,

Marin Bratanov
Telerik by Progress

[Jeff]

Hello Marin,

Thanks for the assistance.  It looks like I was travelling down the wrong path.  I need client-side serial port connectivity.  Your suggestion for SignalR was a good one, which led us to WCF as well.  We think one or both of these technologies may help us achieve what we need.

g.

 

[Ajeet]

Hello,

Please advice

I am trying to build Client Side connection to serial port which can work in offline mode, Please avoid any window dll api like RXTX for communication.

 

Regards

Ajeet