igGrid custom moving dialog

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<!-- grid --> 
<table id="grid"></table>
<!-- custom moving dialog --> 
<input type="button" id="buttonmoving" value="Custom Moving Dialog" style="margin-top: 1rem;"/>
<!-- dialog --> 
<div id="dialog">
<p style="margin: 0 0 2rem 0; font-weight: bold;">Custom Moving Dialog</p>
  <div style="display: block">
    <div style="display: flex">
      <p style="margin: 0 0.5rem 2rem 0;">Product ID</p>
      <input type="button" id="productidLeft" value="Left" style="margin-right: 0.5rem; height:30px; cursor:pointer;"/>  
      <input type="button" id="productidRight" value="Right" style="height:30px; cursor:pointer;"/>
    </div>
  <div style="display: flex">
    <p style="margin: 0 0.5rem 2rem 0;">Product Name</p>
    <input type="button" id="productnameLeft" value="Left" style="margin-right: 0.5rem; height:30px; cursor:pointer;"/>  
    <input type="button" id="productnameRight" value="Right" style="height:30px; cursor:pointer;"/>
  </div>
  <div style="display: flex">
    <p style="margin: 0 0.5rem 2rem 0;">Product Number</p>
    <input type="button" id="productnumberLeft" value="Left" style="margin-right: 0.5rem; height:30px; cursor:pointer;"/>  
    <input type="button" id="productnumberRight" value="Right" style="height:30px; cursor:pointer;"/>
 ...

JavaScript

$(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                height: "500px",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
                ],
                dataSource: adventureWorks,
                features: [
                    {
                        name: "ColumnMoving",
                        columnMovingDialogContainment: "window",
                    }
                ]
            });
        });
        //create dialog
        $("#dialog").igDialog({
                state: "closed",
                modal: true,
                draggable: false,
                resizable: false,
                height: "340px",
                width: "350px",
								zIndex: 100010
        });
        //create button for custom moving dialog
        $( "#buttonmoving" ).igButton( {
           labelText:$("#buttonmoving").val(),
                click: function ( e )
                {
                	$("#dialog").igDialog("open");
                }
       	});
        //variables for moving
        var productIdPosition = 0;
        var productNamePosition = 1;
        var productNumberPosition = 2;
        var makeFlagPosition = 3;
        //id
        $( "#productidRight" ).click(function() {
        	//columns in the grid
            var columns = $("#grid").igGrid("option", "columns");
            //not able to move more to right because it is on last position
        		if(productIdPosition !== 3){
            //move to right if it is not on last position '3'
           ...