A textbox, serial port data capture, and Ajax

6 posts, 0 answers
  1. Jeff
    Jeff avatar
    6 posts
    Member since:
    Mar 2013

    Posted 13 Oct Link to this post

    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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 14 Oct Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    6 posts
    Member since:
    Mar 2013

    Posted 14 Oct in reply to Marin Bratanov Link to this post

    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.

     

     

  5. Jeff
    Jeff avatar
    6 posts
    Member since:
    Mar 2013

    Posted 14 Oct in reply to Jeff Link to this post

    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.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 14 Oct Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Jeff
    Jeff avatar
    6 posts
    Member since:
    Mar 2013

    Posted 17 Oct in reply to Marin Bratanov Link to this post

    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.

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017