Programatically open or close 'expander' component in blank form - Forum - Kendo UI Builder - Progress Community

Programatically open or close 'expander' component in blank form


Programatically open or close 'expander' component in blank form

This question is not answered

I'm trying to figure out if it's possible to open or close the 'expander' component used in a blank view form. I'm developing an order entry app, and when the edit field is 'partnum', I want to pop open the expander containing my part lookup grid (since you don't seem to be able to put grids in a KendoWindow).

Documentation on this is woefully scarce.

Does anyone have any experience with this? 

All Replies
  • Hi  jpetersen,

    You can do this by modifyng the expanders config.expanded value like this:

    myExpander.config.expanded = true;

    You need to annotate your expander as a @ViewChild first to access it.

    Hope this helps,


  • Thanks, George. I probably should have added to my post that I'm still relatively new at this.

    Could you please 'expand' on the part about annotating the expander as a @ViewChild? I'm not familiar with that.

  • Hi,

    @ViewChild is an Angular anotation that allows you to access elements from your .html template from your component. You can find details on how this happens here .

    Bellow is a snipet on how you can realise what (I think) you want.

    myview.html :

    <kb-expander #myExpander [config]="$config.components.myExpander" [id]="'myExpander"></kb-expander>

    <button type="button" class="k-button k-primary" (click)="expand()" >



    myview.ts :

    export class myview extends myviewBaseComponent {

     @ViewChild("myExpander") public myExpander: KbExpanderComponent;

     public expand(){

           this.myExpander.config.expanded = !this.myExpander.config.expanded;



    Explanation :

    I have an expander in the template and a button that executes the expand function on the click event.

    In the myview.ts I added a ViewChild annotation for the expander. Be careful the  @ViewChild("myExpander") refres to the #myExpander value  in the template.

    After this I can access the expander component and its methods / atributes anywhere in myview.ts.

    In the expand method I changed the value of config.expanded to the oposite of what it was before.

    This should result in the "exapand" button "programaticly" expanding and closing the expander.

    I hope this is clear. Be carefull the code above might have typos in it as I did not test it.