How to implement JQuery UI Sortable in DataList Control ?
0/5 (0 vote)
Basically when DataList is rendered HTML in Table and like below HTML Code placed at ItemTemplate
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 :)