Basically when DataList is rendered HTML in Table and like below
<table>
<tr>
<td> HTML Code placed at ItemTemplate </td>
</tr>
</table>
But UI sortable can be apply on <tbody>, so we need to add tbody on the above table to implement Jquery UI Sortable.
But now how we can inject tbody in to a DataList ? it’s too simple to do that.
<asp:DataList ID="dlList" runat="server" >
<HeaderTemplate>
<tbody>
</HeaderTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</tbody>
</FooterTemplate>
</asp:DataList>
By adding <tbody> start tag at HeaderTemplate and </tbody> end tag at the FooterTemplate we can inject the <tbody> in the DataList .
After adding the tbody in Header & Footer Template the rendered HTML become will be
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Now we can easily implement JQuery UI Sortable in the DataList below the Jquery implementation.
For that you need to add below Js in your application
$(function () {
$("#<%=dlProcessList.ClientID %> tbody").sortable({
handle: ".handle",
helper: tableRowHelper,
placeholder: 'ui-state-highlight',
cursor: 'move',
start: function (event, ui) {
ui.placeholder.height(ui.helper.height());
}
}).disableSelection();
});
<asp:DataList ID="dlList" runat="server" >
<HeaderTemplate>
<tbody>
</HeaderTemplate>
<ItemTemplate>
// insert code to display required data
</ItemTemplate>
<FooterTemplate>
</tbody>
</FooterTemplate>
</asp:DataList>
Enjoy Coding :)
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
Submit an article or tip
