Creating an editable (generic) grid in the detailed row template

[Kristof]

Hi,

We want to use the Kendo UI grid, but with inline editing functionality.

We want to have an edit button on the end of the row. If the button is clicked, the detailed row templated should be shown, but should be editable of course.

It seems to be a combination of following examples:

Detail Row Template - Grid - Kendo UI for Angular (telerik.com)

Custom Editing in Reactive Forms - Grid - Kendo UI for Angular (telerik.com)

Example:

Grid has a data item with two columns (Order + Name) and an actions column. The data item also contains other columns which are only visible in edit-mode: 'Nederland', 'Frans', 'Engels', 'Active'. The grid should be inline-editable, by showing the edit-form below the non-editable row directly. (combination of the two mentioned links above: master/detail + custom editing in reactive forms)

On top of that, we want to create a generic grid (wrapped kendo ui grid). The templates/columns/layouts should be definable outside that generic grid. In that way we can use the generic grid on multiple pages and the templates/columns/layouts should be provided as input to that component.

How can we achieve this?

[schakravarty]

I cannot speak to using master\detail view for grid editing. I usually use a dialog box for grid editing when the fields being edited are not directly in the grid itself.

 

As far as having a dynamic grid though, that I have done.

<kendo-grid   
    [data]="gridDataResult"
    [loading]="isSearching"
    [pageSize]="state.take"
    [pageable]="{
      buttonCount: 5,
      info: true,
      type: pageableType,
      pageSizes: [50, 100, 250, 500, 1000],
      previousNext: true
    }"
    [skip]="state.skip"
    [sort]="state.sort"
    [sortable]="true"
    [filter]="state.filter"
    filterable="menu"
    [resizable]="true"
    [reorderable]="true"    
    [selectable]="selectableSettings"
    
  >
   
    <ng-container *ngFor="let column of gridColumns">
      <kendo-grid-column
        field="{{column.field}}"
        title="{{column.title}}"
        width="{{column.width}}"
        [minResizableWidth]="column.minResizableWidth"
        [resizable]="column.resizable"
        [sortable]="column.sortable ? { mode: 'single', allowUnsort: false } : false"
        [filterable]="column.filterable"
        [hidden]="column.hidden"
        [lockable]="column.lockable"
        [locked]="column.locked"
        [columnMenu]="column.columnMenu"
        [selectedKeys]="selectedKeys">
      </kendo-grid-column>
    </ng-container>
  </kendo-grid>

and in my component, it gets the grid columns (custom class) from a table that is keyed by the grid name or Id with the columns tied to it. You can use templates and ngIf to do custom stuff for columns as well.

 

[Kristof]

Thanks Paul, creating a generic grid with templates/configurable columns is covered, but the most important question is still:

Is it possible to use the "row detail template" for editing a row?

Creating an editable (generic) grid in the detailed row template in Kendo UI for Angular | Telerik Forums

And it is recommended to do so?

Can someone help with that one?

[schakravarty]

I do not see why you can't use the detailed row for editing, but if it is not a true child record of the master, then I don't understand why to use the detailed row for editing when it can be accomplished in the master row easily. If there are columns that don't display then hide them when not in edit mode and show them when editing. Just my thought...

[Kristof]

Hi Paul,

The customer wants to show 3 fields in readonly mode, but has perhaps 20 fields to edit.
They don't want to use the external form, but want to edit it inline in the grid.

If the rowdetail template is no option, I guess the external form is more suitable (in my personal opinion)

[schakravarty]

I don't see why the detail template would not work for the editing form. Just seems like a square peg in a round hole....if it is truly a template then you should be able to use it and add inputs, combos or whatever to it. You would have to put a form inside the template and supply the form when the detail view is expanded. Kendo does most of that for us in the template by specifying the [formControl].

[Kristof]

Yes indeed, I have the same opinion about the square peg in a round hole, but the customer's request need to be investigated :-)

I think rowdetail template is not that suitable as using a popup (external form) due to several reasons: layout, too much data in the grid, misuse of row details for editing purposes...