Filter component (kendo-filter) - how to control Add Group button behaviour

[Murray]

I have a use case for this component where I don't wish the user to be able to create nested expressions. Is there any way to control the enabling / disabling of the Add Group button. Or show / hide it depending on nesting level?

[Murray]

I actually found a solution to this myself but it's a bit hacky:

  ngAfterViewInit() {
    this.filterComponent.toolbarElement.children[2].innerHTML = "<span></span>";
  }

I know this is a new component so perhaps it hasn't been built out more fully but it could do certainly do with some refinement.

Another hack I made was for automatically opening the first filter, as follows:

 

 private openFilter() {
    const event = new MouseEvent("click", {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    this.filterComponent.toolbarElement.children[1].children[0].dispatchEvent(
      event
    );

  }

It should be pretty simple to add some control switches for this sort of behaviour.  Also perhaps being able to specify a limit to the level of nesting you wish for your expressions.

[Murray]

I think you also need a 'Filter' tag for this forum as it doesn't exist yet...

[Martin Bechev]

Thanks for the heads up.

The Filter tag was now added.

[Martin Bechev]

Hi Murray,

Thank you for the provided feedback.

Currently, the addGroup button visibility cannot be controlled out of the box. But we already track the customer demand for such an enhancement in the following feature request item:

https://feedback.telerik.com/kendo-angular-ui/1575208-toggle-the-visibility-of-the-add-or-and-addgroup-buttons

In these lines of words, to achieve the desired behavior custom logic needs to be used. The found solution looks valid. An alternative approach is to use querySelector to disable the button:

ngAfterViewInit() {
    const btn = document.querySelector(
      `.k-filter .k-filter-toolbar .k-button[title~=Group]`
    );
    console.log(btn);
    btn.setAttribute('disabled', 'true');
  }

https://stackblitz.com/edit/angular-otcqbb

or if you prefer you can completely hide it with:

btn.setAttribute('hidden', 'true')

I hope this sheds some light on the case.

Regards,
Martin
Progress Telerik