JRS 103 - User can resize columns via API

by obobruyko

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://localhost:8080/JRS-pro/scripts/require-jquery.js"></script>
<script>
        
var __jrsConfigs__ = {
   urlContext : "http://localhost:8080/JRS-pro"
};
    
require.config({
    baseUrl: "http://localhost:8080/JRS-pro/scripts",
    enforceDefine:true,
    paths: {
        "lodash": "common/lib/lodash-1.1.1",
        "underscore" : "config/lodashTemplateSettings",
        "text" : "common/plugin/text",
        "common/request": "common/corsRequest",
        "easyxdm": "common/lib/xdm-1.0.1"
    },
    
    shim: {
        "jrs.configs": {
            exports: "__jrsConfigs__"
        }
    }
});    
</script>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">


<div style="margin-top:5px;width: 500px;height:300px">
    <table cellspacing="0" cellpadding="0" width="100%" height="100%">
        <tr>
            <td>
                <div style="width: 500px;height:300px;">
                <div id="US104" style="width: 100%;height:100%" class="MyTable"></div>
                    </div>
            </td>
            <td><div id="v_scroll"> </div></td>
        </tr>
        <tr>
            <td><div id="scroll"> </div></td>
            <td></td>
        </tr>
    </table>
     
    
    
    <div width="100%">
        <div>
            <div>
             <label for="row">Row:</label>
             <input type="text" id="row"></input>
            </div>
            <div>
             <label for="row">Height:</label>
            <input type="text" id="height"></input>
            </div>
        </div>
        <div>
            <div>
                <label for="row">Column:</label>
                <input type="text" id="column"></input>        
            </div>
 ...

CSS

#US104{
    background-color: #E6E6FA;
    border: 1px solid black;
}

.context-menu {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width:100px;
    display:none;
    border-radius: 4px;
    -moz-border-radius:4px; 
    -webkit-border-radius: 4px;     
    z-index:91;
}

.cell-green {
  background-color: green;  
}

.cell-red {
  background-color: red;  
}

/*    TABLE      */ 
.MyTable {
	margin:0px;
    padding:0px;
}

.MyTable table {
    border-collapse: collapse;
    border-spacing: 0;
	margin:0px;
    padding:0px;
}
.MyTable tr:nth-child(odd){ background-color:#e5e5e5; }
.MyTable tr:nth-child(even)    { background-color:#ffffff; }
.MyTable td {
	vertical-align:middle;
	text-align:left;
	padding:0px;
    margin:0px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
    overflow: hidden;
    border: 1px solid black;
}

JavaScript

//<%-- ****************************************************** --%>
//<%-- US 103 -  User can resize columns via API              --%>
//<%-- ****************************************************** --%>
    

    require([
        "components/table/BaseGrid",
        "components/table/StaticGridDataProvider",
        "components/table/DynamicGridStrategy",
        "components/table/StaticGridStrategy"
    ], function(BaseGrid, StaticGridDataProvider,DynamicGridStrategy,StaticGridStrategy) {

        //Grid data
        var gridData = [
            [{label: "Header.", colspan: 10},null,null,null,null, null,null,null,null,null,{label: "34"},{label: "35"},{label: "21"},{label: "asdf"},{label: "23"}],
            [{label: "21", rowspan: 10},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "df"},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label: "asdf"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "42"},{label: "43"},{label: "44"},{label: "45"},{label: "21"},{label: "22"},{label: "asdf"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "52"},{label: "53"},{label: "54"},{label: "55"},{label: "21"},{label: "22"},{label: "23"},{label: "asdf"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "asdf"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "asfd"},{label: "22"},{label:...