.&1|?" {}:+dt 4BEn!3_${Eڞtڹċ.5[o3 FznF@^4fZǝ];k|x$cT+.<ſ,o+nNj r2$/w>qQI^ZNAsqɾ:3u`{: 5%43m?sH$3joZV(@H&\bEH$$1=3 *yckS`WWRK*2\MzNw1򖦚46b V±HߪlTv Y;QJm-`WpcA7P@?bm\K'gYmK5!ǻLYط'M󸾙wu[aM1Q+P#}OXe0\"ʭCZS=, 1d cGbvof3#! C:j:-mm݋\vn҈]>WIq*zB] ..ʝ/rw -m:A̽[,NǡqÎzro(ǒ[l~On]wsZJ56cs.Zmuwg>CXe\t<1b{w[үh=k~e㳜vTN:Y 'm@.W]^ewyM1L wpOSZfG @(PaH-GIk)$NU$^Ti1|@c@S5 ҆Nҕ;i!~$81pCКrw+cu&RA DJDMXu'YbUAB 1KqIPXL촖>d\cIsTM/8<6syb V@|-풯@f)C-H*K\JQFMFh_iQZwFwvTo;o{H1_B%D^tޡ#*0 -pNͰi O,s;I^{Hlo¹1t%Zg#ؘK!8βSfZv}Q>DvyQ#= ^&x > D.yxdIȊER!O?$tG{U*}k^z?r`ψcX._"-cFCĶ$AxGi,-K%#3:B:wjrU~e\KP53L/v Yyp,Ѭn [\%1&nLX GO8nn&,`\fEB']qi%{ ^F_qhX *Ohϸ+"#UClVK݆]aWyn#»MV&]95(DQP^NΆ* h4b'Ȱ%/Ы/]r {+>7a/C%&9&B?LWN/Ix!Wϛ]_GA nͻۄCf+)0s`epX;'am) \* 8l|&Ac.^ 9he4}-~8nn&,`\fBQ-:J 6h+ w`\̹$G 4ۣ ɪ&nLX GO8nn&,`\f[rf"ϛ]_GA nͻÙ O :kN 1oBIl-/.ݻ#n7qx9ڞ}e,8nn&,`\fka٥ϑ*P,=pqAg.+rJ&8nn&,`\fXH O/AvF_.ފXT|!Cϛ]_GA nͻl-/.ݻԡ`?HT8kޑe AdDF[ѹϛ]_GA nͻKAq7\n{O8nn&,`\f`׸Q 3r̯]8nn&,`\fnE]gհI^t}p4m`!,Ѭn [\%1 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 = $("").appendTo(editor); input.jqxInput({ width: '100%', height: '100%' }); break; case "align": var dropDownList = $("
").appendTo(editor); dropDownList.jqxDropDownList({width: '100%', height: '100%', autoDropDownHeight: true, source: ["Left", "Center", "Right"] }); break; case "color": var dropDownButton = $("
"); 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 = $("
").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 ""; } } ] }); });