column.renderer = {
     "type": "bar",
     "origin":"right"
}

// 컬럼 버튼
column.buttonVisibility = false;
 
// 편집기의 버튼
column.editButtonVisibility = false;

column.button = 'popup';

let col = grid.columnByName('col1')
col.header.checkLocation = 'leftEdge';

column.editor = { type: "date", maxLength: 6, yearNavigation: true, defaultShowDate: 'today' }

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		dropDownPosition: 'editor'
}

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		itemSortStyle: 'descending'
}

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		labels: ['label1', 'label2'],
		displayLabels: 'valueLabel'
}

column.edgeMark = "leftTop"

grid.editOptions.exitGridWhenTab = 'grid';

gridView.rowGroup.mergeExpanderVisibility = 'always';

gridView.filterMode = 'explicit';

gridView.onMenuItemClicked =  function (grid, item, clickData) {
     console.log(item.label + "was clicked.");
     console.log("cellType is: " + clickData.cellType);
};

grid.displayOptions.fitStyle = 'even'

grid.sortingOptions.handleVisibility = 'visible';

...
"renderer": {
         "type": "check",
         "checkLocation": "right"
     },
...

let model = gridView.getModelAs(3, 'row');

let menu = [{
     label: "menu3 입니다",
     type: "check",
     checked: true,
 }]

column.renderer = {
    "type": "shape",
    "shape": "triangle" // PolygonShape
}

grid.displayOptions.refreshMode = 'visibleOnly';

grid.setRowGroup({expandedAdornments: "none"});

grid.displayOptions.rowBlockCallback = f;
grid.displayOptions.rowBlockType = 'row';

grid.editOptions.scrollOnEditing = 'cancel';

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

gridView.sortMode = "explicit";

grid.sortingOptions.style = 'inclusive'

let sum = gridView.getSummary('unitPrice', 'sum');

let sum = gridView.getSummary('unitPrice', 'sum');

column.editor = { type: "line", maxLength: 1, textCase: 'lower'}

gridView.setValidations({
     message: 'Too expensive!',
     criteria: "values['UnitPrice'] > 100",
     level: 'error'
})

gridView.setValidations({
     message: 'Too expensive!',
     criteria: "values['UnitPrice'] > 100",
     mode: 'always'
})

let fields = [{
...
     dataType: "text",
     subType: "char",
...
}]
 
ds.setFields(fields);

const f = function(ds, row, field, value) {
     return !!value;
}

const f = function(column, values) {
     const emptyText = '빈 아이템'
     if (!values) {
         return null;
     }
     const valids = values.filter(function (el) { return el != undefined && el != null; });
     const min = Math.min.apply(null, valids);
     const vlen = values.length;
     let unit;
     if (vlen > 15) {
         const groupCount = Math.min(Math.round(vlen / 5)), 10);
         unit = Math.round(vlen / groupCount);
     } else {
         unit = 1;
     }
     let categories = [];
     let gvals = [];
     let gindex = 0;
     let gmin = min;
     let isEmpty = false;
     for (let i = 0; i < vlen; i++) {
         const v = values[i];
         if (v === undefined || v === null) {
             isEmpty = true;
             continue;
         }
         if (i == gindex + unit || i === vlen - 1) {
             categories.push({ text: gmin + ' ~ ' + v, values: gvals });
             gvals = [v];
             gindex = i;
             gmin = v;
         } else {
             gvals.push(v);
         }
     }
     if (isEmpty) {
         categories.push({ text: emptyText, empty: true });
     }
     return categories;
}

const f = function (grid, layout, itemIndex) {
    var value = grid.getValue(itemIndex, layout.column.dataIndex);
    if (value) {
        return value[0] === "B" ? 3 : value[0] === "F" ? 2 : 1;
    }
    return 1;
};

const f1 = function(grid, model) {
     if (model.value > 5) return "rg-data-cell bold-cell";
     if (model.value < 0 && model.value > -10) {
         return {
             styleName: 'custom-negative-cell',
             renderer: {
                 type: 'bar',
                 absoluteValue: true
             }
         }
     }
}
 
const f2 = function(grid, model) {
     if (model.value > 10) {
         return {
             styleName: 'custom-summary-cell'
         }
     }
}
 
// 전체 데이터 셀에 적용
gridView.setCellStyleCallback(f1);
 
// 컬럼 별 적용
let column = gridView.columnByName('Price');
column.styleCallback = f1;
 
// 푸터 적용
gridView.footer.cellStyleCallback = f2;
 
// header summary 적용
gridView.headerSummary.cellStyleCallback = f2;

const f = function(dataSource, item) {
     if (item.value) {
         return item.value !== 'doNotCheck';
     }
     else {
         return false;
     }
}

const callback = function(fieldName, dataRow, value) {
  return JSON.stringify(value);
}
 
gridView.columnByName("objectColumn").objectCallback = callback;

const f = function(v1, v2, sensitive, partialMatch) {
     if (v1 === v2) {
          return true;
     }
     let s1 = String(v1);
     let s2 = v2 == null ? undefined : String(v2);
     if (!s1 && !s2) {
          return true;
     }
     if (!s1 || !s2) {
          return false;
     }
     if (!caseSensitive) {
          s1 = s1.toLowerCase();
          s2 = s2.toLowerCase();
     }
     if (partialMatch) {
     	    return s2.indexOf(s1) >= 0;
     } else {
     	    return s1 == s2;
     }
}

const f = function(grid, itemIndex, column, value) {
     if (value != null && column.name === "number1") {
         return value + "";
     }
}
grid.copyOptions.copyTextCallback = f;

createFooterCallback: function(owner, group, footerIndex) {
		if (group.level >= 5) { return false }
		if (group.level === 4) {
			let relation2 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation2");
			return relation2 === "친족"
		}
		if (group.level === 3) {
			let relation1 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation1");
			return relation1 === "동일인측"
		}
		return true;
	}

gridView.dataDropOptions.dragCallback = function (source, sourceItems, target, targetItem) {
    return targetItem % 2 == 0;
}

gridView.dataDropOptions.labelCallback = function (source, sourceItems, target, targetItem) {
    return sourceItems.length + " 개의 행";
}

gridView.dataDropOptions.callback = function (source, sourceItems, target, targetItem) {
    alert('row from ' + sourceItems + ' to ' + targetItem);
    for (var i = 0; i < sourceItems.length; i++) {
        var r = source.getDataRow(sourceItems[0]);
        var ds = source.getDataSource();
        var row = ds.getJsonRow(r)
        if (targetItem >= target.getItemCount()) {
            ds.addRow(row);
        } else {
            r = target.getDataRow(targetItem);
            target.getDataSource().insertRow(r, row);
        }
    }
}

// string
ds.setFields('fieldnName');
 
// model
let fields = ds.getFields();
ds.setFields(fields);
 
// config
ds.setFields({
     fieldName: 'OrderID',
     dataType: 'text',
});

// string
dataProvider.setFilters([
  "value['field1']='가수'",
  "value['field2']='여자'"
], "and");
 
// object
dataProvider.setFilters([
  {criteria: "value['field1']='가수'"},
  {criteria: "value['field2']='여자'"}
], "and");

// array
let row = ['value1', 'value2', 'value3']
 
// object
let row = {field1: 'value1', field2: 'value2', field3: 'value3'}

const f = function(ds, row, field, value) {
     if (value === 'today) {
         return new Date();
     }
     return new Date(value);
}

gridView.dataDropOptions.fieldMapCallback = function (source, sourceItems, target, targetItem) {
    if (targetItem % 2 == 0) {
        return {
            Country: "Country",
            CompanyName: "ShipAddress",
            EmployeeID: "ShipPostalCode"
        }
    }
}

// string
column.editor = {
     type: 'line',
     mask: '9999-99-99'
}
 
// object
column.editor = {
     type: 'line',
     mask: {
         editMask: '9999-99-99',
         placeHolder: 'input...'
     }
}

gridView.rowGroup.expanderVisibleCallback = function(grid, group) {
     // 2 level인 group만 expander를 표시한다.
     return group.level === 2;
	}

function (ds, rowID, fieldName, fields, values) {
    let quantity = values[fields.indexOf("Quantity")];
    let unitprice = values[fields.indexOf("UnitPrice")];
    if (isNaN(quantity) || isNaN(unitprice))
        return undefined;
    else
        return quantity >= 1000 ? Math.round(quantity * unitprice * 0.95) : quantity * unitprice;
}

const f = function(ds, dataRow, level, field, filter, value) {
     let res = isMatched(value, filter.criteria);
     return res;
}

grid.filterPanel.filterPanleCallback = function(grid, column, operator, text) {
 if (column.fieldName === "notRun") {
     return true; // notRun인 필드는 filtering을 하지 않는다.
 } else if (column.fieldName = "userFilter") {
     return {
         operator: InlineFilterOperator.STARTS_WITH,
         text: text.substr(0,2) // 입력된 문자중 앞 2글자만 대상으로 필터링.
     }
 }
}

const f = function(grid, model) {
     var s = model.value;
     var date = grid.getValue(model.item.index, "date")
     s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " 신규" : "";
     return s;
}
 
column.renderer = {
     type: 'text',
     ariaLabelCallback: f
}

const f = function(grid, model) {
     return 'catimage'
}

const f = function(grid, itemIndex, column, value) {
     if (typeof value === "number") {
         return value % 2 === 1;
     }
     else if (typeof value ==="boolean") {
         return value;
     }
     else {
         return Boolean(v);
     }
}

const callback = function (grid, model) {
  let cls = "";
  model.value.indexOf("새글") > 0 && (cls += " new");
  model.value.indexOf("비밀글") > 0 && (cls += " lock");
  // link에 새글/비밀글 icon을 background형태로 추가하는 경우
}
 

const f = function(grid, model) {
     const base = '/images/';
     if (jpgSet.indexOf(model.value)){
         return base + model.value + '.jpg';
     }
     else base + 'default.jpg';
}

...
     "renderer" : {
         "type": "link",
         "urlCallback": function (grid, cell) {
             return "http://realgrid.com";
         },
     }
...

const f = function(grid, model) {
     if (model.value) {
         return 'ellipse';
     }
     else {
         return 'minus';
     }
}

const f = function (grid, model, width, height) {
    return "<img src='images/realgrid-logo.png' height='" + height / 2 + "'></img>" + "<div>" + model.value + "</div>";
}
 
column.renderer = {
    type: "html",
    callback: f
}

var f = function(grid, itemIndex, footerIndex) {
    var dataRow = grid.getGroupModel(itemIndex, true).firstDataItem.dataRow;
    var value = grid.getDataSource().getValue(dataRow, "area2name");
    return value && value.indexOf("군") >= 0 ? `style-1-${footerIndex}` : undefined;
};
 
gridView.rowGroup.setFooters([{styleCallback: f},{styleCallback: f}]);

gridView.rowGroup.headerStatement = undefined;
gridView.rowGroup.headerCallback = function(grid, group) {
     var ds = grid.getDataSource()
     if (group.level === 1) {
         return ds.getOrgFieldName(group.groupField) + " - " + group.firstDataItem.getData(group.groupField) + " - " + group.descendantCount + " rows"
     } else if (group.level === 2) {
         var sum = group.getSum("number");
         return isNaN(sum) ? "합계 없음" : ("합계 => "+ sum.toString());
     } else {
         return "GroupLevel => "+group.level.toString()
     }
	}

holidays: [
     {
         type : "date",
         dates : ["2020-01-24","2020-01-25","2020-01-26","2020-01-27"],
         styleName: "seollal",
         tooltips : ["설날1","설날2","설날3","설날4"]
     },
  ...
]

// array of LayoutInfo
[
     {column: "OrderID", visible: true, width: 80},
     {column: "CustomerID", visible: true, width: 90},
     {
         name: "companyGroup"
         items: [
             {
                 name: "countryGroup"
                 items: [
                     {column: "Country", visible: true, width: 100},
                     {column: "Phone", visible: true, width: 100}
                 ]
                 visible: true,
                 direction: "horizontal",
                 width: 250,
                 header: {visible: true, text: "Country Group"}
             },
             {column: "CompanyName", visible: true, width: 100}
         ]
         visible: true,
         direction: "vertical",
         width: 250,
         header: {visible: true, text: "Company Group"}
     },
     {column: "EmployeeID", visible: true, width: 90}
]