Does cellsRenderer in TreeGrid support widgets ?? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cellsrenderer, destroy, initialize, jqxTreeGrid, performance, rendered, tree grid, treegrid, Widget

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

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

Author

Does cellsRenderer in TreeGrid support widgets ?? Posts

November 18, 2014 at 10:58 am Does cellsRenderer in TreeGrid support widgets ?? #62951

Sairam

Participant

Hi,

I am trying to put in a widget in the cellsRenderer and I see that it works only with HTML and not with widgets.
All want is a template column to load whe the grid loads and not intentionally during the edit. Is there a work around to achive this ? or Is there a better alternative to cellsRenderer ??

November 18, 2014 at 12:47 pm Does cellsRenderer in TreeGrid support widgets ?? #62959

Dimitar

Participant

Hello Sairam,

You can use the rendered callback function to initialize some widgets (such as jqxButton) in jqxTreeGrid. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        var that = this;
        $(document).ready(function () {
            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 () {
                }
            });
            this.editrow = -1;

            $("#treeGrid").jqxTreeGrid(
            {
                width: 670,
                source: dataAdapter,
                altrows: true,
                autoRowHeight: 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,
                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
                // called when jqxTreeGrid is going to be rendered.
                rendering: function () {
                    // destroys all buttons.
                    if ($(".editButtons").length > 0) {
                        $(".editButtons").jqxButton('destroy');
                    }
                    if ($(".cancelButtons").length > 0) {
                        $(".cancelButtons").jqxButton('destroy');
                    }
                },
                // called when jqxTreeGrid is rendered.
                rendered: function () {
                    if ($(".editButtons").length > 0) {
                        $(".cancelButtons").jqxButton();
                        $(".editButtons").jqxButton();

                        var editClick = function (event) {
                            var target = $(event.target);
                            // get button's value.
                            var value = target.val();
                            // get clicked row.
                            var rowKey = event.target.getAttribute('data-row');
                            if (value == "Edit") {
                                // begin edit.
                                $("#treeGrid").jqxTreeGrid('beginRowEdit', rowKey);
                                target.parent().find('.cancelButtons').show();
                                target.val("Save");
                            }
                            else {
                                // end edit and save changes.
                                target.parent().find('.cancelButtons').hide();
                                target.val("Edit");
                                $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey);
                            }
                        }
                        $(".editButtons").on('click', function (event) {
                            editClick(event);
                        });

                        $(".cancelButtons").click(function (event) {
                            // end edit and cancel changes.
                            var rowKey = event.target.getAttribute('data-row');
                            $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, true);
                        });
                    }
                },
                columns: [
                  { text: 'ID', editable: false, dataField: 'id', width: 100 },
                  { text: 'Name', dataField: 'name', width: 200 },
                  {
                      text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 150
                  },
                  { text: 'Location', dataField: 'location', width: 100 },
                  {
                      text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          // render custom column.
                          return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 19, 2014 at 5:34 am Does cellsRenderer in TreeGrid support widgets ?? #62991

Sairam

Participant

Thanks Dimitar. I shall try this out.

December 4, 2014 at 1:05 pm Does cellsRenderer in TreeGrid support widgets ?? #63786

Sairam

Participant

Hi,

This works but there seems to be a performance hit. I have used the above code as a sample and have jqxMenu instead of a button and an img tag. On clicking the img the system opens a jqxwindow. All works, but with a serious performance hit. Btw, why do you destroy the buttons on Rendering section ??

December 4, 2014 at 1:48 pm Does cellsRenderer in TreeGrid support widgets ?? #63789

Dimitar

Participant

Hi Sairam,

Buttons that are not currently necessary are destroyed (e.g. if you collapse all rows, you only have a single jqxButton). This improves the performance of the jqxTreeGrid. When necessary, new buttons are created. We suggest you follow the same approach.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.