Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I check checkboxes and disabled in jqxTreeGrid

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.

like image 798
Developer Avatar asked Apr 26 '18 11:04

Developer


2 Answers

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.

like image 94
this_is_om_vm Avatar answered Jan 04 '23 07:01

this_is_om_vm


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({
  // ......
});
like image 34
ElasticCode Avatar answered Jan 04 '23 08:01

ElasticCode