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

Horizontal scroll bar Not comming

3 Answers 69 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, 11:58 AM
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

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 03 Jul 2009, 01:38 PM
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:

Thanks
Shinu.
0
Appu
Top achievements
Rank 1
answered on 03 Jul 2009, 05:15 PM
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
0
Appu
Top achievements
Rank 1
answered on 03 Jul 2009, 05:16 PM
The scrolling proble comes only after Skin apply i noted earlier.

So how can i analyse
Tags
Grid
Asked by
Appu
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Appu
Top achievements
Rank 1
Share this question
or