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

RadComboBox OnClick In RadSlidingPane Fires RadGrid OnRowSelected

1 Answer 89 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Ryan Means
Top achievements
Rank 1
Ryan Means asked on 12 Feb 2010, 09:43 PM
I have a RadComboBox in a RadSlidingPane and a RadGrid in RadPane.  The RadGrid has a javascript method bound to the OnRowSelected ClientEvent and the AllowRowSelect Selecting setting is set to true.  By clicking on a row in the Grid then I open a rad window.  That part is not important, but I just wanted to point it out.  What is happening is when the RadSlidingPane is slid open "Expanded" over the RadGrid and I click on the RadComboBox somewhere between the text in the ComboBox and the drop down arrow it causes the OnRowSelected event of the grid to fire, thus opening my RadWindow.  I am trying to figure out how to either make the area between the text and the drop down arrow of the RadComboBox not "transparent" through to the grid, or disable the AllowRowSelect of the grid while the RadSlidingPane is open.  I have already tried to set a flag indicating that the SlidingPane is expanded and when the OnRowSelected method is called just not execute the code.  However, the ComboBox does not drop down.

<script language="javascript">  
 
            var timerSettingUser = true;  
 
            function GetTimer()  
            {  
                return $find('<%= tmrQueueList.ClientID %>');  
            }  
 
            function StartTimer()  
            {  
                if (timerSettingUser)  
                {  
                    var timer = GetTimer();  
                    timer.set_enabled(true);  
                    timer._startTimer();  
 
                    var btn = $get('<%= lbtnSetAutoRefresh.ClientID %>');  
                    btn.innerText = "Off";  
                }  
            }  
 
            function StopTimer()  
            {  
                var timer = GetTimer();  
                timerSettingUser = timer.get_enabled();  
 
                if (timerSettingUser)  
                {  
                    timer.set_enabled(false);  
                    timer._stopTimer();  
 
                    var btn = $get('<%= lbtnSetAutoRefresh.ClientID %>');  
                    btn.innerText = "On";  
                }  
            }  
 
            function DeselectAllRows()  
            {  
                var grid = $find("<%= rgQueueList.ClientID %>");  
                var masterTable = grid.get_masterTableView();  
                masterTable.deleteSelectedItems();  
            }  
 
            function QueueRowSelected(sender, args)  
            {  
                StopTimer();  
                var pkQueue = args.getDataKeyValue("pkQueue");  
                var title = args.getDataKeyValue("JobScheduleDescription");  
                var win = radopen("view_jobqueue.aspx?pkqueue=" + pkQueue, "rwViewQueueItem");  
                if (title != null)  
                    win.set_title(title);  
                win.setSize(700, 600);  
                win.center();  
            }  
 
            function WindowClosed(sender, args)  
            {  
                StartTimer();  
                DeselectAllRows();  
            }  
 
            function QueueItemCheckChanged(cb)  
            {  
                for (var i = 0; i < QueueItemCBIDs.length; i++)  
                {  
                    document.getElementById(QueueItemCBIDs[i]).checked = cb.checked;  
                }  
            }  
 
            function SplitterLoaded(splitter, arg)  
            {  
                var pane = splitter.getPaneById('<%= rpContent.ClientID %>');  
                var height = pane.getContentElement().scrollHeight;  
                splitter.set_height(height);  
                pane.set_height(height);  
            }  
 
        </script> 
<h1> 
        Queue Manager</h1> 
    <rad:RadSplitter ID="rsQueueManager" runat="server" Width="100%" OnClientLoaded="SplitterLoaded">  
        <rad:RadPane ID="rpSidebar" runat="server" Scrolling="None" Width="22px">  
            <rad:RadSlidingZone ID="rszSidebar" runat="server" Width="22px">  
                <rad:RadSlidingPane ID="rspSidebar" Title="Settings" runat="server" Width="300px">  
                    <rad:RadAjaxLoadingPanel ID="ralpSearchSettings" runat="server">  
                    </rad:RadAjaxLoadingPanel> 
                    <rad:RadAjaxPanel ID="rapSearchSettings" runat="server" LoadingPanelID="ralpSearchSettings">  
                        <asp:Panel ID="pnlSearchSettings" runat="server" DefaultButton="btnSearch">  
                            <h2> 
                                Search Settings:</h2> 
                            <table class="PropertyTable">  
                                <tr> 
                                    <td>Search For:</td> 
                                    <td> 
                                        <asp:TextBox ID="txtSearchFor" runat="server"></asp:TextBox></td>  
                                </tr> 
                                <tr> 
                                    <td>Search By:</td> 
                                    <td> 
                                        <rad:RadComboBox ID="rcbSearchBy" runat="server" Width="120px">  
                                            <Items> 
                                                <rad:RadComboBoxItem Text="Queue ID" Value="QueueID" Selected="true" /> 
                                                <rad:RadComboBoxItem Text="Job Name" Value="JobName" /> 
                                                <rad:RadComboBoxItem Text="Job Type" Value="JobType" /> 
                                                <rad:RadComboBoxItem Text="Schedule" Value="Schedule" /> 
                                                <rad:RadComboBoxItem Text="Worker" Value="Worker" /> 
                                                <rad:RadComboBoxItem Text="Result" Value="Result" /> 
                                            </Items> 
                                        </rad:RadComboBox> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>Start Date:</td> 
                                    <td> 
                                        <rad:RadDateTimePicker ID="rdtpStartDate" runat="server" /> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>End Date:</td> 
                                    <td> 
                                        <rad:RadDateTimePicker ID="rdtpEndDate" runat="server" /> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>Status:</td> 
                                    <td> 
                                        <rad:RadComboBox ID="rcbStatus" runat="server" Width="100px">  
                                            <Items> 
                                                <rad:RadComboBoxItem Text="All" Value="0" /> 
                                                <rad:RadComboBoxItem Text="Scheduled" Value="1" /> 
                                                <rad:RadComboBoxItem Text="Processing" Value="2" /> 
                                                <rad:RadComboBoxItem Text="Success" Value="3" /> 
                                                <rad:RadComboBoxItem Text="Failed" Value="4" /> 
                                                <rad:RadComboBoxItem Text="Rescheduled" Value="5" /> 
                                                <rad:RadComboBoxItem Text="Hold" Value="6" /> 
                                            </Items> 
                                        </rad:RadComboBox> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>Processed By:</td> 
                                    <td> 
                                        <rad:RadComboBox ID="rcbProcessedBy" runat="server" Width="100px" /> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>Job:</td> 
                                    <td> 
                                        <rad:RadComboBox ID="rcbJob" runat="server" AutoPostBack="true" /> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td>Schedule:</td> 
                                    <td> 
                                        <rad:RadComboBox ID="rcbJobSchedule" runat="server" AutoPostBack="true" /> 
                                    </td> 
                                </tr> 
                            </table> 
                            <asp:Button ID="btnSearch" runat="server" Text="Search" onclick="btnSearch_Click" /> 
                        </asp:Panel> 
                    </rad:RadAjaxPanel> 
                    <h2> 
                        Configure Jobs</h2> 
                    Change Status:  
                    <rad:RadComboBox ID="rcbUpdateStatus" runat="server" MarkFirstMatch="False" AllowCustomText="False" Width="110" Height="130" AutoPostBack="False" EnableLoadOnDemand="False" HighlightTemplatedItems="True">  
                        <Items> 
                            <rad:RadComboBoxItem Text="Hold" Value="6" /> 
                            <rad:RadComboBoxItem Text="Resume" Value="7" /> 
                            <rad:RadComboBoxItem Text="Delete" Value="8" /> 
                            <rad:RadComboBoxItem Text="Failed" Value="4" /> 
                            <rad:RadComboBoxItem Text="Rescheduled" Value="5" /> 
                            <rad:RadComboBoxItem Text="Run Now" Value="10" /> 
                        </Items> 
                    </rad:RadComboBox> 
                    <asp:Button ID="btnUpdateStatus" runat="server" Text="Update Status" onclick="btnUpdateStatus_Click" /> 
                </rad:RadSlidingPane> 
            </rad:RadSlidingZone> 
        </rad:RadPane> 
        <rad:RadPane ID="rpContent" runat="server">  
            <div style="padding: 5px">  
                <asp:Panel ID="pnlQueueManager" runat="server">  
                    <div style="background-color: #F4F4F4; border-top: solid 1px #E5E5E5; border-bottom: solid 1px #BBBBBB; border-right: solid 1px #BBBBBB; border-left: solid 1px #E5E5E5">  
                        <table cellpadding="0" cellspacing="0" width="100%">  
                            <tr> 
                                <td width="220">Change Status: </td> 
                                <td width="230">  
                                    <rad:RadToolBar ID="rtbQueueManager" runat="server" AutoPostBack="true" ImagesDir="~/Resources/Images">  
                                        <Items> 
                                            <rad:RadToolBarButton ID="rtbbUpdateStatus" CommandName="UpdateStatus" Text="Apply" ImageUrl="~/Resources/Images/apply.png" /> 
                                            <rad:RadToolBarButton ID="rtbbSearch" CommandName="Search" Text="Search / Refresh" ImageUrl="~/Resources/Images/search.png" /> 
                                        </Items> 
                                    </rad:RadToolBar> 
                                </td> 
                                <td align="right" style="padding-right: 5px" nowrap>Turn Auto Refresh:  
                                    <asp:LinkButton ID="lbtnSetAutoRefresh" runat="server">Off</asp:LinkButton></td>  
                            </tr> 
                        </table> 
                    </div> 
                </asp:Panel> 
                <br /> 
                <rad:RadAjaxLoadingPanel ID="ralpQueueList" runat="server" /> 
                <rad:RadAjaxPanel ID="rapQueueList" runat="server" LoadingPanelID="ralpQueueList">  
                    <asp:Timer ID="tmrQueueList" runat="server" Interval="60000" /> 
                    <rad:RadGrid ID="rgQueueList" runat="server" AutoGenerateColumns="False" AllowPaging="true" AllowSorting="true" OnItemDataBound="rgQueueList_ItemDataBound" OnNeedDataSource="rgQueueList_NeedDataSource" ShowGroupPanel="true">  
                        <MasterTableView DataKeyNames="pkQueue" ClientDataKeyNames="pkQueue, JobScheduleDescription" GroupLoadMode="Client">  
                            <Columns> 
                                <rad:GridTemplateColumn> 
                                    <ItemTemplate> 
                                        <asp:CheckBox ID="cbSelectQueueItem" runat="server" /> 
                                    </ItemTemplate> 
                                    <HeaderTemplate> 
                                        <asp:CheckBox ID="cbSelectQueueItem" runat="server" /> 
                                    </HeaderTemplate> 
                                </rad:GridTemplateColumn> 
                                <rad:GridBoundColumn DataField="pkQueue" HeaderText="ID" UniqueName="pkQueue" /> 
                                <rad:GridBoundColumn DataField="RunOn" HeaderText="Run On" UniqueName="RunOn" /> 
                                <rad:GridBoundColumn DataField="RunTime" HeaderText="Run Time" UniqueName="RunTime" /> 
                                <rad:GridBoundColumn DataField="JobName" HeaderText="Job" UniqueName="JobName" /> 
                                <rad:GridBoundColumn DataField="JobScheduleDescription" HeaderText="Schedule" UniqueName="JobScheduleDescription" /> 
                                <rad:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status" /> 
                                <rad:GridBoundColumn DataField="NumberOfRetries" HeaderText="Retries" UniqueName="NumberOfRetries" /> 
                                <rad:GridBoundColumn DataField="ProcessedBy" HeaderText="Processed By" UniqueName="ProcessedBy" /> 
                                <rad:GridBoundColumn DataField="IsActive" HeaderText="Active" UniqueName="IsActive" /> 
                                <rad:GridTemplateColumn HeaderText="Dependent">  
                                    <ItemTemplate> 
                                        <%# ((int)Eval("fkParent") == 0) ? "No" : String.Format("On {0}", Eval("fkParent")) %> 
                                    </ItemTemplate> 
                                </rad:GridTemplateColumn> 
                            </Columns> 
                            <ItemStyle CssClass="ClickableRow GridRow_Default" /> 
                            <AlternatingItemStyle CssClass="ClickableRow GridRow_Default" /> 
                            <PagerStyle Mode="Slider" /> 
                        </MasterTableView> 
                        <ClientSettings AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">  
                            <ClientEvents OnRowSelected="QueueRowSelected" /> 
                            <Selecting AllowRowSelect="true" /> 
                        </ClientSettings> 
                        <GroupingSettings ShowUnGroupButton="true" /> 
                    </rad:RadGrid> 
                    <div class="HorizontalButtonList">  
                        Errors per page:  
                        <rad:RadComboBox ID="rcbPageSize" runat="server" MarkFirstMatch="True" AllowCustomText="False" Width="60" Height="140" AutoPostBack="True" EnableLoadOnDemand="False" HighlightTemplatedItems="True" OnSelectedIndexChanged="rcbPageSize_SelectedIndexChanged">  
                            <Items> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem1" Text="10" Value="10" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem2" Text="15" Value="15" Selected="True" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem3" Text="20" Value="20" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem4" Text="25" Value="25" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem5" Text="30" Value="30" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem6" Text="50" Value="50" runat="server" /> 
                                <rad:RadComboBoxItem ID="RadComboBoxItem7" Text="100" Value="100" runat="server" /> 
                            </Items> 
                        </rad:RadComboBox> 
                    </div> 
                </rad:RadAjaxPanel> 
            </div> 
        </rad:RadPane> 
    </rad:RadSplitter> 
    <rad:RadWindowManager ID="rwmQueueManager" runat="server" DestroyOnClose="true" Modal="true" Style="z-index: 7001" OnClientClose="WindowClosed" /> 
    <rad:RadAjaxManager ID="ramMain" runat="server">  
    </rad:RadAjaxManager> 

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Feb 2010, 12:33 PM
Hi Ryan,

This is a known issue with IE8. The events pass through the input and are fired for the elements beneath. If you are not using IE8 then this might be a different problem.

We have actually fixed it in the latest version (Q3 SP2) and our fix covers most scenarios except for when the combo box is not initially visible. In this case you must execute the following code when the control becomes visible, for example in the expanded event of the sliding pane:

function paneExpanded(sender, args) {
    setTimeout ( function () {
        var $ = $telerik.$;
        $('.rcbFakeInput').each( function() {
            var el = $(this);
            var prev = el.prev()[0];
            el
                .width(prev.offsetWidth)
                .height(prev.offsetHeight)
                .css('left', ~~prev.offsetLeft + 2)
                .css('top', prev.offsetTop);
        });
    }, 10);
}

We'll make sure to expose a public repaint method that will do the dirty work for you.

I hope this helps.

Greetings,
Tsvetomir Tsonev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
ComboBox
Asked by
Ryan Means
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or