Drag-and-Drop between the dashboard element-blog xlinesoft

In this article we will show how you can apply Drag-N-Drop between two dashboard elements. It makes more sense to drag and drop notes between two lattice. In this example we will use two tables named order And Orders_archive.

This is how it looks in the application produced:

1. SQL queries that make tables needed in the database


CREATE TABLE `orders`(`OrderID` int NOT NULL AUTO_INCREMENT, `CustomerID` varchar(5) NULL DEFAULT NULL, `EmployeeID` int NULL DEFAULT NULL, `OrderDate` datetime NULL DEFAULT NULL, `RequiredDate` datetime NULL DEFAULT NULL, `ShippedDate` datetime NULL DEFAULT NULL, `ShipVia` int NULL DEFAULT NULL, `Freight` decimal(12,2) NULL DEFAULT 0.00, `ShipName` varchar(40) NULL DEFAULT NULL, `ShipAddress` varchar(60) NULL DEFAULT NULL, `ShipCity` varchar(15) NULL DEFAULT NULL, `ShipRegion` varchar(15) NULL DEFAULT NULL, `ShipPostalCode` varchar(10) NULL DEFAULT NULL, `ShipCountry` varchar(15) NULL DEFAULT NULL, `Complited` tinyint NOT NULL DEFAULT 0, `order` int NULL DEFAULT NULL, PRIMARY KEY (`OrderID`))CHARACTER SET utf8;
CREATE TABLE `orders_archive`(`OrderID` int NOT NULL AUTO_INCREMENT, `CustomerID` varchar(5) NULL DEFAULT NULL, `EmployeeID` int NULL DEFAULT NULL, `OrderDate` datetime NULL DEFAULT NULL, `RequiredDate` datetime NULL DEFAULT NULL, `ShippedDate` datetime NULL DEFAULT NULL, `ShipVia` int NULL DEFAULT NULL, `Freight` decimal(12,2) NULL DEFAULT 0.00, `ShipName` varchar(40) NULL DEFAULT NULL, `ShipAddress` varchar(60) NULL DEFAULT NULL, `ShipCity` varchar(15) NULL DEFAULT NULL, `ShipRegion` varchar(15) NULL DEFAULT NULL, `ShipPostalCode` varchar(10) NULL DEFAULT NULL, `ShipCountry` varchar(15) NULL DEFAULT NULL, `Complited` tinyint NOT NULL DEFAULT 0, `order` int NULL DEFAULT NULL, PRIMARY KEY (`OrderID`))CHARACTER SET utf8;

2. Make a dashboard in phprunner or asprunner.net and add two tables there.

3. The following code goes to the Javascript Onload event from both order And Orders_archive Table List Page.

Things to change:
– Var connecttable must contain other table names. In the order The table code must say “Orders_archive” and vice versa.
– “dashboard_dashboard.php” URL from the dashboard page. At asprunner.net it will be something like dashboard
– “Orderid” – The name of the key column of the current table.


$("[data-grid-message]").hide();
$("[data-location='grid']").show();

var connectTable = "orders_archive";

if(pageObj.dashboard){
     // to initialize a plugin we will use a container where there grid is placed on the dashboard
    var panel = $( " > tbody",pageObj.gridElem ).parents(".panel-body");
    panel.sortable({
      connectWith: "#dashelement_"+connectTable+"_grid"+pageObj.dashboard.id+" .panel-body",
      items: 'tbody .r-gridrow',
      helper: 'clone',
      opacity: 0.6,
      stop:function(e,ui){
         if ($(e.target).has(ui.item).length) 
          $(e.target).sortable("cancel");
      },
      receive: function( e, ui ) {
          // we moved a row from another grid
        var OrderID = ui.item.find("[data-fieldname="OrderID"]").find("span").html(),order = [];
          // make a post with from and to table names and also with the OrderID that needs to be updated
        $.post("dashboard_dashboard.php",{a:"replaceRow",from:connectTable,
           to:pageObj.tName,OrderID:OrderID},function(response){
				console.log(response);
		  });

        // Update sort order as well. Not necessary but it looks better this way

        $.each($(" > tbody",pageObj.gridElem).find(".r-gridrow"),function(i,row){
          var orderId = $(row).find("[data-fieldname="OrderID"]").find("span").html();
          order.push({OrderID:orderId,order:(i+1)});
        });
        $.post("dashboard_dashboard.php",{order:order,table:pageObj.tName});
        /* update 'Displaying n - n of n' for both tables */
        /* decrease count */
        updateDetails( $("#dashelement_"+connectTable+"_grid"+
             pageObj.dashboard.id+" [data-itemid='details_found']") ,-1);
        /* increase count */
        updateDetails( $("#dashelement_"+pageObj.tName+"_grid"+
           pageObj.dashboard.id+" [data-itemid='details_found']") ,1);
      
      }
    });
    function updateDetails(details,number){
      var html_details = details.html(),
      result_details = /Displaying (\d+) - (\d+) of (\d+)/g.exec(html_details),
      dispay = result_details[2],of = result_details[3];
      html_details = html_details.replace(/- (\d+)/g,"- "+(parseInt(dispay) + number));
      html_details = html_details.replace(/of (\d+)/g,"of "+(parseInt(of) + number));
      details.html(html_details);

    }
};

4. Dashboard page: Beforeprocess event

In this event we added a new note to the target table and deleted the same thing in the source table. The second part of this code helps us update the order of sort

PHP code


if( postvalue("a") === "replaceRow"){
	$fromRs = DB::Select(postvalue("from"),array("OrderID" => postvalue("OrderID")));
	$selectError = DB::lastError();
	$fromRow = $fromRs->fetchAssoc();
	if($fromRow){
		DB::Insert(postvalue("to"),$fromRow);
		DB::Delete(postvalue("from"),array("OrderID" => postvalue("OrderID")));
	}
	exit();
}

// update sort order if required

if( postvalue("order") ){
$order = postvalue("order") ;
foreach($order as $orderInfo){
DB::Update(postvalue("table"),array("order" => $orderInfo["order"]),
    array("OrderID" => $orderInfo["OrderID"]));
}
exit();
}

Code C#


if(XVar.Equals(XVar.Pack(MVCFunctions.postvalue(new XVar("a"))), XVar.Pack("replaceRow")))
			{
				dynamic fromRow = null, fromRs = null, selectError = null;
				fromRs = XVar.Clone(DB.Select((XVar)(MVCFunctions.postvalue(new XVar("from"))), (XVar)(new XVar("OrderID", MVCFunctions.postvalue(new XVar("OrderID"))))));
				selectError = XVar.Clone(DB.lastError());
				fromRow = XVar.Clone(fromRs.fetchAssoc());
				if(XVar.Pack(fromRow))
				{
					DB.Insert((XVar)(MVCFunctions.postvalue(new XVar("to"))), (XVar)(fromRow));
					DB.Delete((XVar)(MVCFunctions.postvalue(new XVar("from"))), (XVar)(new XVar("OrderID", MVCFunctions.postvalue(new XVar("OrderID")))));
				}
				MVCFunctions.ob_flush();
				HttpContext.Current.Response.End();
				throw new RunnerInlineOutputException();
			}
			if(XVar.Pack(MVCFunctions.postvalue(new XVar("order"))))
			{
				dynamic order = XVar.Array();
				order = XVar.Clone(MVCFunctions.postvalue(new XVar("order")));
				foreach (KeyValuePair<xvar dynamic=""> orderInfo in order.GetEnumerator())
				{
					DB.Update((XVar)(MVCFunctions.postvalue(new XVar("table"))), (XVar)(new XVar("order", orderInfo.Value["order"])), (XVar)(new XVar("OrderID", orderInfo.Value["OrderID"])));
				}
				MVCFunctions.ob_flush();
				HttpContext.Current.Response.End();
				throw new RunnerInlineOutputException();
			}
			return null;</xvar>

Enjoy!

Game Center

Game News

Review Film
Rumus Matematika
Anime Batch
Berita Terkini
Berita Terkini
Berita Terkini
Berita Terkini
review anime