knowledgecenter-breadcrum

Knowledge Center

25 Jun, 2020

Row Reorder by Drag and move rows in DataTable plug-in.

Posted on 25 Jun, 2020 by Admin, Posted in Dynamics 365

Row Reorder by Drag and move rows in DataTable plug-in. Blogs

Row Reorder by Drag and move rows in DataTable plug-in.

Introduction

In my last blog I explain how to display a grid using DataTable plugin. In this blog I’m going to explain how we can add feature of Row-Reorder in DataTable. Row Reorder adds the ability for rows in a DataTable to be reordered through click and drag / touch and drag.

Step by Step

  1. We are using jQuery plugin DataTable and for that we must add following CDN links under the tag.
    1. jQuery : https://code.jquery.com/jquery-3.3.1.js
    2. CSS link: https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css
    3. JS link: https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js
  2. For reorder :
    1. JS link: https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js
    2. CSS link: https://cdn.datatables.net/rowreorder/1.2.6/css/rowReorder.dataTables.min.css
  3. In
  • In < head > tag, add script using [removed] tag as following:
    1. [removed]
      $(document).ready(function () {
      var table = $(‘#ReorderTable’).DataTable({
      rowReorder: true
      });
      });
      [removed]
  • To make GUI more relatable then change cursor symbol when we hover to column while moving.
    1. #ReorderTable tbody td:first-child {
      cursor: move;
      }
  1.  

Above example is for implementing DataTable plugin with reorder from scratch. If you already have DataTable Plugin implementer and you want to add Row Reorder feature, then just add reorder related JS and CSS link as above and add following property to DataTable :

rowReorder: {
dataSrc: ‘
}

tag, add table using tag and give appropriate id table as following:

  1.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sr. No. Full Name Phone Number
1 Karan Sharma 7878787878
2 Raju Rastogi 32323232323
3 Anil Rao 23232323232

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Comment

This is a Required Field

Loading

Recent Updates

Blogs
07 Sep, 2023

Optimizing Storage with SubscriptionTrackingDeletedObject Cleanup

What is SubscriptionTrackingDeletedObject? The "SubscriptionTrackingDeletedObject" table is linked to the "DeletionService," which handles two types of cleanup: organization-wide and record-specific.…

READ MORE
Blogs
05 Sep, 2023

How to create real-time customer journeys in Dynamics 365 Marketing

Introduction: This blog will show how to create real-time customer journeys in Dynamics 365 Marketing. Customer journeys can be either…

READ MORE
Blogs
30 Aug, 2023

D365 CUSTOMER SERVICE: CUSTOMER 360 COMPONENT

Introduction: In Dynamics 365 (D365) Customer Service, the 'Customer 360' Component provides a comprehensive view of information and enables users…

READ MORE