This is a migrated thread and some comments may be shown as answers.

How to execute a JS Function on Rad RibbonBarButton click

2 Answers 12 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Saifulla
Top achievements
Rank 1
Saifulla asked on 08 Oct 2018, 12:51 PM

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 Answers, 1 is accepted

Sort by
0
Saifulla
Top achievements
Rank 1
answered on 09 Oct 2018, 11:19 AM

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.

0
Peter Milchev
Telerik team
answered on 11 Oct 2018, 02:10 PM
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.
Tags
RibbonBar
Asked by
Saifulla
Top achievements
Rank 1
Answers by
Saifulla
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or