Drag Column of Telerik Radgrid from its position

Drag Column of Telerik Radgrid from its position

Using this feature of Radgrid we can switch column position from its location. We can put any column to any position ,by just simple mouse drag and drop .

For Achieve this feature we need to specify some properties…

                

<ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True">

                    <Resizing AllowColumnResize="true"></Resizing>

                </ClientSettings>

Step 1:Design web from .aspx page

        <div>

            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" PageSize="8" Width="50%" PagerStyle-AlwaysVisible="true"

                GridLines="None" AutoGenerateColumns="false"

                OnNeedDataSource="RadGrid1_NeedDataSource">

                <HeaderStyle HorizontalAlign="Left" />

                <MasterTableView DataKeyNames="name" AutoGenerateColumns="false" EnableHeaderContextMenu="true">

                    <NoRecordsTemplate>No records found.</NoRecordsTemplate>

                    <Columns>

                        <telerik:GridBoundColumn HeaderText="Name" DataField="Name" HeaderButtonType="TextButton" />

                        <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" HeaderButtonType="TextButton" />

                        <telerik:GridBoundColumn HeaderText="Phone" DataField="Phone" HeaderButtonType="TextButton" />

                    </Columns>

                </MasterTableView>

                <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True">

                    <Resizing AllowColumnResize="true"></Resizing>

                </ClientSettings>

            </telerik:RadGrid>

        </div>

Step 2:Logic on .Cs page

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

    {

        DataTable dt = new DataTable();

        dt.Columns.Add("Name");

        dt.Columns.Add("Amount", typeof(Int32));

        dt.Columns.Add("Phone");

        dt.Columns.Add("UnitCount", typeof(Int32));

        dt.Rows.Add("Kandy", "12", "8802***2564", "2");

        dt.Rows.Add("Sam", "25", "545502*2544", "4");

        dt.Rows.Add("Izhar", "32", "95802*2452", "4");

        dt.Rows.Add("Vineet", "10", "88022564***", "6");

        RadGrid1.DataSource = dt;

    }

It will look like :-