RadGrid ColumnsReorder

4 posts, 0 answers
  1. DogBizPro
    DogBizPro avatar
    158 posts
    Member since:
    Aug 2013

    Posted 28 Dec 2017 Link to this post

    How do you get the column index the 'target' was moved TO?

    e.Target.OrderIndex is NOT correct for where it was moved TO

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4944 posts

    Posted 02 Jan 2018 Link to this post

    Hello Stephanie,

    You can use the OnColumnSwapped event: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/oncolumnswapped. The target column index is where the dragged column will be, so this is the TO index.

    If we take the online demo (https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-row-resize-reorder/defaultcs.aspx) and add that event to it, you will get the behavior you can see in the video attached below.

    Note that this works best with the default ColumnsReorderMethod value which is Swap. If you set it to Reorder, the event will fire for each column pair that is swapped for the reorder to take place.

    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. DogBizPro
    DogBizPro avatar
    158 posts
    Member since:
    Aug 2013

    Posted 02 Jan 2018 in reply to Marin Bratanov Link to this post

    Thanks, but I am still having trouble.

    First - I am not a fan of the 'swap' version. that seems much less intuitive for our non-tech savvy clients.

    Second - how do you get and save those values then? I am using the ColumsReorder method. I have tried many variations, but nothing seems to work. This is what I have now but the order is not changing for our saving method.

     

        protected void radReport_ColumnsReorder(object sender, GridColumnsReorderEventArgs e)
        {
            RadGrid rg = ((RadGrid)sender);

            for (int i = 0; i < rg.MasterTableView.RenderColumns.Count(); i++)
            {
                for (int c = 0; c < fields.Count; c++)
                {
                    // After moved column
                    if (fields[c].Column.Equals(rg.MasterTableView.RenderColumns[i].UniqueName))
                        fields[c].ColumnNum = iIndex++; // rg.MasterTableView.RenderColumns[i].OrderIndex - 1;
                }
            }
        }

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4944 posts

    Posted 04 Jan 2018 Link to this post

    Hi Stephanie,

    When columns are reordered on the server, the Swap method is always used: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/columns/reordering.

    To get the actual index on the server, you must subtract 2 because of the structure columns in the grid as noted in the article above. Nevertheless, I will improve its structure to make this information clearly visible.

    Here is a simple example:

    <asp:Label ID="Label1" Text="" runat="server" />
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True"
        GridLines="None" PageSize="10" OnColumnsReorder="RadGrid2_ColumnsReorder">
        <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="false">
            <%--<ClientEvents OnColumnSwapped="ColumnSwapped" />--%>
            <%--<Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                AllowColumnResize="True"></Resizing>--%>
        </ClientSettings>
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 25 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    protected void RadGrid2_ColumnsReorder(object sender, GridColumnsReorderEventArgs e)
    {
        //the ExpandCollapseColumn and RowIndicatorColumn are at the beginning of the column list so you must subtract their number to get a 0-based value
        //the OrderIndex will be the actual position of the column and will be with 2 larger than 0 because of these columns
        string info = string.Format("Column {0} was moved to index {1}<br />", e.Target.UniqueName, e.Source.OrderIndex - 2);
     
        Label1.Text = info;
    }


    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top