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:
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;"> |
|
<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> |
<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> |
<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> |
<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> |
<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> |
<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> |
<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> |
<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> |
</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&page=OrderDetails&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> |