jQuery UI Widgets Forums Grid DropDown Tree in Grid

This topic contains 12 replies, has 2 voices, and was last updated by  Dimitar 10 years ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • DropDown Tree in Grid #49729

    simcon94
    Participant

    Hi, how can i make a DropDownTree in Grid?

    DropDown Tree in Grid #49744

    Dimitar
    Participant

    Hello simcon94,

    You can achieve this by using custom editors, as shown in the demos Custom Column Editor and Custom Row Editor.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    DropDown Tree in Grid #49755

    simcon94
    Participant

    But there is only a dropdownList.
    No DropDownTree

    DropDown Tree in Grid #49758

    simcon94
    Participant

    that must be something like this:

    text: ‘Test’, columntype: ‘jqxDropDownButton’, displayfield: “Test”, datafield: “TestId”, width: 200,
    createeditor: function (row, cellvalue, editor, cellText, width, height) {
    $(‘#ParentNodesTree’).jqxTree({ source: dataAdapter});
    $(‘#ParentNodesTree’).on(‘select’, function (event) {
    var args = event.args;
    var item = $(‘#ParentNodesTree’).jqxTree(‘getItem’, args.element);
    var topologyId = item.id;
    editor.jqxDropDownButton(‘setContent’, item.label);
    editor.jqxDropDownButton(‘close’);
    });
    $(‘#ParentNodesTree’).jqxTree(‘expandAll’);
    editor.jqxDropDownButton({ width: ‘250’, height: ’25px’ });
    }

    DropDown Tree in Grid #49760

    Dimitar
    Participant

    Hi simcon94,

    Instead of ‘jqxDropDownButton’ use columntype: 'custom'. You can learn more about columntype in the jqxGrid API Documentation.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    DropDown Tree in Grid #49769

    simcon94
    Participant

    Do you have a example?

    DropDown Tree in Grid #49781

    simcon94
    Participant

    Thats my Code now:
    `createeditor: function (row, cellvalue, editor, cellText, width, height) {

    //editor.empty();
    editor.append(‘<div id=”dropDownTreeId”><div style=”border: none;” id=”ParentNodesTree”></div></div>’);

    var records = sk.tree.getTopologyTree(“GetTree”);
    $(“#dropDownTreeId”).jqxDropDownButton({ width: 200, height: ’25px’ });
    $(‘#ParentNodesTree’).jqxTree({ source: records });
    $(‘#ParentNodesTree’).jqxTree(‘expandAll’);

    $(‘#ParentNodesTree’).on(‘select’, function (event) {
    var args = event.args;
    var item = $(‘#ParentNodesTree’).jqxTree(‘getItem’, args.element);
    var dropDownContent = ‘<div style=”position: relative; margin-left: 3px; margin-top: 5px;”>’ + item.label + ‘</div>’;
    $(“#dropDownTreeId”).jqxDropDownButton(‘setContent’, dropDownContent);
    $(“#dropDownTreeId”).jqxDropDownButton(‘close’);

    editor.jqxDropDownButton(‘setContent’, item.label);
    //editor.append(‘<div id=”dropDownTreeId”><div style=”border: none;” id=”ParentNodesTree”>’ + item.label + ‘</div></div>’);
    });
    $(“#dropDownTreeId”).jqxDropDownButton({ width: 200, height: ’25px’ });
    }`

    That works so long, till i click in another cell in Grid. Then the Cell is empty….

    • This reply was modified 10 years ago by  simcon94.
    DropDown Tree in Grid #49851

    Dimitar
    Participant

    Hi simcon94,

    Here is how to initialize the dropdown tree:

    columns: [
        {
            text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'custom',
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                editor.append("<div class='jqxTree' style='width: " + (cellwidth - 2) + "px;'><ul><li>Item 1</li><li>Item 2</li></ul></div>");
                editor.jqxDropDownButton();
                $(".jqxTree").jqxTree();
            }
        },

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    DropDown Tree in Grid #49999

    simcon94
    Participant

    Thats no tree

    DropDown Tree in Grid #50000

    simcon94
    Participant

    The tree in my example is ok. But the seleted item will not be shown in the Grid….

    DropDown Tree in Grid #50052

    Dimitar
    Participant

    Hi simcon94,

    Here is a modification of the code, with more tree items and geteditorvalue set to return the selection of the tree. Note the tree’s id is now set:

    columns: [
        {
            text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'custom',
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                editor.append("<div id='" + editor[0].id + "Tree' class='jqxTree' style='width: " + (cellwidth - 2) + "px;'><ul><li>Item 1</li><li>Item 2<ul><li>Item 2.1</li><li>Item 2.2</li></ul></li></ul></div>");
                editor.jqxDropDownButton();
                $(".jqxTree").jqxTree();
            },
            geteditorvalue: function (row, cellvalue, editor) {
                var tree = $("#" + editor[0].id + "Tree");
                var selection = tree.jqxTree('getSelectedItem');
                return selection.label;
            }
        },

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    DropDown Tree in Grid #50106

    simcon94
    Participant

    I tried it this way:

    createeditor: function (row, cellvalue, editor, cellText, width, height) {
                                editor.append("<div id='" + editor[0].id + "Tree' class='jqxTree' style=''><div style='border: none;' id='ParentNodesTree'></div></div>");
                                var records = sk.tree.getTopologyTree("/GetTree");
                                $(".jqxTree").jqxDropDownButton({ width: 200, height: '25px' });
                                $("#ParentNodesTree").jqxTree({ source: records });
                                $("#ParentNodesTree").jqxTree('expandAll');
    
                                $("#ParentNodesTree").on("select", function (event) {
                                    var args = event.args;
                                    var item = $("#ParentNodesTree").jqxTree('getItem', args.element);
                                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                                    $(".jqxTree").jqxDropDownButton('setContent', dropDownContent);
                                    $(".jqxTree").jqxDropDownButton('close');
    
                                    editor.jqxDropDownButton('setContent', item.label);
                                });
                            }                           
                            ,geteditorvalue: function (row, cellvalue, editor) {
                                var tree = $("#" + editor[0].id + "Tree");
                                var selection = tree.jqxTree('getSelectedItem');
                                console.log(selection.label);
                                return selection.label;
                            }

    but i still have error:
    TypeError: selection is undefined

    DropDown Tree in Grid #50107

    Dimitar
    Participant

    Hi simcon94,

    That is because you most probably did not select an item from the tree. You should check if the selection is defined:

    geteditorvalue: function (row, cellvalue, editor) {
        var tree = $("#" + editor[0].id + "Tree");
        var selection = tree.jqxTree('getSelectedItem');
        if (selection) {
            console.log(selection.label);
            return selection.label;
        } else {
            return "";
        };
    }

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.