igGrid + jQueryUI Drag & Drop

by Ali Soltani

HTML

<script src="https://dev.monumove.com/js/jquery-1.11.3.min.js"></script>
<script src="https://dev.monumove.com/js/jquery-ui-1.11.4.min.js"></script>
<script src="https://dev.monumove.com/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dev.monumove.com/css/infragistics.css">
<link rel="stylesheet" href="https://dev.monumove.com/css/infragistics.theme.css">
<link rel="stylesheet" href="https://dev.monumove.com/css/bootstrap.css">
<link rel="stylesheet" href="https://dev.monumove.com/css/style.css">
<script src="https://dev.monumove.com/js/infragistics.core.js"></script>
<script src="https://dev.monumove.com/js/infragistics.lob.js"></script>
<script src="https://dev.monumove.com/js/infragistics.dv.js"></script>
<h3 id="LBLRFDListHeader" class="page-header">RFD List</h3>
                
                <div class="row">
                  <div class="col-lg-12">
                    <select id="DDLStoreID" class="form-control">
                      <option value="00000000-0000-0000-0000-000000000000">Fake Store</option>
                    </select>
                  </div>
                </div>
                
            <!-- GRID BODY -->
            <div class="row">
                <div class="col-lg-12">
                    <table id="GRIDRFDList"></table>
                </div>
            </div>
            <!-- GRID BODY -->

            <div id="DIVRFDListTempRowHolder" class="hidden"></div>

            <!-- SPACER -->
            <div class="row">
                <div class="col-lg-2">

                </div>
                <div class="col-lg-8">
                    <div style="margin-top:35px;margin-bottom:35px;"></div>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
            <!-- SPACER -->
            
            <!-- STORE "BUCKETS" -->
            <div id="DIVRFDListStoreContainer" class="super-high-z-index"></div>
            <!-- STORE "BUCKETS" -->

JavaScript

$(document).ready(function(){
  initializeRFDList();
});

function initializeRFDList(store_id) {

  // refresh the list of contracts and work orders
  refreshRFDList(store_id);

  // clear the store container
  $("#DIVRFDListStoreContainer").empty();

  // initialize the row and the cell counter
  var row = $("<div class='row'></div>");
  var x = 0;

  var Result = [
  {"ID":"c3bf5936-8786-e711-8135-caf5c8230062","Name":"Fake Store","NumDeliveriesScheduled":15},
  {"ID":"c3bf5937-8786-e711-8135-caf5c8230062","Name":"Fictional Store","NumDeliveriesScheduled":3},
  {"ID":"c3bf5938-8786-e711-8135-caf5c8230062","Name":"Unreal Store","NumDeliveriesScheduled":8},
  {"ID":"c3bf5939-8786-e711-8135-caf5c8230062","Name":"Fraudulent Store","NumDeliveriesScheduled":21},
  {"ID":"c3bf59310-8786-e711-8135-caf5c8230062","Name":"Dummy Store","NumDeliveriesScheduled":4}];

  if (Result.length > 0) {

    // loop through each tile in the database and build the html for it
    $.each(Result, function (i) {

      // increment cell counter
      x += 1;

      // if this is the last cell in the row
      if (x == 6) {

        // define the individual pieces of the tile
        var col = $("<div class='col-md-2'></div>");
        var container = $("<div class='etv-dashboard-tile-container div-fixed-height' data-id='" + Result[i]["ID"] + "'></div>");
        var lbl_name = $("<label class='etv-dashboard-tile-header label-fixed-height'></label>").text(Result[i]["Name"]);
        var line_break = $("<br/>");
        var lbl_count = $("<label class='etv-dashboard-tile-count'></label>").text(Result[i]["NumDeliveriesScheduled"]);

        // put the pieces of the tile together
        container.append(lbl_name);
        container.append(line_break);
        container.append(lbl_count);
        col.append(container);
        row.append(col);

        // add the current row to the container since we know the row is full
        $("#DIVRFDListStoreContainer").append(row);

        // start a...