Problem of Saving Checkboxes in in-cell grid

[chaganti]

Hi Admin,
I am working on the In-Cell grid, in this grid i have lot of checkboxes are there.After checking the checkboxes save button is not activated in grid.
Please check the attachment

[chaganti]

Hi Team,

         Please help me and check given ticket which I was posted 1 week back and please give the response.

[Martin]

Hi Chaganti,

Thank you for the provided code snippet.

Based on the details, I assume that cell template is used to render checkboxes in grid cells. Generally speaking, the kendoGridCellTepmlate allows the developer to modify the Grid cell content in the desired way by adding any custom code on top of the current implementation.

However, the template just renders the data in the desired way but does not affect the value when the user clicks the checkbox. In order to edit a boolean checkbox, set the editor option of the <kendo-grid-column> to 'boolean' in combination with cell template but with disabled checkboxes in order to avoid changing the state of the checkbox when the cell is not in edit mode. Here is an example:

https://stackblitz.com/edit/angular-wk83pq?file=app/app.component.ts

As per the comment regarding the used time for answering, I would like to point out that the Kendo UI for Angular Tria support package provides unlimited support tickets with 72-hours response time (weekend and holidays excluded):

https://www.telerik.com/purchase/support-plans

I hope this helps.

Regards,
Martin
Progress Telerik

[chaganti]

Hi Martin,

 Thank you for the response.

 Actually in the given scenario we will enable/disable the checkbox which need clicking two times but we need only after clicking one time to enable/disable the checkbox.

[Martin]

Hi Chaganti,

In order to achieve that functionality, the boolean column should not enter in edit mode.

Currently, in cellClick event handler editCell method is used:

    public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
        if (!isEdited) {
            sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
        }
    }

This will open the respective editor (when editor property of the <kendo-grid-column> is used) in this case generic checkbox, or it will open the code that is placed in kendoGridEditTemplate. However both approaches would require two clicks in order to change the value - the first one will enter the edit mode, the second one updates the checkbox state.

Thus the editCell should not be used when the checkbox column is clicked:

  public cellClickHandler({  sender,  rowIndex,  columnIndex,  dataItem,  isEdited  }) {
    if (columnIndex != 2 && !isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }
  }

 

Then in kendoGridCellTemplate, create a custom checkbox, and in its input event handler, update the Grid collection:

      <kendo-grid-column field="Discontinued" title="Discontinued">
        <ng-template
          kendoGridCellTemplate
          let-dataItem="dataItem"
        >
          <input
            [checked]="dataItem.Discontinued"
            (input)="onInputChange(dataItem)"
            kendoGridFocusable
            name="Discontinued"
            type="checkbox"
            class="k-checkbox"
          />
        </ng-template>
      </kendo-grid-colum

Any further processes such as saving the changes or canceling them are considered developer effort.

I hope this helps.

Regards,

Martin
Progress Telerik