jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
221 lines (208 loc) • 11.9 kB
HTML
<html lang="en">
<head>
<title id='Description'>In this sample is illustrated how to create a custom editor for each jqxTreeGrid cell.
</title>
<meta name="description" content="Property Editor - JavaScript Tree Grid Demo | jQWidgets">
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcolorpicker.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../sampledata/generatedata.js"></script>
<script type="text/javascript">
function getTextElementByColor(color) {
if (color == 'transparent' || color.hex == "") {
return $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>transparent</div>");
}
var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>#" + color.hex + "</div>");
var nThreshold = 105;
var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
element.css('color', foreColor);
element.css('background', "#" + color.hex);
element.addClass('jqx-rc-all');
return element;
}
$(document).ready(function () {
var data = [
{
"property": "Name", "value": "jqxTreeGrid", type: "string"
},
{
"property": "Location", "value": "0, 0", type: "string", children: [{ "property": "X", "value": "0", type: "number" }, { "property": "Y", "value": "0", type: "number" }]
},
{
"property": "Size", "value": "200, 200", type: "string", children: [{ "property": "Width", "value": "200", type: "number" }, { "property": "Height", "value": "200", type: "number" }]
},
{
"property": "Background", "value": "#4621BC", type: "color"
},
{
"property": "Color", "value": "#B1B11B", type: "color"
},
{
"property": "Alignment", "value": "Left", type: "align"
},
{
"property": "Enabled", "value": "true", type: "bool"
}
];
var source =
{
dataType: "json",
dataFields: [
{ name: "property", type: "string" },
{ name: "value", type: "string" },
{ name: "type", type: "string" },
{ name: "children", type: "array" }
],
hierarchy:
{
root: "children"
},
localData: data
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
$("#treegrid").on('cellValueChanged', function (event) {
// Update the Location and Size properties and their nested properties.
var args = event.args;
var row = args.row;
var records = row.records;
// update the nested properties when a parent value is changed.
if (records.length > 0) {
var values = args.value.split(',');
for (var i = 0; i < values.length; i++) {
var value = $.trim(values[i]);
var rowKey = $("#treegrid").jqxTreeGrid('getKey', records[i]);
$("#treegrid").jqxTreeGrid('setCellValue', rowKey, 'value', value);
}
}
// update the parent value when the user changes a nested property,
else if (row.level == 1) {
var parent = row.parent;
var parentRowKey = $("#treegrid").jqxTreeGrid('getKey', parent);
var value = "";
var records = parent.records;
if (records.length > 0) {
for (var i = 0; i < records.length; i++) {
var rowKey = $("#treegrid").jqxTreeGrid('getKey', records[i]);
var cellValue = $("#treegrid").jqxTreeGrid('getCellValue', rowKey, 'value');
value += cellValue;
if (i < records.length - 1) {
value += ", ";
}
}
}
$("#treegrid").jqxTreeGrid('setCellValue', parentRowKey, 'value', value);
}
});
$("#treegrid").jqxTreeGrid(
{
source: dataAdapter,
altRows: true,
autoRowHeight: false,
editSettings: { saveOnPageChange: true, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true },
editable: true,
columns: [
{ text: 'Property Name', editable: false, columnType: 'none', dataField: 'property', width: 200 },
{
text: 'Value', dataField: 'value', width: 230, columnType: "custom",
// creates an editor depending on the "type" value.
createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
var row = $("#treegrid").jqxTreeGrid('getRow', rowKey);
switch (row["type"]) {
case "string":
case "number":
var input = $("<input class='textbox' style='border: none;'/>").appendTo(editor);
input.jqxInput({ width: '100%', height: '100%' });
break;
case "align":
var dropDownList = $("<div class='dropDownList' style='border: none;'></div>").appendTo(editor);
dropDownList.jqxDropDownList({width: '100%', height: '100%', autoDropDownHeight: true, source: ["Left", "Center", "Right"] });
break;
case "color":
var dropDownButton = $("<div style='border: none;'><div style='padding: 5px;'><div class='colorPicker" + rowKey + "'></div></div></div>");
dropDownButton.appendTo(editor);
dropDownButton.jqxDropDownButton({ width: '100%', height: '100%' });
var colorPicker = $($.find(".colorPicker" + rowKey));
colorPicker.jqxColorPicker({ width: 220, height: 220 });
colorPicker.on('colorchange', function (event) {
dropDownButton.jqxDropDownButton('setContent', getTextElementByColor(event.args.color));
});
dropDownButton.jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
break;
case "bool":
var checkbox = $("<div style='margin-top: 6px; margin-left: -8px; left: 50%; position: relative;' class='checkbox'/>").appendTo(editor);
checkbox.jqxCheckBox({ checked: cellvalue });
break;
}
},
// updates the editor's value.
initEditor: function (rowKey, cellvalue, editor, celltext, width, height) {
var row = $("#treegrid").jqxTreeGrid('getRow', rowKey);
switch (row.type) {
case "string":
case "number":
$(editor.find('.textbox')).val(cellvalue);
break;
case "align":
$(editor.find('.dropDownList')).val(cellvalue);
break;
case "color":
$($.find('.colorPicker' + rowKey)).val(cellvalue);
break;
case "bool":
$(editor.find('.checkbox')).val(cellvalue);
break;
}
},
// returns the value of the custom editor.
getEditorValue: function (rowKey , cellvalue, editor) {
var row = $("#treegrid").jqxTreeGrid('getRow', rowKey);
switch (row.type) {
case "string":
return $(editor.find('.textbox')).val();
case "number":
var number = parseFloat($(editor.find('.textbox')).val());
if (isNaN(number)) {
return 0;
}
else return number;
case "align":
return $(editor.find('.dropDownList')).val();
case "color":
return $($.find('.colorPicker' + rowKey)).val();
case "bool":
return $(editor.find('.checkbox')).val();
}
return "";
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id="treegrid"></div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>