How to make column click sort and resize?

[Singl Pang]

Hi All,
     When I create a Grid, I want the columns are available to sort data by clicking header, and resizable. But I don't know where to set the property.

 Thanks~!

[Shinu]

Hi,

You can set the following properties to enable sorting and resizing.
aspx:

<telerik:RadGrid ID="RadGrid1" AllowSorting="true" ....>
 <ClientSettings >
   <Resizing AllowColumnResize="true" />
 </ClientSettings>
</telerik:RadGrid>

Thanks,
Shinu.

[Singl Pang]

Thank you Shinu!~ It's OK

[Singl Pang]

New problem:
Property AllowSorting="true" and SortExpression of GridBoundColumn can make the effect sort-by-header-clicked on BoundColumn.
 But not available to effect on GridTemplateColumn. How to set it? my source code is :

    <telerik:RadGrid ID="RadGrid1" runat="server"
        AutoGenerateColumns="False" CellSpacing="0" AllowPaging="True"
        AllowSorting="True" BorderColor="Black" CellPadding="1" CssClass="RadGrid"
        Skin="Hay">
 <ClientSettings >
    <Resizing AllowColumnResize="true" />
  </ClientSettings>
<MasterTableView>

    <Columns>
    <telerik:GridEditCommandColumn ButtonType="ImageButton" />
        <telerik:GridTemplateColumn DataField="AREA_ZIP_CODE"
            UniqueName="AREA_ZIP_CODE" SortExpression="Asc">
            <HeaderTemplate>
                <asp:Label ID="Label2" runat="server" Text="AREA_ZIP_CODE"></asp:Label>

            </HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("AREA_ZIP_CODE") %>'></asp:Label>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn DataField="AREA_ZIP_DESC" UniqueName="AREA_ZIP_DESC" SortExpression="AREA_ZIP_DESC">
            <HeaderTemplate>
                <asp:Label ID="Label3" runat="server" Text="AREA_ZIP_DESC"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="Label4" runat="server" Text='<%# Eval("AREA_ZIP_DESC") %>'></asp:Label>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn DataField="ACTIVE_FLAG" HeaderText="ACTIVE_FLAG"
            SortExpression="ACTIVE_FLAG" UniqueName="ACTIVE_FLAG">
        </telerik:GridBoundColumn>

        <telerik:GridTemplateColumn HeaderText="Delete" UniqueName="Delete">
            <ItemTemplate>
                <asp:Button ID="Button1" runat="server" Text="Delete" CommandName="DeleteIt" />
                <asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="CancelIt" />
            </ItemTemplate>
        </telerik:GridTemplateColumn>

    </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>

    <PagerStyle AlwaysVisible="True" />

</MasterTableView>


<FilterMenu EnableImageSprites="False"></FilterMenu>
    </telerik:RadGrid>

[Shinu]

Hi,

One suggestion is to use the GridTemplateColumn property 'HeaderText' instead of 'HeaderTemplate' for giving Header.

ASPX:

<telerik:GridTemplateColumn DataField="AREA_ZIP_DESC" HeaderText="AREA_ZIP_DESC" UniqueName="AREA_ZIP_DESC" SortExpression="AREA_ZIP_DESC">
    <ItemTemplate>
     <asp:Label ID="Label4" runat="server" Text='<%# Eval("AREA_ZIP_DESC") %>'></asp:Label>
    </ItemTemplate>
</telerik:GridTemplateColumn>

Thanks,
Shinu.

[Singl Pang]

If I use HeaderText, How to set it as a variable? Because the header must be multilingual in my project. In fact my code is below:

ASPX:

<telerik:GridTemplateColumn DataField="RefId" UniqueName="RgLeaveHistory_RefId">
                            <HeaderTemplate>
                                <asp:Label ID="lblHeaderRgLeaveHistory_RefId" runat="server" Text='<%#UIUtil.GetMultilingual("Ref-Id",UIUtil.GetLangCode(request))%>'></asp:Label></HeaderTemplate><HeaderStyle CssClass="S1_H_AC" />
                            <ItemTemplate>
                                <asp:Label ID="lblItemRgLeaveHistory_RefId" runat="server" Text='<%#Eval("RefId")%>' />
                            </ItemTemplate>
                            <ItemStyle CssClass="S1_TD_NW" />
                        </telerik:GridTemplateColumn>

I tried to change to:

<telerik:GridTemplateColumn DataField="RefId" UniqueName="RgLeaveHistory_RefId" HeaderText="<%=UIUtil.GetMulitilingual("Ref-Id",UIUtil.GetLangCode(request))%>" HeaderStyle-CssClass="S1_H_AC">

But it shows error.

[Singl Pang]

Hi Shinu, I need your help~! Thank you~!

[Andrey]

Hello,

In order to sort Template columns you should provide the DataField and the SortExpression properties of RadGrid Template column. You could check this help topic for more information on the matter.

About your other question you could hook the ItemCreated event of RadGrid. In this event you should check for the GridHeaderItem type and then to access the required header:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = e.Item as GridHeaderItem;
        headerItem["ColumnUniqueName"].Text = "Your custom text goes here";
    }
}

All the best,
Andrey
the Telerik team

[Singl Pang]

Thanks Andrey,
      Your approach is feasible.
      But in my project, required to set these property on front ASPX. For preventing to forget setting headertext in grid. I tried below approach to show custom text. But it can't show the asc/desc icon.

<telerik:GridTemplateColumn DataField="AREA_ZIP_CODE"
           UniqueName="AREA_ZIP_CODE" SortAscImageUrl="images/CustomIcon/gif/arrow_up.gif"
           SortDescImageUrl="images/CustomIcon/gif/arrow_down.gif">
           <HeaderTemplate>
               <asp:LinkButton ID="LinkButton1" CommandName="Sort" CommandArgument="AREA_ZIP_CODE" runat="server">
               <%=GetText()%>
               </asp:LinkButton>
           </HeaderTemplate>
           <ItemTemplate>
               <asp:Label ID="Label1" runat="server" Text='<%# Eval("AREA_ZIP_CODE") %>'></asp:Label>
           </ItemTemplate>
       </telerik:GridTemplateColumn>

Could you provide a better approach? Thank you very much~!

All the best
Singl Pang

[Andrey]

Hello,

You could achieve your goal by using the following code:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = e.Item as GridHeaderItem;
        (headerItem["CustomerID"].Controls[0] as LinkButton).Text = "Your custom Text";
    }
}

Give this approach a try and check whether you get the desired behavior.

Regards,
Andrey
the Telerik team