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

Help in Define Grid Width

2 Answers 97 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, 08:41 AM
Hi
       I have a application using Rad Grid, but my problem is i cannot get a good view for my radgrid. The column or Mastertable or grid width i am given doesnt get a complete view. Some times Horizontal scroll bar vanishes once i scroll it from left to right end, again i need to refresh the page to come a normal position. The look and feel different in differennt browsers like IE and Firefox.

When i am doing column hiding and unhiding, again the column width becomes problem it shrinks some time when i choose some column to hide.

So plz kindly Look into my code and let me know what are the problems

Note: I enabled scrolling too for my Grid

<div style="margin-top:0px">
            <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" 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" PageTopMargin=".75in" PageBottomMargin=".75in" PageLeftMargin=".75in"
                        PageRightMargin=".75in" PageTitle="PostingNotice Billing Report" Keywords="None"
                        Subject="RadGrid Export" Author="Anonymous" Title="PostingNotice Billing Report"
                        PageFooterMargin="" PageHeaderMargin="" PageHeight="11in" PageWidth="8.5in" />--%>
                    <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 Width="" ShowGroupFooter="true" EnableHeaderContextMenu="true" AllowMultiColumnSorting="true"
                    CommandItemDisplay="bottom" ShowFooter="true">
                    <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" runat="server" />
                      
                    </CommandItemTemplate>
                    <PagerStyle Mode="NextPrevAndNumeric" />
                    <Columns>
                        <telerik:GridBoundColumn HeaderStyle-Width="50px" SortExpression="FID" AllowFiltering="false"
                            HeaderText="FID" DataField="FID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="Firm_name" HeaderStyle-Width="100px" ItemStyle-Wrap="true"
                            SortExpression="Firm_name" HeaderText="FirmName" DataField="Firm_name">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="NameComboBox" AutoPostBack="true" Height="100px" 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>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ProjectID" HeaderStyle-Width="50px" ItemStyle-Wrap="true"
                            Aggregate="CountDistinct" FooterText="ProjectID:" AllowFiltering="false" HeaderText="ProjectID"
                            DataField="ProjectID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Project_Name" HeaderStyle-Width="200px" ItemStyle-Wrap="true"
                            AllowFiltering="false" HeaderText="ProjectName" DataField="Project_Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Project_Date_Created" HeaderStyle-Width="200px"
                            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;">
                                            From</td>
                                        <td style="border-width: 0px">
                                            <telerik:RadDateTimePicker ID="FromOrderDatePicker" runat="server" AutoPostBack="true"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" Height="20px"
                                                Width="150px" Font-Names="Arial" Font-Size="10px" AutoPostBackControl="TimeView"
                                                SelectedDate="06/23/2009" />
                                        </td>
                                        <%--<td style="border-width: 0px">
                                            <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" AutoPostBack="true"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" AutoPostBackControl="TimeView"
                                                SelectedDate="06/23/2009" />
                                        </td>--%>
                                    </tr>
                                    <tr style="border-width: 0px">
                                        <td style="border-width: 0px">
                                            To</td>
                                        <td style="border-width: 0px">
                                            <telerik:RadDateTimePicker ID="ToOrderDatePicker" AutoPostBackControl="TimeView"
                                                OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged" Height="20px"
                                                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="100px" ItemStyle-Wrap="true"
                            AllowFiltering="false" HeaderText="PS_TimeStamp" DataField="PSTimeStamp">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="OrgName1" HeaderStyle-Width="200px" 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="50px" ItemStyle-Wrap="true"
                            AllowFiltering="true" HeaderText="BillingCode" UniqueName="BillingCode" DataField="BillingCode">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="BillCodeComboBox" AutoPostBack="true" Height="100px" Width="100px"
                                    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="200px"
                            AllowFiltering="false" HeaderText="BillingInfoDateCreated" DataField="BillingInfo_Date_Created">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="JurisdictionCode" HeaderStyle-Width="50px" ItemStyle-Wrap="true"
                            UniqueName="JurisdictionCode" HeaderText="JurisdictionCode" DataField="JurisdictionCode">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="JurisdictionComboBox" AutoPostBack="true" Width="100px"
                                    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="50px" ItemStyle-Wrap="true"
                            UniqueName="FergTechNum" HeaderText="FergTechNum" DataField="FergTechNum">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="FergTechNumComboBox" AutoPostBack="true" Height="100px"
                                    Width="100px" 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="50px" ItemStyle-Wrap="true" SortExpression="Quantity"
                            Aggregate="Sum" FooterText="Quantity :" ItemStyle-HorizontalAlign="left" 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="100px"
                                                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>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="SourceFile" HeaderStyle-Width="200px" MaxLength="25"
                            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

2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 03 Jul 2009, 10:27 AM
Hello Appu,

Can you try setting the TableLayout property of the MasterTableView to fixed and see if it resolves your issue:
aspx:
 <telerik:RadGrid ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">  
    <MasterTableView TableLayout="Fixed" > 
       .... 

Thanks
Princy.
0
Appu
Top achievements
Rank 1
answered on 03 Jul 2009, 11:02 AM
Hi
    I have done the TableLaout already but it doesnt work especially in hide/unhide column.

As i said earler the column names doesnt get its real postion, it occupy  the space of other column.

Ex: suppose we have 3 columns A,B,C,D when hide any of column D col come to C col posstion then C col goes to B col position like wise all of the columns formatting changed.

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