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

Can we apply column Width in %

2 Answers 89 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, 12:56 PM
Hi
      I am using Rad grid , i have to know that whether any option to give Header-Style width of bound column in %, I set my total Grid  width to 100%, so that i have to split columns according to grid width, but the problem is when i define column width in % basis the column hides during the runtime.

When i am setting pixels based width to all i could not get an good look and feel i am getting lot of balnk space. So plz guide me to how to set Grid width and split columns based on columns. Give me a small demo.
Also let me know can we apply percentage to column width, what to do for that..

Thanx
AQppu
 

2 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 06 Jul 2009, 03:55 PM
Hello Appu,

I am afraid that the provided information is not enough to determine what have caused the unexpected behavior. Could you please elaborates a bit more in the details?
Please have in mind that you could apply Header-Style width of bound column in percent or pixels.
In order to progress in the resolution of this matter I will ask you to send us the problematic page, so we can check it.

Regards,
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.
0
Appu
Top achievements
Rank 1
answered on 06 Jul 2009, 04:35 PM
Hi
 Here i am giving my aspx page. The problem mainly occures while hiding problem by using HeaderContextMenu. The column takes space of other column while hiding but the data's remain constant.

Ex: When the problem occures in hiding the A column, but next time when reload page the problemis not coming to that column meantime the problem is coming to another column

<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="0px" />
                    <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="100%" 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="6%"
                            ItemStyle-Wrap="true" DataFormatString="{0:mm/dd/yyyy hh:mm:ss tt}" HeaderText="ProjectDateCreated"
                            DataField="Project_Date_Created">
                            <FilterTemplate>
                                <table style="height: 5px; padding-top: 0px; padding-bottom: 0px" border="0">
                                    <tr style="width: 0px;">
                                        <td style="border-width: 0px; width: 0px; font-size: 8px; font-family: Arial;">
                                            From</td>
                                        <td style="border-width: 0px; padding-top: 0px; padding-bottom: 0px;">
                                            <telerik:RadDateTimePicker DateInput-Font-Size="9px" DateInput-Font-Names="Arial"
                                                ID="FromOrderDatePicker" runat="server" AutoPostBack="true" OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged"
                                                Height="10px" Width="100px" AutoPostBackControl="TimeView" SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                    <tr style="border-width: 0px">
                                        <td style="border-width: 0px; font-size: 8px; font-family: Arial;">
                                            To</td>
                                        <td style="border-width: 0px; padding-top: 0px; padding-bottom: 0px;">
                                            <telerik:RadDateTimePicker DateInput-Font-Size="9px" DateInput-Font-Names="Arial"
                                                ID="ToOrderDatePicker" AutoPostBackControl="TimeView" OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged"
                                                Height="10px" Width="100px" runat="server" AutoPostBack="true" SelectedDate="06/23/2009" />
                                        </td>
                                    </tr>
                                </table>
                                <%--<font size="1.5in" face="Arial">From</font>
                                <telerik:RadDateTimePicker DateInput-Font-Size="9px" DateInput-Font-Names="Arial"
                                    ID="FromOrderDatePicker" runat="server" AutoPostBack="true" OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged"
                                    Height="10px" Width="100px" AutoPostBackControl="TimeView" SelectedDate="06/23/2009" />
                                <br />
                                <font size="1.5in" face="Arial">To &nbsp;&nbsp;&nbsp;&nbsp;</font><telerik:RadDateTimePicker
                                    DateInput-Font-Size="9px" DateInput-Font-Names="Arial" ID="ToOrderDatePicker"
                                    AutoPostBackControl="TimeView" OnSelectedDateChanged="FromOrderDatePicker_SelectedDateChanged"
                                    Height="10px" Width="100px" runat="server" AutoPostBack="true" SelectedDate="06/23/2009" />--%>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="PS_TimeStamp" HeaderStyle-Width="4.67%"
                            ItemStyle-Wrap="true" AllowFiltering="false" HeaderText="PSTimeStamp" DataField="PS_TimeStamp">
                        </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="100%" 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="3.5%"
                            AllowFiltering="false" HeaderText="BillingInfo DateCreated" 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="100%" 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="100%" 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 :" 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="6%" 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
Tags
Grid
Asked by
Appu
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Appu
Top achievements
Rank 1
Share this question
or