How can I check checkboxes and disabled in jqxTreeGrid

Question

I am trying to make some of checkboxes checked and disabled in jqxTreeGrid in below code:

     $("#treegrid_portfolio").jqxTreeGrid(
        {
            source: dataAdapter,
            pageable: true,
            pagerMode: 'advanced',
            pageSizeMode: 'root',
            pageSize: 5,
            pageSizeOptions: ['1', '2', '3', '5', '10'],
            columnsResize: true,
            sortable: true,
            filterable: true,
            theme: "custom",
            filterMode: 'advanced',
            altRows: false,
            checkboxes: true,
            columnsReorder: true,
            hierarchicalCheckboxes: true,
            width: getWidth("TreeGrid"),
            /*width: "100%",*/
            ready: function () {
                $("#treegrid_portfolio").jqxTreeGrid('expandRow', '1');
                $("#treegrid_portfolio").jqxTreeGrid('expandRow', '2');
            }
            ,
            columns: [
                {
                    text: "ID", dataField: "formattedID", width: 120, pinned: true, cellclassname: "requestIdCls", resizable: false
                }
                ,
                {
                    text: '', datafield: 'alert', cellsrenderer: linkrendererAlert, width: 60, pinned: true, cellclassname: "alert_column", cellsAlign: 'center', filterable: false, resizable: false
                }
                ,
                {
                    text: "Portfolio Items Name", dataField: "PortfolioItem_Name", width: 200
                }
                ,
                {
                    text: "Agile Central Project Name", dataField: "AC_ProjectName", width: 200
                }



            ]
        }
    );

Is it possible to make the same on grid ready function. I have done some research on the jqwidget. But didn't got any solution or clues. Please help me any one.

this_is_om_vm · Answer 1 · 2018-05-06T15:20:13.783

You need to make below changes also just put id attribute for each of your column data .Then put the id for selecting checkbox to set true.

follow this link i have get a fiddle for you Invoke the uncheckRow method.

   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 () {

      }
  });
  // create jqxTreeGrid.
  $("#treeGrid").jqxTreeGrid({
      source: dataAdapter,
      altRows: true,
      width: 680,
      theme:'energyblue',
      checkboxes: true,
      ready: function () {
          $("#treeGrid").jqxTreeGrid('expandRow', '1');
          $("#treeGrid").jqxTreeGrid('expandRow', '2');
      },
      columns: [{
          text: "Name",
          align: "center",
          dataField: "name",
          width: 300
      }, {
          text: "Budget",
          cellsAlign: "center",
          align: "center",
          dataField: "budget",
          cellsFormat: "c2",
          width: 250
      }, {
          text: "Location",
          dataField: "location",
          cellsAlign: "center",
          align: "center"
      }]
        });
  $("#jqxbutton").jqxButton({
      theme: 'energyblue',
      height: 30
  });
 $("#treeGrid").jqxTreeGrid('checkRow',2);

The last line of code $("#treeGrid").jqxTreeGrid('checkRow',2); is reason to check the checkbox true while loading. Please makesure if any help required.Hope it may help.

ElasticCode · Answer 2 · 2018-05-15T07:47:40.297

To check rows on grid ready function use checkRow method, and lockRow will disable editing of the row and give the row gray style.

3 or 8 are Unique ID which identifies the row Id (data field in data source).

ready: function () {
    $("#treeGrid").jqxTreeGrid('checkRow', '3');
    $("#treeGrid").jqxTreeGrid('lockRow', '3');

    $("#treeGrid").jqxTreeGrid('checkRow', '8');
    $("#treeGrid").jqxTreeGrid('lockRow', '8');
},

To disable checkboxes you can use rowUncheck event to prevent uncheck by checking the row again.

$('#treeGrid').on('rowUncheck', function (event) {
    $("#treeGrid").jqxTreeGrid('checkRow', '3');
    $("#treeGrid").jqxTreeGrid('checkRow', '8');
});

$("#treeGrid").jqxTreeGrid({
  // ......
});

How can I check checkboxes and disabled in jqxTreeGrid

2 Answers2