Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Look and Feel varying between browsers

0 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Appu
Top achievements
Rank 1
Appu asked on 03 Jul 2009, 05:09 PM
Hi
        I am using radgrid having following codes, when i am applying styles,width,height etc to Grid it works fine in FireFox browser but it the Grid's look and feel is not come good in IE browser. The height and widths are totally varying. I couldnt analyse what is the problwm behind of that.

Plz help me by anlysing the code, whether i made any mistakes or  not and guide me.

<div style="margin-top: 0px; height: 200px; width: 1500px">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <%--<div class="module" style="height: 50px; width: 92%">
                <br />
                <asp:Button ID="btnExport" Width="150px" Text="Export to PDF" runat="server" OnClick="btnExport_Click" />
            </div>--%>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="requestStart"
                OnAjaxSettingCreating="RadAjaxManager1_AjaxSettingCreating">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel2" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <%--<telerik:AjaxSetting AjaxControlID="btnExport">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                            <telerik:AjaxUpdatedControl ControlID="btnExport" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>--%>
                </AjaxSettings>
                <ClientEvents OnRequestStart="requestStart" />
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Height="75px"
                Width="75px" HorizontalAlign="Left" BackgroundPosition="BottomLeft" Direction="LeftToRight">
                <div style="position: absolute; left: 500px; top: 200px">
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                        style="border: 0px;" />
                </div>
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadGrid AllowPaging="true" Height="575px" Width="100%" AutoGenerateColumns="false"
                AllowFilteringByColumn="true" PageSize="50" AllowSorting="true" ID="RadGrid1"
                runat="server" OnItemDataBound="RadGrid1_ItemDataBound" ShowFooter="true" OnPreRender="RadGrid1_PreRender"
                OnItemCommand="RadGrid1_ItemCommand" OnItemCreated="RadGrid1_ItemCreated" OnNeedDataSource="RadGrid1_NeedDataSource"
                MasterTableView-NoDetailRecordsText="NO RECORD FOUND..." MasterTableView-NoMasterRecordsText="---NO RECORD FOUND!!!!---">
                <ExportSettings IgnorePaging="True" OpenInNewWindow="True">
                    <Pdf AllowCopy="True" PageTitle="PostingNotice Billing Report" Keywords="None" Subject="RadGrid Export"
                        Author="Anonymous" Title="PostingNotice Billing Report" PageHeight="14in" PageWidth="8.5in" />
                </ExportSettings>
                <SortingSettings EnableSkinSortStyles="false" />
                <MasterTableView TableLayout="Fixed" ShowGroupFooter="true" EnableHeaderContextMenu="true"
                    AllowMultiColumnSorting="true" CommandItemDisplay="bottom" ShowFooter="true">
                    <HeaderStyle Height="20px" />
                    <FilterItemStyle Height="10px" />
                    <ItemStyle Height="20px" />
                    <AlternatingItemStyle Height="20px" />
                    <FooterStyle Font-Bold="true" Font-Size="10px" Font-Names="Arial" />
                    <GroupHeaderItemStyle Font-Bold="true" Font-Size="10px" Font-Names="Arial" />
                    <CommandItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Wrap="false" />
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="FirmName:" FieldName="Firm_name"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldAlias="FirmName:" FieldName="Firm_name"></telerik:GridGroupByField>
                                <telerik:GridGroupByField FieldName="ProjectID"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <CommandItemTemplate>
                        <asp:LinkButton Font-Bold="true" ForeColor="blue" ID="btnExport" CommandName="lnkExportPDF"
                            runat="server">ExportPDF</asp:LinkButton>
                    </CommandItemTemplate>
                    <PagerStyle Mode="NextPrevAndNumeric" />
                    <Columns>
                        <telerik:GridBoundColumn HeaderStyle-Width="2.33%" SortExpression="FID" AllowFiltering="false"
                            HeaderText="FID" DataField="FID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="Firm_name" HeaderStyle-Width="4.5%" ItemStyle-Wrap="true"
                            SortExpression="Firm_name" HeaderText="FirmName" DataField="Firm_name">
                            <FilterTemplate>
                                <telerik:RadComboBox Font-Names="Arial" Font-Size="9px" ID="NameComboBox" AutoPostBack="true"
                                    Height="100px" Width="80px" runat="server" OnSelectedIndexChanged="NameComboBox_IndexChanged"
                                    OnClientSelectedIndexChanged="NameChanged">
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                                    <script type="text/javascript">
                                    function NameChanged(sender,args)
                                    {
                                        document.getElementById('<%=hdnFilter.ClientID%>').value = args.get_item().get_value();

                                    }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ProjectID" HeaderStyle-Width="3%" ItemStyle-Wrap="true"
                            Aggregate="CountDistinct" FooterText="ProjID:" AllowFiltering="false" HeaderText="ProjectID"
                            DataField="ProjectID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Project_Name" HeaderStyle-Width="6.67%"
                            ItemStyle-Wrap="true" AllowFiltering="false" HeaderText="ProjectName" DataField="Project_Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Project_Date_Created" HeaderStyle-Width="12.67%"
                            ItemStyle-Wrap="true" DataFormatString="{0:mm/dd/yyyy hh:mm:ss tt}" HeaderText="ProjectDateCreated"
                            DataField="Project_Date_Created">
                            <FilterTemplate>
                                <table border="0">
                                    <tr style="width: 10px;">
                                        <td style="border-width: 0px; width: 5px; font-size: 10px; font-family: Arial;">
                                            From</td>
                                        <td style="border-width: 0px">
                                            <telerik:RadDateTimePicker Font-Names="Arial" Font-Size="9px" ID="FromOrderDatePicker"
                                                runat="server" AutoPostBack="true" OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged"
                                                Height="15px" Width="150px" AutoPostBackControl="TimeView" SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                    <tr style="border-width: 0px">
                                        <td style="border-width: 0px; font-size: 10px; font-family: Arial;">
                                            To</td>
                                        <td style="border-width: 0px">
                                            <telerik:RadDateTimePicker ID="ToOrderDatePicker" AutoPostBackControl="TimeView"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" Height="15px"
                                                Width="150px" Font-Names="Arial" Font-Size="XX-Small" runat="server" AutoPostBack="true"
                                                SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                </table>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="PS_TimeStamp" HeaderStyle-Width="6%" ItemStyle-Wrap="true"
                            AllowFiltering="false" HeaderText="PS_TimeStamp" DataField="PSTimeStamp">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="OrgName1" HeaderStyle-Width="5.33%" ItemStyle-Wrap="true"
                            UniqueName="OrgName1" CurrentFilterFunction="contains" AutoPostBackOnFilter="true"
                            FooterText="OrgName :" Aggregate="CountDistinct" HeaderText="OrgName" ShowFilterIcon="false"
                            DataField="OrgName1">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="BillingCode" HeaderStyle-Width="5.33%" ItemStyle-Wrap="true"
                            AllowFiltering="true" HeaderText="BillingCode" UniqueName="BillingCode" DataField="BillingCode">
                            <FilterTemplate>
                                <telerik:RadComboBox Font-Names="Arial" Font-Size="9px" ID="BillCodeComboBox" AutoPostBack="true"
                                    Height="100px" Width="75px" runat="server" OnSelectedIndexChanged="BillingCodeComboBox_IndexChanged"
                                    AccessKey="T" TabIndex="1" MarkFirstMatch="True" AllowCustomText="False" AutoCompleteSeparator=";,"
                                    OnClientSelectedIndexChanged="BillingCodeChanged">
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock5" runat="server">

                                    <script type="text/javascript">
                                    function BillingCodeChanged(sender,args)
                                    {
                                        document.getElementById('<%=hdnBillCode.ClientID%>').value = args.get_item().get_Text();
                                       
                                    }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="BillingInfo_Date_Created" HeaderStyle-Width="4.5%"
                            AllowFiltering="false" HeaderText="BillingInfoDate Created" HeaderStyle-Wrap="true"
                            HeaderStyle-HorizontalAlign="Left" DataField="BillingInfo_Date_Created">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="JurisdictionCode" HeaderStyle-Width="2.67%"
                            ItemStyle-Wrap="true" UniqueName="JurisdictionCode" HeaderStyle-Wrap="true" HeaderText="Jurisdiction Code"
                            DataField="JurisdictionCode">
                            <FilterTemplate>
                                <telerik:RadComboBox Font-Names="Arial" Font-Size="9px" ID="JurisdictionComboBox"
                                    AutoPostBack="true" Width="50px" Height="100px" runat="server" OnSelectedIndexChanged="JurisdictionCodeComboBox_IndexChanged"
                                    AccessKey="T" TabIndex="1" MarkFirstMatch="True" AllowCustomText="False" AutoCompleteSeparator=";,"
                                    OnClientSelectedIndexChanged="JurisdictionCodeChanged">
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock6" runat="server">

                                    <script type="text/javascript">
                                    function JurisdictionCodeChanged(sender,args)
                                    {
                                        document.getElementById('<%=hdnJurisdictionCode.ClientID%>').value = args.get_item().get_value();
                                       
                                    }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="FergTechNum" HeaderStyle-Width="4%" ItemStyle-Wrap="true"
                            UniqueName="FergTechNum" HeaderText="FergTechNum" DataField="FergTechNum">
                            <FilterTemplate>
                                <telerik:RadComboBox Font-Names="Arial" Font-Size="9px" ID="FergTechNumComboBox"
                                    AutoPostBack="true" Height="100px" Width="75px" runat="server" OnSelectedIndexChanged="FergTechNumComboBox_IndexChanged"
                                    AccessKey="v" TabIndex="1" MarkFirstMatch="True" AllowCustomText="False" AutoCompleteSeparator=","
                                    OnClientSelectedIndexChanged="FergTechNumChanged">
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock7" runat="server">

                                    <script type="text/javascript">
                                    function FergTechNumChanged(sender,args)
                                    {
                                        document.getElementById('<%=hdnFergTechNum.ClientID%>').value = args.get_item().get_value();
                                       
                                    }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderStyle-Width="5%" ItemStyle-Wrap="true" SortExpression="Quantity"
                            Aggregate="Sum" FooterText="Quantity :" ItemStyle-HorizontalAlign="Right" HeaderText="Quantity"
                            DataField="Quantity" UniqueName="Quantity">
                            <FilterTemplate>
                                <table border="0" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px;">
                                    <tr style="width: 0px">
                                        <td style="border-width: 0;">
                                            <asp:Label ID="MinLabel" runat="server" Text="$0"></asp:Label>
                                        </td>
                                        <td style="border-width: 0px;">
                                            <telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                                                SmallChange="5" ShowDecreaseHandle="false" ShowIncreaseHandle="false" Width="75px"
                                                OnClientSlideEnd="QuantityRangeChanged" OnClientValueChange="ClientValueChange"
                                                OnClientSlideStart="ClientSlideStart" />
                                            <div style="clear: both">
                                                <asp:Literal ID="Literal1" runat="server" Text='<%# "Range: $" + StartSlider + " - $" + EndSlider %>' />
                                            </div>
                                            <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">

                                                <script type="text/javascript">
                                        function QuantityRangeChanged(sender,args)
                                         {                                     
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");                                                                                       
                                            
                                            var startValue = sender.get_selectionStart();
                                            var endValue = sender.get_selectionEnd();
                                                                                
                                            tableView.filter("Quantity", 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>
                                        </td>
                                        <td style="border-width: 0px; padding-left: 0px">
                                            <asp:Label ID="MaxLabel" runat="server" Text="$25"></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="SourceFile" HeaderStyle-Width="5%" HeaderStyle-Wrap="true"
                            ItemStyle-Wrap="true" AllowFiltering="false" HeaderText="SourceFile" DataField="SourceFile">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowDragToGroup="true" />
                <%--<ItemStyle HorizontalAlign="right" />--%>
                <GroupingSettings ShowUnGroupButton="true" />
            </telerik:RadGrid>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
                ShowCallout="false" Height="20px" ShowEvent="fromcode" />
            <asp:HiddenField ID="hdnFilter" runat="server" />
            <asp:HiddenField ID="hdnBillCode" runat="server" />
            <asp:HiddenField ID="hdnJurisdictionCode" runat="server" />
            <asp:HiddenField ID="hdnFergTechNum" runat="server" />
        </div>

regards,
Appu
 

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Appu
Top achievements
Rank 1
Share this question
or