Porque no puedo agregar un input a un <kendo-toolbar>

[Justin]

Tengo algo como esto dentro de un kendo grid , en el toolbar yo necesito tener un input que me servira de buscador para mi grid y al lado quiero  kendoGridAIAssistantTool , hacia la derecha quiero 2 botones importar excel y pdf , la pregunta es porque no aparece mi input? cuando utilizo kendo toolbar  , ademas que quiero usar comandos de generar PDF Y Excel del grid pero solo puedo con kendoGridToolbarTemplate deberia poder usarlo tambien con kendo-toolbar , ya que kendoGridToolbarTemplate y kendo-toolbar no se puede usar a la misma vez  , deberian arreglar eso

 

 <kendo-toolbar>

 

   <kendo-textbox
      style="width: 200px"
      placeholder="Buscar..."
      (valueChange)="onFilterChange($event)">
    </kendo-textbox>

 

<kendo-toolbar-button

kendoGridAIAssistantTool requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"

[keepOutputHistory]="true"

[aiPromptSettings]="aiPromptSettings"

[aiWindowSettings]="aiWindowSettings">

</kendo-toolbar-button>

 

    <button kendoGridExcelCommand>
      Exportar Excel
    </button>

    <button kendoGridPDFCommand>
      Exportar PDF
    </button>

 

 </kendo-toolbar>

 

[Zornitsa]

Hi Justin,

Indeed, you are correct that the kendoGridToolbarTemplate and <kendo-toolbar> cannot be used simultaneously within the Grid. I want to clarify that this behavior is by design since they represent two different approaches to configuring the Grid toolbar:

• https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/grid-toolbar 
• https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/toolbar-template 

It is important to mention that using the <kendo-toolbar> component within the Grid is now the recommended approach for configuring the Grid's toolbar. The developer can use the kendoGridToolbarTemplate as an alternative to the <kendo-toolbar> component to achieve highly customized solutions.

With the above being said, you can use the <kendo-toolbar> to add both the built-in toolbar tools and custom controls, and this is fully supported out of the box. To be more comprehensive, the Toolbar component supports generic control types and custom controls, such as dropdowns and inputs, alongside the built-in directives. You can find more information on how to set up custom control types in the Grid's toolbar below: 

• https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/grid-toolbar#including-custom-control-types
• https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types 

In that way, the developer has the ability to add the desired custom tools within the Grid's toolbar, including custom components like the TextBox.

Regarding the buttons for Excel and PDF export functionalities, the developer can add them in the <kendo-toolbar> by applying their corresponding directives (kendoGridExcelTool, kendoGridPDFTool) to a <kendo-toolbar-button> component, as also documented below:

• https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/grid-toolbar#built-in-grid-toolbar-tools

Here is also a StackBlitz example, demonstrating how to configure the TextBox component as a custom toolbar tool and how to set up the kendoGridExcelTool and kendoGridPDFTool in the Grid when using <kendo-toolbar>:

• https://stackblitz.com/edit/angular-jrqon3ce?file=src%2Fapp%2Ftextbox-toolbar-tool.component.ts 

Lastly, I noticed in the shared code snippet that the Telerik-hosted AI service endpoint provided in the demos (https://demos.telerik.com/service/v2/ai/grid/smart-state) is utilized. However, I want to clarify that this endpoint is intended solely for demonstration purposes and is not meant for use in production environments. For production scenarios, the developer should implement their own AI service, tailored to the specific data and requirements of the application.

I hope the provided information sheds some light on the matter. Let me know if any further questions arise.

Regards,
Zornitsa
Progress Telerik