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

Strange behavior for Slider and ASP CalendarExtender inside Grid filtertemplate

3 Answers 91 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zinoviy Margovskiy
Top achievements
Rank 1
Zinoviy Margovskiy asked on 27 May 2009, 09:05 PM
Hi,

I have a grid which is using radslider and ASP CalendarExtender for filtering and observing strange style behavior in different browsers.

in Firefox and In IE6 the CalendarExtender's width when it is opened is less then expected. (in IE7 & IE8 the width is fine) Here is a picture

In IE6 the CalendarExtender does not appear correctly.  (all other browsers are fine). Here is a picture
In IE7 when I drug the slider it disappears.  Here is the picture


And here is the aspx for those controls:
   <telerik:RadGrid ID="RadGrid1" runat="server"  
        SortingSettings-EnableSkinSortStyles = "true" Skin="Office2007" Width="1800px" SortingSettings-SortedBackColor="Bisque"  
        PageSize="20" GridLines="None"  AutoGenerateColumns="False"  ShowStatusBar="true"         
        AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AllowMultiRowSelection="true" AllowMultiRowEdit="true"                 
        EnableLinqExpressions ="false" 
        OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource" OnSortCommand="RadGrid1_SortCommand"  
        OnItemDataBound="RadGrid1_ItemDataBound" OnItemCreated="RadGrid1_ItemCreated" 
        OnInit="RadGrid1_Init" OnPreRender="RadGrid1_PreRender"
        <ClientSettings EnableRowHoverStyle="true">         
            <Selecting AllowRowSelect="True" /> 
            <ClientEvents OnRowClick="RadGrid1_EnableRowEdit" OnRowCreated="RadGrid1_RowCreated" OnRowSelected="RadGrid1_RowSelected" /> 
        </ClientSettings>          
        <PagerStyle Mode="NextPrevAndNumeric" /> 
        <MasterTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" EditMode="InPlace" AllowFilteringByColumn="True" AllowCustomSorting="true" TableLayout="Fixed" CommandItemDisplay="Top"
            <CommandItemTemplate> 
            <div style="padding: 0 5px;"
                &nbsp;&nbsp;&nbsp;&nbsp; 
               <asp:LinkButton ID="cmdUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/Update.gif" alt="Update Order" /> 
                    Update Order 
               </asp:LinkButton>&nbsp;&nbsp; 
                <asp:LinkButton ID="cmdCancelUpdate" runat="server" CommandName="CancelAll" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>' OnClientClick="RemoveRowsFromEdited();" > 
                    <img style="border:0px;vertical-align:middle;" alt="" src="<%= ResolveUrl("~") %>Images/Cancel.gif" />      
                    Cancel Update                
                </asp:LinkButton>&nbsp;&nbsp; 
                                     
               <asp:LinkButton ID="cmdClearFilters" runat="server" CommandName="ClearFilters" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>' OnClick="btnShowAll_Click">  
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/cancel.gif" alt="Clear Filters" /> 
                    Clear Filters 
                </asp:LinkButton>&nbsp;&nbsp;   
               <asp:LinkButton ID="cmdOrderHistory" runat="server" CommandName="ShowOrderHistory" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/Details.gif" alt="Update Order" /> 
                    Show Order History 
               </asp:LinkButton>&nbsp;&nbsp;                            
                <asp:LinkButton id="cmdNewOrder" runat="server" CommandName="NewOrder" OnClientClick="showNewOrderMenu(event);" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/AddRecord.gif" alt="New Order" /> 
                    New... 
                </asp:LinkButton>&nbsp;&nbsp;                                
                <asp:LinkButton id="cmdDeleteOrder" runat="server" CommandName="DeleteSelected"                 
                     OnClientClick = "return radconfirm('Are you sure you want to delete these records?', event);" 
                    Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/Delete.gif" alt="Delete" /> 
                    Delete... 
                </asp:LinkButton>&nbsp;&nbsp;  
                <asp:LinkButton id="cmdPrintOrder" runat="server" CommandName="PrintOrder" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/print.gif" alt="Print Order" /> 
                    Print...                 
                </asp:LinkButton>&nbsp;&nbsp;        
                <asp:LinkButton id="cmdExportOrder" runat="server" CommandName="ExportOrder" OnClientClick="showExportOrderMenu(event);" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                    <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/xml.gif" alt="Export Order" /> 
                    Export...                 
                </asp:LinkButton>&nbsp;&nbsp;                                                         
            </div> 
            </CommandItemTemplate>             
            <Columns>                      
                 <telerik:GridTemplateColumn UniqueName="chkColumn" HeaderStyle-Width="30px" AllowFiltering="false"
                    <HeaderTemplate> 
                        <asp:CheckBox ID="chkGridAll" runat="server" OnCheckedChanged="CheckAllChanged_Click" AutoPostBack="true"/> 
                    </HeaderTemplate> 
                    <ItemTemplate>                      
                        <asp:CheckBox ID="chkGridSelectRow" runat="server" OnCheckedChanged="chkGridSelectRow_Click" AutoPostBack="true"/> 
                    </ItemTemplate> 
                 </telerik:GridTemplateColumn>   
                 <telerik:GridHyperLinkColumn UniqueName="OrderID" DataTextField="OrderID" DataNavigateUrlFields="OrderID"                                               
                                             SortExpression="OrderID"  
                                             DataNavigateUrlFormatString="ASIPortal?appCode=WOM&amp;page=OrderDetails&amp;OrderID={0}" 
                                             HeaderText="Order ID" 
                                             HeaderStyle-Width="110px" FilterControlWidth="60px" > 
                </telerik:GridHyperLinkColumn>                                
                <telerik:GridDropDownColumn UniqueName="OrderDDLType" HeaderText="Order Type" HeaderStyle-Width="140px" ReadOnly="true" 
                                            DataField="OrderTypeID" ListTextField="OrderType" ListValueField="OrderTypeID" DataSourceID="XmlDataSourceOrderTypes"  
                                            AllowFiltering="True" FilterListOptions="VaryByDataType" SortExpression="OrderType" > 
                                             
                <FilterTemplate> 
                        <telerik:RadComboBox ID="ddlOrderTypeFilter" Runat="server" Skin="Office2007" DataSourceID="XmlDataSourceOrderTypes"  
                                            DataTextField="OrderType" DataValueField="OrderTypeID"  
                                             OnClientSelectedIndexChanged="OrderTypeFilterSelectedIndexChanged"   
                                             SelectedValue='<%# CurrentOrderTypeFilterValue %>' Width="120px" />    
                           <telerik:RadScriptBlock ID="RadScriptBlockOrderType" runat="server">                             
                                <script type="text/javascript"
                                    function OrderTypeFilterSelectedIndexChanged(sender, args) { 
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
                                        var selectedValue = sender.get_value(); 
                                        if (selectedValue == "0") { 
                                            // if empty value selected then user wnats to clear filter 
                                            tableView.filter("OrderDDLType", args.get_item().get_value(), "NoFilter"); 
                                        } 
                                        else { 
                                            tableView.filter("OrderDDLType", args.get_item().get_value(), "EqualTo"); 
                                        } 
                                    } 
                                </script>              
                           </telerik:RadScriptBlock>                                                            
                </FilterTemplate>                 
                </telerik:GridDropDownColumn>                                                          
                <telerik:GridBoundColumn DataField="OrderType" HeaderText="OrderType" SortExpression="OrderType" UniqueName="OrderType" Display="false"
                </telerik:GridBoundColumn>                                              
                <telerik:GridDropDownColumn UniqueName="OrderDDLStatus" HeaderText="Order Status" HeaderStyle-Width="170px" ItemStyle-Width="120px"   
                                            DataField="OrderStatusID" ListTextField="OrderStatus" ListValueField="OrderStatusID" DataSourceID="XmlDataSourceOrderStatus"  
                                            AllowFiltering="True" FilterListOptions="VaryByDataType" SortExpression="OrderStatus" DropDownControlType="RadComboBox" > 
 
                    <FilterTemplate> 
                        <telerik:RadComboBox ID="ddlOrderStatusFilter" Runat="server" Skin="Office2007"                                               
                                            DataSourceID="XmlDataSourceOrderStatus"  
                                            DataTextField="OrderStatus" DataValueField="OrderStatusID"  
                                             OnClientSelectedIndexChanged="OrderStatusFilterSelectedIndexChanged"   
                                             SelectedValue='<%# CurrentOrderStatusFilterValue %>'  Width="150px" />    
                           <telerik:RadScriptBlock ID="RadScriptBlockOrderStatus" runat="server">                             
                                <script type="text/javascript"
                                    function OrderStatusFilterSelectedIndexChanged(sender, args) { 
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
                                        var selectedValue = sender.get_value(); 
                                        if (selectedValue == "0") { 
                                            // if empty value selected then user wnats to clear filter 
                                            tableView.filter("OrderDDLType", args.get_item().get_value(), "NoFilter"); 
                                        } 
                                        else { 
                                            tableView.filter("OrderDDLStatus", args.get_item().get_value(), "EqualTo"); 
                                        } 
                                    } 
                                </script>              
                           </telerik:RadScriptBlock>                                                            
                    </FilterTemplate>                                             
                </telerik:GridDropDownColumn>                                             
                                             
                <telerik:GridBoundColumn DataField="OrderStatus" HeaderText="OrderStatus" UniqueName="OrderStatus" Display="false"
                </telerik:GridBoundColumn> 
                    
                <telerik:GridBoundColumn UniqueName="CustomerName" DataField="CustomerName" HeaderText="Customer Name" SortExpression="CustomerName" ReadOnly="true" HeaderStyle-Width="220px" FilterControlWidth="170px" />             
                <telerik:GridBoundColumn UniqueName="SupplierName" DataField="SupplierName" HeaderText="Supplier Name" SortExpression="SupplierName" ReadOnly="true"  HeaderStyle-Width="220px" FilterControlWidth="170px"/>             
                <telerik:GridBoundColumn UniqueName="OrderTotal" DataField="OrderTotal" HeaderText="Order Total" SortExpression="OrderTotal" ReadOnly="true" DataFormatString="{0:C}" HeaderStyle-Width="240px" FilterControlWidth="210px">  
                        <FilterTemplate> 
                            <div style="float: left; padding: 5px 10px 0 0">$<%# SLIDER_ORDER_TOTAL_DEFAULT_START_VALUE %></div
                                <telerik:RadSlider runat="server" ID="sliderOrderTotal" Skin="Office2007" IsSelectionRangeEnabled="true" Style="float: left" Width="135px"                                                                 
                                ShowDecreaseHandle="false" ShowIncreaseHandle="false" BehaviorID="dd" 
                                MinimumValue='<%# SLIDER_ORDER_TOTAL_DEFAULT_START_VALUE %>' MaximumValue='<%# MaximumOrderTotalSlider %>'   
                                OnClientValueChange="ClientValueChange" OnClientSlideStart="ClientSlideStart" OnClientSlideEnd="OrderTotalRangeChanged"  
                                SelectionStart='<%# StartOrderTotalSlider %>' SelectionEnd='<%# EndOrderTotalSlider %>' SmallChange="100" /> 
                                <div style="float: left; padding: 5px 0 0 10px">$<%# MaximumOrderTotalSlider %></div
                                <div style="clear: both"><asp:Literal ID="Literal1" runat="server" Text='<%# "Showing range between: $" + StartOrderTotalSlider.ToString() + " and $" + EndOrderTotalSlider.ToString() %>' /> 
                            </div> 
                            <telerik:RadScriptBlock ID="RadScriptBlockOrderTotal" runat="server">                             
                                <script type="text/javascript"
                                    function OrderTotalRangeChanged(sender, args) { 
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
                                        var startValue = sender.get_selectionStart(); 
                                        var endValue = sender.get_selectionEnd(); 
 
                                        tableView.filter("OrderTotal", startValue + " " + endValue, "Between"); 
                                    } 
                                    function ClientValueChange(sender, args) { 
                                        var tooltip = $find("<%= RadToolTip1.ClientID %>"); 
 
                                        if (!tooltip.isVisible()) { 
                                            var activeHandle = sender.get_activeHandle(); 
                                            if (!activeHandle) return; 
 
                                            tooltip.set_targetControl(activeHandle); 
                                            tooltip.show(); 
                                        } 
                                        else { 
                                            tooltip.updateLocation(); 
                                        } 
 
                                        tooltip.set_text(args.get_newValue()); 
                                    } 
 
                                    function ClientSlideStart(sender, args) { 
                                        var tooltip = $find("<%= RadToolTip1.ClientID %>"); 
                                        tooltip.hide(); 
                                    } 
                                </script> 
 
                            </telerik:RadScriptBlock> 
                        </FilterTemplate>  
                </telerik:GridBoundColumn>   
                <telerik:GridBoundColumn UniqueName="OrderCreateDate" DataField="OrderCreateDate" HeaderText="Creation Date" AllowFiltering="true" AllowSorting="true" SortExpression="OrderCreateDate" 
                                         DataFormatString="{0:MM/dd/yyyy}" ReadOnly="true" HeaderStyle-Width="260px" FilterControlWidth="190px"
                    <FilterTemplate> 
                        From 
                        <asp:TextBox ID="txtFromOrderCreateDatePickerFilter" runat="server" Skin="Office2007" Width="70px" />                         
                        <cc1:CalendarExtender ID="FromOrderCreateDatePickerFilter" runat="server"  
                                OnClientDateSelectionChanged="OrderCreateDateSelected"  
                                SelectedDate='<%# OrderCreateDateStartDateFilter %>' 
                                TargetControlID="txtFromOrderCreateDatePickerFilter" 
                                PopupButtonID="btnCdrGridDateFrom" 
                                Format="MM/dd/yyyy"
                        </cc1:CalendarExtender> 
                        <asp:ImageButton ID="btnCdrGridDateFrom" runat="server" ImageUrl="~/Images/calendar.gif"/>                         
                       To 
                       <asp:TextBox ID="txtToOrderCreateDatePickerFilter" runat="server" Skin="Office2007" Width="70px" />                        
                       <cc1:CalendarExtender ID="ToOrderCreateDatePickerFilter" runat="server"  
                                OnClientDateSelectionChanged="OrderCreateDateSelected"  
                                SelectedDate='<%# OrderCreateDateEndDateFilter %>' 
                                TargetControlID="txtToOrderCreateDatePickerFilter" 
                                PopupButtonID="btnCdrGridDateTo" 
                                Format="MM/dd/yyyy"
                        </cc1:CalendarExtender> 
                        <asp:ImageButton ID="btnCdrGridDateTo" runat="server" ImageUrl="~/Images/calendar.gif"/>                         
                        <telerik:RadScriptBlock ID="RadScriptBlockOrderCreateDatePicker" runat="server">    
                            <script type="text/javascript"
                                function OrderCreateDateSelected(sender, args) { 
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
 
                                    var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderCreateDatePickerFilter").ClientID %>'); 
                                    var txtFrom = document.getElementById('<%# ((GridItem)Container).FindControl("txtFromOrderCreateDatePickerFilter").ClientID %>'); 
 
                                    var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderCreateDatePickerFilter").ClientID %>'); 
                                    var txtTo = document.getElementById('<%# ((GridItem)Container).FindControl("txtToOrderCreateDatePickerFilter").ClientID %>'); 
 
                                    var fromDate = FromPicker.get_selectedDate().format("MM/dd/yyyy"); 
                                    var toDate = ToPicker.get_selectedDate().format("MM/dd/yyyy"); 
                                    tableView.filter("OrderCreateDate", fromDate + " " + toDate, "Between"); 
 
                                } 
                                function OrderCreateDateFromTXT() { 
                                    var txtFrom = document.getElementById('<%# ((GridItem)Container).FindControl("txtFromOrderCreateDatePickerFilter").ClientID %>'); 
                                    var txtTo = document.getElementById('<%# ((GridItem)Container).FindControl("txtToOrderCreateDatePickerFilter").ClientID %>'); 
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
 
                                    var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderCreateDatePickerFilter").ClientID %>'); 
                                    var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderCreateDatePickerFilter").ClientID %>'); 
 
                                    var fromDate = txtFrom.value; 
                                    var toDate = txtTo.value; 
                                    FromPicker.set_selectedDate(fromDate); 
                                    ToPicker.set_selectedDate(toDate); 
                                    tableView.filter("OrderCreateDate", fromDate + " " + toDate, "Between"); 
 
 
                                } 
                          </script>                                                
                    </telerik:RadScriptBlock> 
                                                   
                    </FilterTemplate> 
                </telerik:GridBoundColumn>     
               <telerik:GridTemplateColumn UniqueName="ActionsColumn" HeaderText="Actions:"   HeaderStyle-Width="260px" AllowFiltering="false"
                    <ItemTemplate>                     
                        <table> 
                            <tr> 
                            <td><asp:LinkButton id="btnGenerate" runat="server" Text="Generate" CommandName="Generate" CssClass="GridLinkButton" 
                                  Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'
                                </asp:LinkButton> 
                            </td> 
                            <td><asp:LinkButton id="btnDuplicate" runat="server" Text="Duplicate" CommandName="Duplicate" CssClass="GridLinkButton"></asp:LinkButton></td
                            <td><asp:LinkButton id="btnSend" runat="server" Text="Send" CommandName="Send" CssClass="GridLinkButton"></asp:LinkButton></td
                            <td><asp:LinkButton id="btnApprove" runat="server" Text="Approve" CommandName="Approve" CssClass="GridLinkButton" OnClick="btnApprove_Click"></asp:LinkButton></td
                            </tr> 
                        </table>                         
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                               
            </Columns> 
        </MasterTableView>        
    </telerik:RadGrid>      

3 Answers, 1 is accepted

Sort by
0
Sebastian
Telerik team
answered on 28 May 2009, 08:50 AM
Hello Zinoviy,

Can you replicate these visual glitches on the following online demo of RadGrid for ASP.NET AJAX:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filtertemplate/defaultcs.aspx

Is it possible that the CalendarExtender from the ASP.NET AJAX toolkit have some rendering issues when placed inside html tables? Does the same effect appear when you place the extenders inside header template of MS GridView template column for example?

I will appreciate if you compare both cases and provide live urls where we can see them and inspect the rendered html of the pages using IE developer toolbar. Thus we will do our best to advice you further.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Zinoviy Margovskiy
Top achievements
Rank 1
answered on 28 May 2009, 02:32 PM
I tried to put it under a free hosting service here
0
Sebastian
Telerik team
answered on 01 Jun 2009, 10:15 AM
Hello Zinoviy,

I tried to replicate the issue you depicted under IE 6/7 and FireFox browser but unfortunately to no avail. For your convenience I am attaching a short video which illustrates what I observed on my end (find it attached to this message). To watch it, merely extract the zip archive and open the GridVideo.swf file.

Please note that I did not find any filters with AJAX Toolkit calendar extenders in the example you provided.

Regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
Grid
Asked by
Zinoviy Margovskiy
Top achievements
Rank 1
Answers by
Sebastian
Telerik team
Zinoviy Margovskiy
Top achievements
Rank 1
Share this question
or