Show sorting icon from the beginning

[Constanza]

I have a very simple grid in my aspx file like this one:

<ej:Grid ID="dgManager" runat="server" AllowFiltering="false" AllowPaging="true" AllowGrouping="false" AllowSorting="true" AllowReordering="true" >

                    <%--<PageSettings PageSize="20"></PageSettings>--%>

                    <Columns>

                        <ej:Column Field="Name" HeaderText="DBA Name"  Width="110" />

                        <ej:Column Field="Agent" HeaderText="Office"  Width="70" />

                        <ej:Column Field="SubmittedDate" HeaderText="Submitted Date"  Width="90" Format="{0:MM/dd/yyyy}" />

                        <ej:Column Field="Status" HeaderText="Status" Width="110"/>

                        <ej:Column Field="VIP" HeaderText="VIP" Width="50"/>

                    </Columns>

                </ej:Grid>

You can see it has the AllowSorting="true" property. When I click in some column the sorting icon appears correctly indicating the way it is ordered. But in all the others columns or before clicking some column there is no arrow, so it's hard for the user to identify the grid can be sorted.

Is there a way to show the icon in every column that can be sorted from the beginning? (not after the first click)

Thanks

[Balaji Marimuthu]

Hi Constanza,

Thanks for contacting Syncfusion support.

To achieve your requirement, enable the AllowMultiSorting property in Grid. The multi sorting is performed by holding ctrl key and click on the corresponding column header. Refer to the Demo and Document in the following link.

Demo: http://asp.syncfusion.com/demos/web/grid/multisorting.aspx

Document: http://help.syncfusion.com/aspnet/grid/sorting#multi-sorting-key-configs

<ej:Grid ID="OrdersGrid" runat="server" AllowSorting="true" AllowMultiSorting="True" AllowPaging="True">

    <columns>

        <ej:column field="OrderID" headertext="Order ID" isprimarykey="true" textalign="Right" width="90" />

        <ej:column field="CustomerID" headertext="Customer ID" width="120" />

        <ej:column field="EmployeeID" headertext="Employee ID" textalign="Right" width="115" />

        <ej:column field="Freight" headertext="Freight" textalign="Right" width="90" format="{0:C}" />

        <ej:column field="OrderDate" headertext="Order Date" width="110" textalign="Right" format="{0:MM/dd/yyyy}" />

        <ej:column field="ShipCity" headertext="Ship City" width="100" />

    </columns>
</ej:Grid>

If you want to render the Grid with sorted columns initially, then you can use the SortedColumns property and specify the direction of columns to be sorted. Refer to the sample and code example as below.

Sample: MultiSorting

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" AllowMultiSorting="true">

            <SortedColumns >

                <ej:SortedColumn Field="OrderID" Direction="Descending" />

                <ej:SortedColumn Field="CustomerID" Direction="Ascending" />

                <ej:SortedColumn Field="EmployeeID" Direction="Ascending" />

                <ej:SortedColumn Field="Freight" Direction="Descending" />

                <ej:SortedColumn Field="OrderDate" Direction="Ascending" />

                <ej:SortedColumn Field="ShipCity" Direction="Ascending" />

            </SortedColumns>

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" />

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />

            </Columns>
        </ej:Grid>

Regards,
Balaji Marimuthu

[Constanza]

Thanks for your answer, but I don't want to allow multi sorting, I just want to see the ascending or descending icon in every column at the beginning, so the user knows that he can click there. Any other idea?

[Prasanna Kumar Viswanathan]

Hi Constanza,

If you want to display the ascending or descending icon in every column, we suggest you to use SortedColumns property and specify the direction of columns to be sorted. 

Please find the code example, screenshot and sample:

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

            <SortedColumns >

                <ej:SortedColumn Field="OrderID" Direction="Descending" />

                <ej:SortedColumn Field="CustomerID" Direction="Ascending" />

                <ej:SortedColumn Field="EmployeeID" Direction="Ascending" />

                <ej:SortedColumn Field="Freight" Direction="Descending" />

                <ej:SortedColumn Field="OrderDate" Direction="Ascending" />

                <ej:SortedColumn Field="ShipCity" Direction="Ascending" />

            </SortedColumns>

--------------            ----

Screenshot:



Sample: https://www.syncfusion.com/downloads/support/forum/121654/ze/MultiSorting-971091973_(2)-1005044904

If we misunderstood your query, can you please elaborate your requirement, it will help us to provide the better solution.

Regards,
Prasanna Kumar N.S.V