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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Using Template Columns in TreeGrid #62844

    Sairam
    Participant

    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();
    }

    },

    Using Template Columns in TreeGrid #62847

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.