ReOrder List in ASP.NET using AJAX

ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.

When bound to data, the ReorderList control will behave like many other databound controls. If the data you are displaying has a field that determines sort order (e.g. the select query is sorted by this column), and that column is of an integer type, the ReorderList can automatically perform reorders if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList (such as Arrays).

The ReorderList control is different than the other samples here because it is an ASP.NET server control that is aware of ASP.NET AJAX behaviors. Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.

The ReorderList can handle reorders in two ways, either via a callback or via a postback. For a callback, no page postback happens on a reorder. This is useful if the data is only to be ordered. If the data items are to be deleted or edited, a full postback needs to occur to sync the server side state with the client side state. The PostbackOnReorder property enables this.

Step 1: Create Stylesheet (CSS)

.DragHandleClass

{

width: 20px;

height: 20px;

background-color: red;

color: white;

cursor: move;

}

.ajaxOrderedList li

{

list-style: none;

}

</style>

Step 2: Add Reorder List Control and SQL Data source

<asp:SqlDataSource ID="sds" runat="server" ConnectionString="<%$ ConnectionStrings:dbConnectionString %>"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [ID], [Product_Kid], [CatName], [Product_Name], [Product_Image], [Brand_Name], [Product_Description], ISNULL(SortOrder,99999) [SortOrder],Product_Code FROM [RecentProducts] ORDER BY [SortOrder]"

UpdateCommand="UPDATE [RecentProducts] SET [SortOrder] = @SortOrder WHERE [ID] = @original_id"

DeleteCommand="DELETE FROM [RecentProducts] WHERE [ID] = @original_id">

<asp:Parameter Name="original_id" Type="Int32" />

</DeleteParameters>

<asp:Parameter Name="SortOrder" Type="Int32" />

<asp:Parameter Name="original_id" Type="Int32" />

</UpdateParameters>

</asp:SqlDataSource>

<br />

<tr>

</td>

Product

</td>

Brand

</td>

Product Code

</td>

Description

</td>

</tr>

</table>

<cc1:reorderlist id="rl1" runat="server" allowreorder="True" sortorderfield="SortOrder"

datakeyfield="ID" datasourceid="sds" postbackonreorder="True">

</div>

</DragHandleTemplate>

<tr>

<asp:ImageButton ID="btnDelete" CommandName="Delete" ImageUrl="~/Images/del3.jpg"

OnClientClick="javascript:return confirm('Are you sure about deleting this record?');"

runat="server" />

</InsertItemTemplate>

</td>

<td>

<b>

<asp:Label ID="lblSrNo" runat="server" Text="" /></b>

</td>

<asp:Image ID="imgdynProd" Height="40" Width="60" runat="server" Style="border: 1px solid gray;

text-align: center;" AlternateText='<%# DataBinder.Eval(Container.DataItem, "Product_Image") %>'

ImageUrl='<%# "/Atcomaart/Upload Image/Product Image/UploadImages/"+ DataBinder.Eval(Container.DataItem, "Product_Image") %>'

onclick="Pop(this,30,'');" />

</td>

<asp:Label ID="Label1" runat="server" Text='<%#Eval("Product_Name") %>' />

</td>

<asp:Label ID="Label2" runat="server" Text='<%#Eval("Brand_Name") %>' />

</td>

</td>

 <asp:Label ID="ItemLabel" runat="server"

Text='<%# Eval("Product_Description") %>' />

</td>

</tr>

</table>

<hr />

</ItemTemplate>

<asp:Panel ID="pnlInsert" runat="server" DefaultButton="btnInsert">

<span>Porduct Code: </span>

<asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvItemCode" runat="server" ValidationGroup="1" ControlToValidate="txtItemCode"

ErrorMessage="Product code is required."></asp:RequiredFieldValidator>

<br />

<asp:Button ID="btnInsert" Text="Submit" runat="server" CommandName="Select" ValidationGroup="1"

OnClick="btnInsert_Click" />

</asp:Panel>

</InsertItemTemplate>

</cc1:reorderlist>

</div>

Step 3: Add Insert Command for Insert Method

Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblMessage.Text = ""
        Dim txtControl As New TextBox
        For i As Integer = 0 To rl1.Items.Count
            If (rl1.Items(i).FindControl("txtItemCode") IsNot Nothing) Then
                txtControl = DirectCast(rl1.Items(i).FindControl("txtItemCode"), TextBox)
                Exit For
            End If
        Next

        If (txtControl IsNot Nothing And txtControl.Text <> "") Then
            If (ProductCheck(txtControl.Text)) Then
                If (InsertRecentProductNew(txtControl.Text)) Then
                    txtControl.Text = ""
                    CreateMessageAlert(Me, "Product Added Sucessfully", "Success")
                    sds.DataBind()
                    rl1.DataBind()
                Else
                    CreateMessageAlert(Me, "Product Already Exists.", "Already")
                End If
            Else
                CreateMessageAlert(Me, "Invalid Product Code", "InValidProductCode")
            End If
        End If
    End Sub

Public Sub CreateMessageAlert(ByRef aspxPage As System.Web.UI.Page, ByVal strMessage As String, ByVal strKey As String)
        Try

            If (Not aspxPage.IsStartupScriptRegistered(strKey)) Then
                ScriptManager.RegisterStartupScript(aspxPage, aspxPage.GetType, "StrKeyVal", "alert('" & strMessage & "')", True)
            End If

        Catch ex As Exception

        End Try
    End Sub

Dot Net Tips And Tricks

Pages

Sunday, February 26, 2012

ReOrder List in ASP.NET using AJAX

No comments:

ShareThis

Welcome