Author Topic: Disable Column Group Wise  (Read 4333 times)

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Disable Column Group Wise
« on: December 27, 2017, 08:59:01 am »
Hello Team,

We applied grouping in our grid and for every group we have 2 columns
 1.Unmodel (Checkbox)
 2. Begin Date (Date Picker in this column)

Our requirement is
1.   if Un Model is Unchecked user can update the Begin date for Group
2.   If Un Model is Checked Disable the Begin Date Column for that Group (Begin date not editable for group if UnModel Checked)

Please suggest us if it is possible and how can we achieve this.
Please find below screenshot for reference.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Disable Column Group Wise
« Reply #1 on: December 27, 2017, 09:40:10 am »
As they are in same row, please use column.editable callback for date column to implement conditional edit ability.


Code: [Select]
column.editable = function(ui){
  return !ui.rowData[dataIndx of unmodel column];
}

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Disable Column Group Wise
« Reply #2 on: December 27, 2017, 10:22:48 am »
Hello Team,

Thanks, For your quick response.

Please check our code for UnModel CheckBox. As we need checkbox only on group summary row so, we are rendering the checkbox in the summary row only.
In this case the editable function is not working.

    {
      dataIndx: "state",
      align: "center",
      title: "UnModel",
      minWidth: 70,
      cb: {
        header: false,
        select: true,
        all: true
      },
      render: function(ui) {
        if (ui.rowData.pq_close != undefined) {
          if (executingProjectChecked.indexOf(ui.rowData[0]) == -1) {
            return "<input type='checkbox' class='exUnModel' value='" + ui.rowData[0] + "'/>";
          } else {
            return "<input type='checkbox' checked class='exUnModel' value='" + ui.rowData[0] + "'/>";
          }
        }
      },
      editable:function(ui){
        console.log(ui);
      }
    },

executingProjectChecked is a array for storing the values for checked project and
every time when grid refresh in the render function we checked values and print the checked and unchecked.

Please check above code and give your suggestion.
 

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Disable Column Group Wise
« Reply #3 on: December 27, 2017, 10:53:59 am »
Also, we try to update editable = false in the Begin date render function but it is not working.

Using Below Code it is working like below steps.

Step-1: UnModel is Unchecked than Begin date is editable working fine
Step-2: UnModel is Checked than still begin date is editable for one more time
Step-3: If UnModel is checked and we change Begin date than it will disable the column Begin date for same group as well for all the other groups. But our requirement is to disable the begin date only for the checked group.

{
  title: "Begin Date",
  width: 100,
  editor: {
    type: 'textbox',
    init: dateEditor
  },
  render: function(ui) {
    if (ui.rowData.pq_close != undefined && ui.rowData.pq_children != undefined) {
      var pName = ui.rowData[0];
      if(executingProjectChecked.indexOf(pName) == -1){
        ui.column.editable = true;
      }else{
        ui.column.editable = false;
      }
      var _date = new Date();
      return "<input type='text' id='proDate' value='" + date + "' style='width:60px;border:none;background:none;'>";
    }
  },
},

Please check and give your feedback.
 

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Disable Column Group Wise
« Reply #4 on: December 27, 2017, 11:26:24 am »
column.editable callback works for every row including summary row. editable callback is invoked by grid when user tries to edit the cell.

please share a jsfiddle if it doesn't work for you.
« Last Edit: December 27, 2017, 11:28:35 am by paramquery »

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Disable Column Group Wise
« Reply #5 on: December 27, 2017, 12:15:21 pm »
Hello Team,

Please Find the below URL for requested JsFiddle.

URL: http://jsfiddle.net/h4rmbx70/12/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Disable Column Group Wise
« Reply #6 on: December 27, 2017, 01:08:12 pm »
your code seems incorrect/ unclear on other points making it difficult for me to correct it.

Please make the following corrections:

1. What is the logic of using 0 in rowData[0] in render callback of checkbox column? It should be bound to rowData.state

2. editable callback should be added to date picker column instead of checkbox column.

3. Remove all column.editable statements from render callback.

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Disable Column Group Wise
« Reply #7 on: December 28, 2017, 08:42:51 am »
Hello Team,

1. What is the logic of using 0 in rowData[0] in render callback of checkbox column? It should be bound to rowData.state
rowData[0] is used to get the group project name please check the below screen shot

2. editable callback should be added to date picker column instead of checkbox column.
Editable function is added to the Begin date column but it is not calling when we change the begin date

3. Remove all column.editable statements from render callback.
Removed

http://jsfiddle.net/h4rmbx70/14/

Using Editable Callback function we can disable the column from editing for whole column but our requirement is different
Is there any way to disable the column only for selected group not for all the groups.

Please give your suggestion on this.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Disable Column Group Wise
« Reply #8 on: December 28, 2017, 12:23:14 pm »
Please check this: http://jsfiddle.net/h4rmbx70/15/

editable callback has been added to the datepicker column and superfluous column.editable statements have been removed. Please take care to keep your logic at single location.

Code: [Select]
editable: function(ui) {
     //console.log(ui);
     return (executingProjectChecked.indexOf(ui.rowData[0]) == -1);
},

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Disable Column Group Wise
« Reply #9 on: December 28, 2017, 01:23:54 pm »
Hello Team,

Thanks alot... :)

It is working fine now i will try to implement this in my grid.

 :D :D :D :D :D :) :) :) :) :) :)