jQuery UI Widgets Forums TreeGrid Does cellsRenderer in TreeGrid support widgets ??

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

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

  • 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 ??


    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/


    Sairam
    Participant

    Thanks Dimitar. I shall try this out.


    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 ??


    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/

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

You must be logged in to reply to this topic.