Kendo Grid with button click event

[Vijitha]

I have a button and if I click on that it should open a modal and it should be displayed on entire row and when I click again it should go away with the same width as before.. it should be like hierarchical behavior. How can I achieve that?

[Dimiter Topalov]

Hello Vijitha,

I am not sure I fully understand the desired functionality, but I can suggest a couple of approaches for displaying additional information (like further details or custom information) about the data item, rendered in a certain Grid row:

1) You can use the built-in Master-detail functionality and a Detail Row Template for displaying hierarchical data as demonstrated in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/detail-template/

You can also use custom button within a cell template to open/close the respective master row programmatically via the Grid expandRow and collapseRow methods.

2) You can use a custom implementation, based on having a custom button in a Grid cell template and a custom click handler. You can open a Popup with the desired placement, size and content and add an overlay between the Grid and the Popup for modal purposes. The Popup should contain a button/icon that will close it and hide the modal overlay.

Here is a sample implementation of the described approach:

https://plnkr.co/edit/F02okNA5f2Ley4p5AZnC?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Vijitha]

I am looking for a way, in where I have some actions icon as a cell in kendo  angular grid, once I click that actions, all the options should be showing up by expanding row as a bar but not just cell template

 

I have like this

<kendo-grid-column field="Actions" title="ACTIONS" width='450'>
<ng-template kendoGridCellTemplate let-dataItem>
<button kendoButton class="mat-button" (click)="actionBar(dataItem)" ng-init="dataItem.IsActiveVisit =false">
<span class="rev-ico-more"></span>
</button>

<div class="rev-grid-cell-data" *ngIf="dataItem.IsActiveVisit">
<kendo-buttongroup>
<button kendoButton class="rev-but-error">
<span class="rev-ico-alert-warning"></span> Errors</button>
<button kendoButton class="rev-but-details" (click)="open('dialog',dataItem)">
<span class="rev-ico-detail"></span> Details</button>
<button kendoButton class="rev-but-details">
<span class="k-icon k-i-gear k-i-cog k-i-custom"></span> Map</button><button kendoButton class="rev-but-details" (click)="tem(dataItem)">
<span class="rev-ico-check"></span> lish</button>
<button kendoButton class="rev-but-reject" (click)="tem(dataItem)">
<span class="rev-ico-delete"></span> re</button>
</kendo-buttongroup>
</div>

</ng-template>
</kendo-grid-column>

 

but I want this to expand complete row as bar with those button group

[Dimiter Topalov]

Hello Vijitha,

I am afraid I am still not 100% sure what exactly expanding the row as bar is supposed to look like:

"but I want this to expand complete row as bar with those button group"

... but the only available option for expanding Grid rows is via the built-in Master-Detail functionality as previously discussed. You can use the button click handler to expand the respective row programmatically, and another custom button handler within the Details template to collapse it (if needed). You can put as many other buttons as desired and any other content in the Detail template too:

https://plnkr.co/edit/ZrUYiI3t8moWq3uwFQOd?p=preview

Let me know whether this matches the requirements better, and if not - please send us some visual demonstrating the desired layout when the row is expanded and the buttons for the additional actions are displayed. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Vijitha]

Hi,

Thanks for your reply. I have attached the required functionality (actions.png) what I am looking. I have action button and if I click on action button it should display in the entire cell. I mean that bar(which have icons) should display in the entire cell. If you see action2.png image I am getting that bar for only actions column and not for the entire row i.e from 1st column to last column. Please provide some inputs for this how I can achieve this type of functionality.

[Dimiter Topalov]

Hi Vijitha,

Thank you for the further details provided. In this case (when the extra buttons needs to appear in an extra row that is expanded below the initial Grid row), the Detail template with programmatic expand/collapse functionality seems the most applicable approach (the one, described in my previous response).

You can customize the Grid layout via CSS to hide the built-in row expand/collapse icons, e.g.:

https://plnkr.co/edit/ZrUYiI3t8moWq3uwFQOd?p=preview

Regards,
Dimiter Topalov
Progress Telerik

[Vijitha]

 am assigning the data for kendo  grid from component am trying to getting kendo  grid data from another angular component for filtering purpose but once got new data my kendo grid is not able to data.is there any other way to reload kendo  grid data by using another component data parameter.

[Svet]

Hi Vijitha,

I am not sure that I understand the requirement correctly.

But, the grid should re-render with the proper data as long as we assign the data to the grid via one of the supported approaches described in the following article from our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

It is ok to get the data for the grid from another component. A common pitfall is that the property, that the grid is bound, is updated by value (not by reference) and thus does not trigger Angular's change detection. For more details on Angular's change detection check one of the following articles available online:

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

or

https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

I hope this provides some more details.

I would also like to ask you to open new threads for questions that are not directly related to each other as this will facilitate a better support history of your account and help us to provide a better support service in general.

Regards,
Svetlin
Progress Telerik