Adding buttons to dynamically generated PanelBarItem

[Carla]

I created a PanelBar following the example for Binding to Remote Data. I now need to add buttons to each added children. I also added an iconClass to each of them to represent 'status' depending on the color I assign them when I create the PanelBar.

The buttons need to perform an action to set a flag in the database and also change the color in the icons depending on the button pressed (for example, red for 'unapprove', green for 'approve').

How can I do this?

Thanks,

Carla

 

 

[Dimiter Topalov]

Hello Carla,

You can adjust the binding mechanics of the PanelBar to a declarative approach with nested *ngFor loops for the Categories and Products. This will enable you to utilize the PanelBarItem title template and put all required buttons and icons inside:

<kendo-panelbar [expandMode]="kendoPanelBarExpandMode">
          <kendo-panelbar-item *ngFor="let category of categoriesView" [title]="category.title">
            <kendo-panelbar-item *ngFor="let product of category.children" title="" [icon]="product.icon">
              <ng-template kendoPanelBarItemTitle>
                  <span style="flex:1">{{ product.title }}</span>
                  <button class="k-button" (click)="setStatus(product, 'check-circle')">Approve</button>
                  <button class="k-button" (click)="setStatus(product, 'close-circle')">Unapprove</button>
              </ng-template>
            </kendo-panelbar-item>
          </kendo-panelbar-item>
         </kendo-panelbar>

Then you can add custom click handler to the button and perform all desired custom logic in it (calling a service that will send something to the database, switching the PanelBarItem's icons etc.).

The desired functionality is not supported out-of-the-box, but the following sample implementation of the described approach might point you in the right direction:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Carla]

Thank you Dimiter, this works!

I now need to also add a dropdown, specifically the ComboBox, next to the buttons. I tried adding it to the example you provided, but it does not work, the select list does not display and when I type a value, it does not show anything.

Thanks,

Carla

[Dimiter Topalov]

Hi Carla,

The described undesired behavior is caused by the fact that the click over the ComboBox component is propagated to the PanelBar item and triggers the default behavior of the PanelBar (selecting the item and/or expanding/collapsing it if there are children items). This in turn blurs the ComboBox and closes it. To avoid this you can handle the click event of the ComboBox component and prevent its propagation, e.g.:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Carla]

Hi Dimiter,

This really helped, thank you!

I now have a more complex issue that I have not been able to figured out. Each category may have ComboBoxes with different options. For example:

    Beverages category = Chai (ComboBox options: black, oolong), Chang (CB options: strong, light).

What I have tried so far, gives both, Chai and Chang, the same CB options.

Another thing is that my service for getting the list of options takes a parameter ID. I obtain this parameter inside 'this.queryChildItems...'. So I would pass ID=1001 to get the options for Chai and I would pass ID=1002 to get the options for Chang.

I also need to set the selected item when constructing my CB. I also get this information as an ID inside 'this.queryChildItems...'.

I have not yet tested my service for selecting an option to set the value in the database. If you can please also include this in your example. Do the service get called on click or do I need to add a button? what is recommended?

Thanks,

Carla

 

 

[Dimiter Topalov]

Hi Carla,

Depending on the specifics of the scenario (structure of the data items, how is data retrieved, etc.) the approach may vary. For example if the array of ComboBox data items and the initially selected item are available as properties on the Product object, you can access them directly in the template, or obtain them by creating a dictionary-like structure when retrieving the Products such that to each property (for example the ProductName), and array of items for this property is created like in the modified example:

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

In the same place where we retrieve the Products, we populate a couple of objects that will hold the ComboBox data items and the initially selected item for each Product. Then we can access these directly in the ComboBox configuration in the template and bind the data and value properties accordingly.

I hope this helps, but please note that the thread deviated significantly from the initial question and delved deeper into the specifics of a custom scenario that requires a custom implementation.

Thus I can recommend our separate dedicated offering - the Progress Professional Services, if for further questions regarding the specifics of the scenario and the desired functionality:

https://www.progress.com/services/outsourcing

They specialize in custom-tailored solutions, feature customization, custom implementation, general consulting and more. Let me know if you are interested in benefiting from their expertise, and I will arrange for someone from the team to contact you.

For reference, the scope of our support service is outlined in the respective section of your Telerik account:

https://www.telerik.com/account/support/scope

Thank you for the understanding.

Regards,
Dimiter Topalov
Progress Telerik