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.

Answer 1

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.

Answer 2

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({
  // ......
});