Kendo Spanned Columns

0 Answers 97 Views
Grid
Akshata
Top achievements
Rank 1
Akshata asked on 22 Nov 2022, 09:27 AM

Hi Team , 

In our use case we wanted a tabular view inside spanned columns cell value.

Example Structure Inside Spanned columns:

<kendo-grid-span-column [style]="{ 'padding': '0px'}">
  <!-- CAPA NAME -->
        <kendo-grid-column field="cName" title="CName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cDescription" title="CDescription" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cCategory" title="CCategory" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pName" title="pName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pValue" title="pValue" [width]="180">
        </kendo-grid-column>

  <ng-template kendoGridCellTemplate let-dataItem>

          <tr style="height:200px"class="border-tr" *ngFor="let item of dataItem.capability">
            <td class="border-td column-style-class" width=19.9%>
              <p>{{ item?.cName }}</p>
            </td>
            <td class="border-td column-style-class" width=20.2%>
              <p>{{ item?.cDescription }}</p>
            </td>
            <td class="border-td column-style-class" width=20%>{{ item?.cCategory }}
              <span><button (click)="removeCapability(item)" kendoGridRemoveCommand>Remove</button></span>
            </td>
            <td style="padding:0px" >
              <div style="height:300px !important;overflow-y:scroll;">
          <tr *ngFor="let itemParam of item.parameters" >
            <td width=50.1% class="border-td column-style-class">{{itemParam.pName}}</td>
            <td [width]="460" class="border-td column-style-class">
              <kendo-textbox *ngIf="itemParam.pName == 'Name' || itemParam.pName == 'InterfaceIndex' "
                [style.width]="460" (change)="updateCapabilityParameters($event,itemParam,item)"
                placeholder="Type your message here" [clearButton]="true" [value]=itemParam.pValue>
              </kendo-textbox>
              <kendo-dropdownlist [style.width]="460"
                *ngIf="itemParam.pName == 'Ingress' || itemParam.pName == 'Egress'"
                [data]="listItemsIngressEgress" [value]=itemParam.pValue> </kendo-dropdownlist>
              <button kendoButton [style.width]="460" *ngIf="!openedDialog && itemParam.pName == 'Alias'"
                (click)="open(itemParam.pName )">Details</button>
            </td>
          </tr>
          </div>
          </td>
          </tr>

        </ng-template>

      </kendo-grid-span-column>

 

 

But with this customization we are not able to achieve proper stylings and filters provided by kendo-grid.

                    

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Akshata
Top achievements
Rank 1
Share this question
or