We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show sorting icon from the beginning

Thread ID:

Created:

Updated:

Platform:

Replies:

121654 Jan 13,2016 07:54 PM UTC Jan 15,2016 11:52 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Constanza
Asked On January 13, 2016 07:54 PM UTC

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 [Syncfusion]
Replied On January 14, 2016 07:05 AM UTC

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
Replied On January 14, 2016 12:42 PM UTC

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 [Syncfusion]
Replied On January 15, 2016 11:52 AM UTC

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: http://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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;