How to execute a JS Function on Rad RibbonBarButton click

3 posts, 0 answers
  1. Saifulla
    Saifulla avatar
    15 posts
    Member since:
    Sep 2018

    Posted 08 Oct 2018 Link to this post

    Hi, i am trying to generate a dynamic table based on user input. For that i am using Ribbonbar.

    Markup:

    <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" Skin="Office2007" EnableMinimizing="true" OnClientButtonClicked="CreateTable() return false;">
    <telerik:RibbonBarTab Text="Home">
        <telerik:RibbonBarGroup Text="Table Generator">
            <Items>
                    <telerik:RibbonBarControlGroup Orientation="Horizontal">
                        <Items>
                            <telerik:RibbonBarComboBox ID="txtRow" Width="60" runat="server">
                                <Items>
                                    <telerik:RibbonBarListItem Text="0" Selected="true" />
                                    <telerik:RibbonBarListItem Text="2" />
                                    <telerik:RibbonBarListItem Text="4" />
                                    <telerik:RibbonBarListItem Text="6" />
                                    <telerik:RibbonBarListItem Text="8" />
                                    <telerik:RibbonBarListItem Text="10" />
                                    <telerik:RibbonBarListItem Text="12" />
                                    <telerik:RibbonBarListItem Text="14" />
                                    <telerik:RibbonBarListItem Text="16" />
                                    <telerik:RibbonBarListItem Text="18" />
                                    <telerik:RibbonBarListItem Text="20" />
                                </Items>
                            </telerik:RibbonBarComboBox>
     
                            <telerik:RibbonBarComboBox ID="txtCol" Width="60" runat="server">
                                <Items>
                                    <telerik:RibbonBarListItem Text="0" Selected="true" />
                                    <telerik:RibbonBarListItem Text="2" />
                                    <telerik:RibbonBarListItem Text="4" />
                                    <telerik:RibbonBarListItem Text="6" />
                                    <telerik:RibbonBarListItem Text="8" />
                                    <telerik:RibbonBarListItem Text="10" />
                                    <telerik:RibbonBarListItem Text="12" />
                                    <telerik:RibbonBarListItem Text="14" />
                                    <telerik:RibbonBarListItem Text="16" />
                                    <telerik:RibbonBarListItem Text="18" />
                                    <telerik:RibbonBarListItem Text="20" />
                                </Items>
                            </telerik:RibbonBarComboBox>
                             <telerik:RibbonBarButton ID="btnGenerate" runat="server" Text="Create" />
                        </Items>
                    </telerik:RibbonBarControlGroup>
            </Items>
        </telerik:RibbonBarGroup>

    Script:

       function createTable() {
            var rowCtr;
            var cellCtr;
            var rowCnt;
            var cellCnt;
     
            var myTableDiv = document.getElementById("myDynamicTable");
     
            var table = document.createElement('TABLE');
            table.border = '1';
            table.id = "myTable";
     
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);
     
            rowCnt = document.getElementById('txtrows').value;
            cellCnt = document.getElementById('txtcols').value;
     
            for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);
     
                for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('TD');
                    td.width = '120';
                    td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
    }

    OnClick of button(create) dynamic table should generate. but not happening can some one suggest what i had done wrong.

     

  2. Saifulla
    Saifulla avatar
    15 posts
    Member since:
    Sep 2018

    Posted 09 Oct 2018 Link to this post

    I got it what i am doing wrong. Now its works fine. But i am not able to access Combobox text values based on ID, so i am trying with "OnClientComboBoxTextChanged" it works well but every time text changes alert is displaying. 

    var getValue = null;
    function OnClientComboBoxTextChanged(sender, args) {
        
        getValue = args.get_comboBox().get_text();
         alert("ComboBox text: " + getValue);
    }

    How can i re write code to save the text change value without alert.

  3. Peter Milchev
    Admin
    Peter Milchev avatar
    599 posts

    Posted 11 Oct 2018 Link to this post

    Hello Saifulla,

    The OnClientTextChange event of the ComboBox receives 2 arguments, the first is the ComboBox that fired the event and the second one is an object with 2 methods - get_domEvent and set_cancel.  

    In the event handler, in your case the OnClientComboBoxTextChanged function, the "sender" is the ComboBox and you can use the ComboBox client-side API to get the text of the ComboBox.

    <script>   
        function OnClientComboBoxTextChanged(sender, args) {
            var combobox = sender;
            var textInComboBoxInput = combobox.get_text();
                 // your logic here...
        }
    </script>

    <telerik:RadComboBox ID="RadComboBox1" AllowCustomText="true"
        OnClientTextChange="OnClientComboBoxTextChanged" runat="server" RenderMode="Lightweight">
        <Items>
            <telerik:RadComboBoxItem Text="Item 1" />
            <telerik:RadComboBoxItem Text="Item 2" />
            <telerik:RadComboBoxItem Text="Item 3" />
            <telerik:RadComboBoxItem Text="Item 4" />
        </Items>
    </telerik:RadComboBox>

    Also, I can recommend you review the updated First Steps with UI for ASP.NET AJAX section of the documentation to get more familiar with how our controls work.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top