Horizontal scroll bar Not comming

[Appu]

Hi  i couldn't see Horizontal bar in my browser so that i could see only few column details in the browser, it happened only after i applied skin to my grid. I enabled scrolling to my grid too. Should i need to apply or reconfigure style sheets to make scroll bar available.
If so what area i need to work out.

Plz guide me.

<link href="Skins/Gray/Calendar.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/ComboBox.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/Input.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/Grid.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/Menu.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/Dock.Gray.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Gray/Widgets.Gray.css" rel="stylesheet" type="text/css" />
      <link href="Skins/Gray/PanelBar.Gray.css" rel="stylesheet" type="text/css" />


<telerik:RadGrid Skin="Gray" Height="600px" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False"
                AllowPaging="True" 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!!!!---"
                GridLines="None">
                <%-- <HeaderStyle CssClass="GridHeader" />--%>
                <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" />
                </ExportSettings>
                <GroupingSettings ShowUnGroupButton="True" />
                <ClientSettings AllowDragToGroup="True" />
             
                <HeaderContextMenu Skin="Gray" Height="100px" Width="100px" EnableScreenBoundaryDetection="true" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False"></HeaderContextMenu>
                <MasterTableView  ShowGroupFooter="True"  EnableHeaderContextMenu="True" AllowMultiColumnSorting="True"
                    CommandItemDisplay="Bottom" NoDetailRecordsText="NO RECORD FOUND..." NoMasterRecordsText="---NO RECORD FOUND!!!!---">
                    <%-- <ItemStyle CssClass="GridRow" />
                    <AlternatingItemStyle CssClass="GridRow" />--%>
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="FirmName:" FieldName="Firm_name" FormatString=""
                                    HeaderText=""></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldAlias="FirmName:" FieldName="Firm_name" FormatString=""
                                    HeaderText=""></telerik:GridGroupByField>
                                <telerik:GridGroupByField FieldName="ProjectID" FieldAlias="ProjectID" FormatString=""
                                    HeaderText=""></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <CommandItemTemplate>
                        <asp:LinkButton Font-Bold="true" ForeColor="blue" ID="btnExport" runat="server" />
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="FID" HeaderStyle-Width="50px" AllowFiltering="False"
                            HeaderText="FID" DataField="FID" UniqueName="FID">
                            <%--  <HeaderStyle Width="54px" />--%>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="Firm_name" SortExpression="Firm_name" HeaderText="FirmName"
                            HeaderStyle-Width="50px" DataField="Firm_name">
                            <FilterTemplate>
                                <telerik:RadComboBox Skin="Gray" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
                                    ID="NameComboBox" AutoPostBack="true" Width="100px" 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>
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="150px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ProjectID" Aggregate="CountDistinct" FooterText="ProjectID:"
                            AllowFiltering="False" HeaderText="ProjectID" DataField="ProjectID" UniqueName="ProjectID">
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="54px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderStyle-Width="100px" ItemStyle-Wrap="true" SortExpression="Project_Name"
                            AllowFiltering="False" HeaderText="ProjectName" DataField="Project_Name" UniqueName="Project_Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Project_Date_Created" ItemStyle-Wrap="true"
                            HeaderStyle-Width="150px" DataFormatString="{0:mm/dd/yyyy hh:mm:ss tt}" HeaderText="ProjectDateCreated"
                            DataField="Project_Date_Created" UniqueName="Project_Date_Created">
                            <FilterTemplate>
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr style="border-width: 0px;">
                                        <td>
                                            From</td>
                                        <td>
                                            <telerik:RadDateTimePicker ID="FromOrderDatePicker" Skin="Gray" EnableEmbeddedSkins="false"
                                                EnableEmbeddedBaseStylesheet="false" runat="server" AutoPostBack="true" Width="100px"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" AutoPostBackControl="TimeView"
                                                SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                    <tr style="border-width: 0px;">
                                        <td>
                                            To</td>
                                        <td style="width: 80px;">
                                            <telerik:RadDateTimePicker Skin="Gray" EnableEmbeddedSkins="false" Width="100px"
                                                EnableEmbeddedBaseStylesheet="false" ID="ToOrderDatePicker" AutoPostBackControl="TimeView"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" runat="server"
                                                AutoPostBack="true" SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                </table>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="PS_TimeStamp" AllowFiltering="False" HeaderText="PS_TimeStamp"
                            DataField="PSTimeStamp" UniqueName="PSTimeStamp">
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="83px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="OrgName1" UniqueName="OrgName1" CurrentFilterFunction="Contains"
                            AutoPostBackOnFilter="True" FooterText="OrgName :" Aggregate="CountDistinct"
                            HeaderText="OrgName" ShowFilterIcon="False" DataField="OrgName1">
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="103px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="BillingCode" HeaderText="BillingCode" UniqueName="BillingCode"
                            DataField="BillingCode">
                            <FilterTemplate>
                                <telerik:RadComboBox Skin="Gray" Width="75px" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
                                    ID="BillCodeComboBox" AutoPostBack="true" 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>
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="103px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="BillingInfo_Date_Created" AllowFiltering="False"
                            HeaderText="BillingInfoDateCreated" DataField="BillingInfo_Date_Created" UniqueName="BillingInfo_Date_Created">
                            <HeaderStyle Width="117px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="JurisdictionCode" UniqueName="JurisdictionCode"
                            HeaderText="JurisdictionCode" DataField="JurisdictionCode">
                            <FilterTemplate>
                                <telerik:RadComboBox Width="75px" Skin="Gray" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
                                    ID="JurisdictionComboBox" AutoPostBack="true" 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>
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="103px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="FergTechNum" UniqueName="FergTechNum" HeaderText="FergTechNum"
                            DataField="FergTechNum">
                            <FilterTemplate>
                                <telerik:RadComboBox Width="75px" Skin="Gray" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
                                    ID="FergTechNumComboBox" AutoPostBack="true" 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>
                            <ItemStyle Wrap="True" />
                            <HeaderStyle Width="103px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Quantity" Aggregate="Sum" FooterText="Quantity :"
                            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;" class="InputField">
                                            <telerik:RadSlider Width="75px" runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                                                SmallChange="5" ShowDecreaseHandle="false" ShowIncreaseHandle="false" 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">
                                            <asp:Label ID="MaxLabel" runat="server" Text="$25"></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </FilterTemplate>
                            <%-- <ItemStyle HorizontalAlign="Left" Wrap="True" />--%>
                            <%--<HeaderStyle Width="103px" />--%>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn ItemStyle-Wrap="true" HeaderStyle-Width="60px" SortExpression="SourceFile" AllowFiltering="False" HeaderText="SourceFile"
                            DataField="SourceFile" UniqueName="SourceFile">
                           
                        </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif"
                            UpdateImageUrl="Update.gif">
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False">
                </FilterMenu>
                <SortingSettings EnableSkinSortStyles="False" />
                <HeaderContextMenu EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False">
                </HeaderContextMenu>
            </telerik:RadGrid>

Regards,
Appu

[Shinu]

Hello Appu,

To display horizontal scroll for navigation in the grid, you can set the total width of the columns such that it exceeds the width of the grid which is demonstrated in the following online demo:

Scrolling

Thanks

Shinu.

[Appu]

Hi shinu,

 suppose i am setting 100 % to Grid width, so based on that i am splitting column widths so how can i enable HScroll


Regards,
Appu

[Appu]

The scrolling proble comes only after Skin apply i noted earlier.

So how can i analyse