[Solved] Reordering a Bound Collection on Client Side

[Stephen Cossgrove]

Hi,

I currently have a  collection class that is basically a List<T> called Preferences.   T is a class with a property called PreferenceOrder.
I bind the collection to the radgrid on the RadGrid1_NeedDataSource like so:

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            this.RadGrid1.DataSource = Preferences;
        }

the rad grid is defined as:

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True" CssClass="RadGrid"
    AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"
    OnPreRender="RadGrid1_PreRender"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnUpdateCommand="RadGrid1_UpdateCommand"
    OnInsertCommand="RadGrid1_InsertCommand"
    OnDeleteCommand="RadGrid1_DeleteCommand"
    >

    <MasterTableView Width="100%" CommandItemDisplay="Top" AllowSorting="False" >

        <Columns>
            <telerik:GridTemplateColumn UniqueName="TestingMoveItemUp" HeaderText="">
                <ItemTemplate>
                    <asp:Image  id="imgMoveUp" class="up" ImageUrl="~/images/applications/up.gif"
                                onclick="grd_RowMove(this, true);"
                                AlternateText="Move Up" runat="server"></asp:Image>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn UniqueName="TestingMoveItemDown" HeaderText="">
                <ItemTemplate>
                    <asp:Image  id="imgMoveDown" class="down" ImageUrl="~/images/applications/down.gif" onclick="grd_RowMove(this,false);" AlternateText="Move Down" runat="server"></asp:Image>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
            </telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn UniqueName="PreferenceOrder" HeaderText="Order" DataField="PreferenceOrder">
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="CourseCode" HeaderText="Code" DataField="CourseCode">
            <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="DeleteColumn" Text="Delete" CommandName="Delete" />
        </Columns>

    </MasterTableView>

</telerik:RadGrid>

I have tried a few javascripts to swap the rows that are bound to this grid, but this is not being persisted to the datasource of the grid, which is the Preferences  collection.

What can i do to perform this swap client side but have this reflected in the Preferences Collection on the unload of the page/control?

[Veli]

Hello Stephen,

You can use RadGrid's Row Drag And Drop functionality to reorder your rows. You can also refer to the demo. Our recommendation is, if you want to persist your reordered rows on the server,  to use AJAX callbacks to fire the server-side RowDrop event of the grid where you would reorder the objects in your List<T> collection and rebind the grid. In this way, you will both provide a more interactive user experience with partial postbacks, and a persisted reorder of your grid items.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.