DropDown Tree in Grid

[simcon94Participant]

Hi, how can i make a DropDownTree in Grid?

[DimitarParticipant]

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/

[simcon94Participant]

But there is only a dropdownList.
No DropDownTree

[simcon94Participant]

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

[DimitarParticipant]

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/

[simcon94Participant]

Do you have a example?

[simcon94Participant]

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….

[DimitarParticipant]

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/

[simcon94Participant]

Thats no tree

[simcon94Participant]

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

[DimitarParticipant]

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/

[simcon94Participant]

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

[DimitarParticipant]

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/

[Author]

Posts