[simcon94Participant]

Ok.
And does it work with drag an drop in one Grid?

[simcon94Participant]

Thanks….

[simcon94Participant]

I found the Problem……
The Problem was:
autoheight: true

[simcon94Participant]

So my whole code:

<script type="text/javascript">
    
    function getTextElementByColor(color) {
        if (color == 'transparent' || color.hex == "") {
            return $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>transparent</div>");
        }
        var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>#" + color.hex + "</div>");
        var nThreshold = 105;
        var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
        var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
        element.css('color', foreColor);
        element.css('background', "#" + color.hex);
        element.addClass('jqx-rc-all');
        return element;
    }
    
    $(document).ready(function () {
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'Id', type: 'Guid' }
                , { name: 'Name', type: 'string' }
                , { name: 'Color', type: 'string' }
            ],

            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            deleterow: function (rowid, commit) {
                commit(true);
                $('#grid').jqxGrid('refresh');
            },
            updaterow: function (rowid, rowdata, commit) {
                commit(true);
            },

            // get Model Data
            url: sk.appHelper.getAppDomainAppVirtualPath() + "GetData",
            
        };

        var dataAdapter = new $.jqx.dataAdapter(source);
        var editable = true;
        var hiddenDeleteButton = false;
        // initialize jqxGrid
        $("#grid").jqxGrid(
            {
                width: sk.appHelper.getMaxContentWidth()
                , autoheight: true
                , source: dataAdapter
                , editable: editable
                , editmode: 'selectedcell'
                , columnsresize: true
                , columnsreorder: true
                , groupable: true
                , sortable: true
                , filterable: false
                , cellhover: function (element, pageX, pageY) {
                    var cell = $('#grid').jqxGrid('getcellatposition', pageX, pageY);
                    if (cell.column === "Delete") {
                        $("#grid").jqxTooltip({ content: 'DeleteButton', position: 'bottom', showDelay: 1000 });
                        // open tooltip.
                        $("#grid").jqxTooltip('open', pageX, pageY);
                    };
                }
                , columns: [
                    {
                        text: '', datafield: 'Delete', width: 50, columntype: 'number', hidden: hiddenDeleteButton, cellsrenderer: function () {
                            return '<div style="width: 100%"><img src="Content/icons/delete.png" style="margin-left: 25%" /></div>';
                        }
                    }
                    , { text: 'Name', datafield: "Name", width: 190 }
                    , {
                        text: 'Color',
                        columntype: 'custom',
                        datafield: 'Color',
                        width: 220,
                        createeditor: function(row, cellvalue, editor) {
                            var dropDownButton = $("<div style='border: none;'><div style='padding: 5px;'><div class='colorPicker" + row + "'></div></div></div>");
                            dropDownButton.appendTo(editor);
                            dropDownButton.jqxDropDownButton({ width: '100%', height: '100%' });
                            
                            var colorPicker = $($.find(".colorPicker" + row));
                            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: "ffffff" })));
                        },
                        initeditor: function(rowKey, cellvalue, editor, celltext, width, height) {
                            $($.find('.colorPicker' + rowKey)).val(cellvalue);
                        },
                        // returns the value of the custom editor.
                        geteditorValue: function(rowKey, cellvalue, editor) {
                           return $($.find('.colorPicker' + rowKey)).val();
                        },
                        cellsrenderer: function (row, columnfield, value) {
                            return getTextElementByColor(new $.jqx.color({ hex: value.substring(1) }))[0].outerHTML;
                            
                        }
                    }
                    , { text: "Id ", datafield: "Id", width: 1, hidden: true }
                ]
            });
    });
</script>

@*GRID*@
<div id="grid"></div>  

[simcon94Participant]

My Databinding:

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'Id', type: 'Guid' }
                , { name: 'Name', type: 'string' }
                , { name: 'Color', type: 'string' }
            ],

            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            deleterow: function (rowid, commit) {
                commit(true);
                $('#grid').jqxGrid('refresh');
            },
            updaterow: function (rowid, rowdata, commit) {
                commit(true);
            },

            // get Model Data
            url: sk.appHelper.getAppDomainAppVirtualPath() + "/Instrument/GetInstruments",
            
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

[simcon94Participant]

whats the difference?

[simcon94Participant]

The first six rows worked…..

[simcon94Participant]

HI,
that isn’t what i want. I want to change the img with toogle.
Like a Button On/Off, but not with value….

[simcon94Participant]

That means, when i search or filters in treegrid, the childs nodes doesn’t show….

[simcon94Participant]

Do you have a example, how the search is implemented, that i find the childs also on treegrid?
I can’t find one…

[simcon94Participant]

Does this problem work now?

[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

[simcon94Participant]

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

[simcon94Participant]

Thats no tree

[simcon94Participant]

I copied two examples to one project.
This Project throws the same error
TypeError: rowData is undefined
var cellValue = rowData[dataField];

$(document).ready(function () {
            var cellClass = function (row, dataField, cellText, rowData) {
                var cellValue = rowData[dataField];
                if (cellValue < 100000) {
                    return "min";
                }
                if (cellValue < 200000) {
                    return "minavg";
                }
                if (cellValue < 400000) {
                    return "avg";
                }
                return "max";
            }

            var data = [
         {
             "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
             "children":
              [
                  {
                      "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
                      "children":
                      [
                          { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
                          {
                              "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
                              children:
                              [
                                  { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
                                  { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
                              ]
                          }
                      ]
                  },
                  {
                      "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
                      "children":
                      [
                          { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
                          { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
                          { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
                      ]
                  },
                  { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
              ]
         }
            ];

            var source =
             {
                 dataType: "json",
                 dataFields: [
                      { name: "name", type: "string" },
                      { name: "budget", type: "number" },
                      { name: "id", type: "number" },
                      { name: "children", type: "array" },
                      { name: "location", type: "string" }
                 ],
                 hierarchy:
                     {
                         root: "children"
                     },
                 localData: data,
                 id: "id"
             };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {

                }
            });

            $("#treeGrid").jqxTreeGrid(
            {
                width: 670,
                source: dataAdapter,
                altrows: true,
                selectionMode: 'none',
                enableHover: false,
                ready: function () {
                    // Expand rows with ID = 1, 2 and 7
                    $("#treeGrid").jqxTreeGrid('expandRow', 1);
                    $("#treeGrid").jqxTreeGrid('expandRow', 2);
                    $("#treeGrid").jqxTreeGrid('expandRow', 7);
                },
                editable: true,
                columns: [
                 { text: 'ID', dataField: 'id', width: 100 },
                 {
                     text: 'Name', dataField: 'name', width: 220
                 },
                 {
                     text: 'Budget', align: 'right', cellClassName: cellClass, cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 200
                 },
                 {
                     text: 'Location', dataField: 'location'
                 }
                ]
            });
            
            $("#excelExport").jqxButton();
            $("#excelExport").click(function () {
                $("#treeGrid").jqxTreeGrid('exportData', 'xls');
            });
    
      });
    </script>
</head>
<body class='default'>
    <style>
        .max {
            color: black\9;
            background-color: #63be7b\9;
        }
        .avg {
            color: black\9;
            background-color: #f8e984\9;
        }
        .minavg {
            color: black\9;
            background-color: #f9806f\9;
        }
        .min {
            color: black\9;
            background-color: #f8696b\9;
        }

        .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #63be7b;
        }
        .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f8e984;
        }
        .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f9806f;
        } 
        .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f8696b;
        }
    </style>
                      
    <div id="treeGrid">
    </div>
    
    <div style='margin-top: 20px;'>
        <div style='float: left;'>
            <input type="button" value="Export to Excel" id='excelExport' />
            <br />
            <br />
            <input type="button" value="Export to XML" id='xmlExport' />
        </div>
        <div style='margin-left: 10px; float: left;'>
            <input type="button" value="Export to CSV" id='csvExport' />
            <br />
            <br />
            <input type="button" value="Export to TSV" id='tsvExport' />
        </div>
        <div style='margin-left: 10px; float: left;'>
            <input type="button" value="Export to HTML" id='htmlExport' />
            <br />
            <br />
            <input type="button" value="Export to JSON" id='jsonExport' />
        </div>
</body>
</html>

[Author]

Posts