How to execute a JS Function on Rad RibbonBarButton click

[Saifulla]

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.

 

[Saifulla]

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.

[Peter Milchev]

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