Trouble Shooting: Asp.Net AjaxControlToolkit ReOrderList control not working in IE 11 Browser

Introduction

In this article I am going to provide a solution for the problem where the Asp.Net AjaxControlToolkit’s ReOrderList control won’t work in IE 11 Browser.

Problem Description:

In IE11 browser AjaxControlToolkit ReOrderList’s changing the order of items (ReOrder) won’t work properly. You don’t get any error however when you try to drag there won’t be any changes to ReOrderList.

Solution:

To resolve this issue you need to set the ClientIDMode to control to AutoID and it will resolve the issue.

CSS:

  <style type="text/css">
            .DragHandleClass {
                width: 40px;
                height: 20px;
                background-color: blue;
                color: white;
                cursor: move;
            }

            .ajaxOrderedList li {
                list-style: none;
            }
        </style>

HTML

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:ReorderList ID="ReorderList1" runat="server"
            OnItemReorder="ReorderList1_ItemReorder"
            PostBackOnReorder="true"
            CallbackCssStyle="callbackStyle"
            DragHandleAlignment="Left"
            ItemInsertLocation="Beginning"
            DataKeyField="ID"
            SortOrderField="Name" ClientIDMode="AutoID">
            <ItemTemplate>
                <div class="itemArea">
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Name")%>' />
                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Order_By") %>' />
                </div>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div class="DragHandleClass">Drag</div>
            </DragHandleTemplate>
        </asp:ReorderList>

C#:



public static DataTable dt = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                //test data suppose comes from database
                dt = new DataTable();
                dt.Columns.Add("ID");
                dt.Columns.Add("Name");
                dt.Columns.Add("Order_By");
                dt.Rows.Add(1, "Name1", "First");
                dt.Rows.Add(2, "Name2", "Second");
                dt.Rows.Add(3, "Name3", "Third");
                dt.Rows.Add(4, "Name4", "Fourth");
                this.ReorderList1.DataSource = dt;
                this.ReorderList1.DataBind();
            }

        }

        protected void ReorderList1_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
        {
            DataRow selectedRow = dt.Rows[e.OldIndex];
            DataRow newRow = dt.NewRow();
            newRow.ItemArray = selectedRow.ItemArray; // copy data
            dt.Rows.Remove(selectedRow);//delete the old row
            dt.Rows.InsertAt(newRow, e.NewIndex); //add new row
            //your code save the datatable to database
            this.ReorderList1.DataSource = dt;
            this.ReorderList1.DataBind();
        }

Demo:

Advertisements

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: