jQWidgets Forums
jQuery UI Widgets › Forums › TreeGrid › Using Template Columns in TreeGrid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 7 months ago.
-
Author
-
Hi,
I have several columns in a TreeGrid. Almost all the columns are Template columns. I want to change the control put in the template based on the cellvalue/row. i.e say the cellvalue is a string I want a display a dropdownlist, If its a number I want a slider control. I tried it with If statement but the controls fails to change. below is my code fragment. Please help.
` $(“#treeGrid”).jqxTreeGrid(
{
sortable: false,
checkboxes: true,
columnsReorder: true,
source: dataAdapter,
altrows: false,
autoRowHeight: false,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
//$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 3);
},
editable: true,
columns: [
{ text: ‘ID’, editable: false, dataField: ‘id’, pinned: true, width: 150 },
{
text: ‘Functional Block’, dataField: ‘FB’, editable: false, pinned: true, width: 200, columnType: “template”,
cellsRenderer: function (rowKey, dataField, value, data) {
//debugger;
if (data.level == 0) {
return value;
}
else {
var rendStrng1;
rendStrng1 = value; +” ” + ““;
//rendStrng1 = value;
return rendStrng1;
}
},
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
debugger;
editor.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘50%’, height: ‘50%’ });},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
debugger;
editor.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘50%’, height: ‘50%’ });},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘Group 1’, dataField: ‘Group1’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
//debugger;
if (row != 103 && row != 104) {
editor.jqxDropDownList({ autoDropDownHeight: true, source: StatusDdlSource, width: ‘100%’, height: ‘100%’ });
}
else {
editor.jqxSlider({ min: 0, max: 5000, ticksFrequency: 1000, value: 0, step: 1000, width: ‘100%’, height: ‘100%’ });
}
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
//debugger;
if (row != 103 && row != 104) {
editor.jqxDropDownList(‘selectItem’, cellvalue);
}
else {
editor.jqxSlider({ min: 0, max: 5000, ticksFrequency: 1000, value: cellvalue, step: 1000, width: ‘100%’, height: ‘100%’ });
}
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}},
Hello Sairam,
The functionality is demonstrated on this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-property-editor.htm?arctic. I suggest you to learn it and use the same approach as a solution for your scenario.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.