Column resizing problem

[Appu]

Hi
     i have the problem in rad grid, when i resize at the end portion of the column, it is not done exactly instead of the entire data columns are resizing so that the columns are appending buy one by one. So plz help me to find the solution.
My design code is:

<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

[Pavlina]

Hello Appu,

If you want the columns in your grid to be resizable, set the ClientSettings.Resizing.AllowColumnResize property to True. When AllowColumnResize is True, users can resize columns by dragging the handle between column headers. The default value for this property is true.

Also if you set ResizeGridOnColumnResize to True, the grid changes its size dynamically when the user resizes a column. All other columns retain their original sizes. I suggest you review the following help article to get more details about column Resizing.
Resizing columns

All the best,

Pavlina
the Telerik team

 

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.