Wijmo 5 - FlexGrid Scroll to Specific Column with FrozenColumns

by Manish Gupta

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.151/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<div id="FlexGrid1"></div>

CSS

.yellow{
  background-color:yellow !important;
}

JavaScript

var data = [];
for (var i = 0; i < 3; i++) {
    data.push({
        id: i + 1,
        text: 'A' + i,
        date: new Date(),
        id1:i+1,
        text1:'B'+i,
        date1:new Date(),
        id2:i+1,
        text2:'C'+i,
        date2:new Date()
    });
}

var flexGrid1 = new wijmo.grid.FlexGrid('#FlexGrid1', {
    itemsSource: data,
    frozenColumns:2
});
var colIndex= flexGrid1.columns.getColumn("id2").index;
flexGrid1.columns[colIndex].cssClass='yellow';

setTimeout(function(){
	flexGrid1.scrollPosition= new wijmo.Point(-(getColPosition(flexGrid1,colIndex)),0)
},10)


function getColPosition(grid,index){
	var frzCols=grid.frozenColumns,
    width=grid.columns[frzCols].pos,
    pos=grid.columns[colIndex].pos;
    return (pos-width);
}