Tips for adding temporary text in filter input of Kendo UI Grid using Angular

I'm currently working with Kendo UI Grid in conjunction with Angular, and I am struggling to find a solution for adding text or a placeholder in filter inputs using Typescript.

Within my code, I am utilizing the kendoGridFilterCellTemplate:

<kendo-grid-column field="sender" title="Sender" width="80">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell [showOperators]="false" [column]="column" [filter]="filter">
        </kendo-grid-string-filter-cell>
      </ng-template>
    </kendo-grid-column>

By default, Kendo UI Grid filter inputs do not display any placeholder text, and I would like to include something like this:

        <kendo-grid-string-filter-cell [showOperators]="false" [column]="column" [filter]="filter" placeholder="Search...">
        </kendo-grid-string-filter-cell>

Kendo Grid does not seem to recognize the placeholder HTML element. Is there a way to achieve this functionality without relying on jQuery?

angulartypescript

Answer №1

For adding placeholder text inside a kendo-grid-string-filter-cell, simply use the DynamicPlaceholder attribute.

 <kendo-grid-string-filter-cell
    [showOperators]="false"
    [column]="column"
    [filter]="filter"
    [DynamicPlaceholder]="'Action Title'"
  >
  </kendo-grid-string-filter-cell>

If necessary, you can also pass the string variable ActionTitle in the following way.

 <kendo-grid-string-filter-cell
    [showOperators]="false"
    [column]="column"
    [filter]="filter"
    [DynamicPlaceholder]="ActionTitle"
  >
  </kendo-grid-string-filter-cell>

This method is reliable and has been tested with version - 

@progress/kendo-angular-grid": "^5.4.0

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to pass a parameter to an NGXS action that is not the Payload?

I am working on implementing an Ngxs action that includes a parameter in addition to the payload. This parameter is used to determine whether or not a notification should be sent. @Action(UpdateUser) async UpdateUser( ctx: StateContext<ProfileStat ...

javascriptangularngxs

Exploring variables within an Angular2 component's view

Is there a way for me to access and display the coordinates in my template? export class DashboardPage { constructor(public navCtrl: NavController) { Geolocation.getCurrentPosition().then(pos => { console.log(pos.coords.latitude, pos.coor ...

angular

What could be causing the data-* prefix to malfunction in Angular 9?

I'm facing an issue with a basic component in Angular 9. Check out the code below: Component : @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class He ...

htmlangulartypescript

Utilizing the dialogue feature within Angular 6

Situation: I am managing two sets of data in JSON format named customers and workers: customers: [ { "cusId": "01", "customerName": "Customer One", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data- ...

angulartypescriptangular6angular-components

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...

javascripttypescript

Guiding TypeScript to autonomously deduce the precise types of an object that implements a generic interface

Within this code snippet, TypeScript appears to be unaware of the specific type associated with userService.getByUserId in the final line. The expected type should be (userId: string) => ServiceResult<User>, but TypeScript is enforcing a more gene ...

typescript

Complicated connections between TypeORM and MySQL

Currently leveraging TypeORM in tandem with MySQL, my database comprises of two main Entities, namely User and Project: @Entity() class User { @PrimaryGeneratedColumn('uuid') id: string; @Column({}) name: string; } @Entity() ...

mysqltypescriptnestjstypeorm

How can we eliminate the need for specifying the order of generic arguments in TypeScript?

In the development of my middleware engine, I have incorporated various generic arguments that are specific to the particular implementation in use. export type Middleware< Store = never, Args = unknown, Response = unknown > = ( context: { ...

javascripttypescripttypescript-generics

How to Retrieve a Symbol in TypeScript

In the code snippet below, there is a function named factory that returns a Symbol of type Bob. However, TypeScript appears to forget the type of the return value immediately, leading to an error when trying to assign the return value to variable test one ...

typescript

Transfer the HTTP functionality to a separate service using Angular2 and TypeScript

Currently diving into learning Angular2 and TypeScript after years of using Angular 1.*. I have a top level component that has a property derived from a custom type created in another class. When ngOnInit() is triggered, it makes an HTTP call to a mock RES ...

angularjstypescriptangularrxjs

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

javascriptangulartypescriptvideo-upload

What is the best way to send data from a child component to a parent component in Angular 2?

I want to retrieve data from my child component, which contains a form in a popup. How can I pass all the details to the parent component? Here is the TypeScript file for my parent component: import { Component, OnInit } from '@angular/core' ...

htmlangular

Error encountered with object.map() function - what fundamental concept am I missing?

Could someone lend me a fresh set of eyes on this... The React Component is fetching data from MariaDB using a useEffect() hook. The data is retrieved successfully without any errors, and the console.log shows the correct data (refer to the image below). ...

reactjstypescriptpreact

Utilize a jest mock object and pass it as a method parameter to achieve seamless testing

I am attempting to create a mock object (ColumnApi from ag-grid) using jest and then pass it as a parameter to a function that calls the "getAllColumns" method from ColumnApi. I am not concerned with how the "getAllColumns" method functions, but I want it ...

typescriptvue.jsjestjsmockingag-grid

Returns false: CanActivate Observable detects a delay during service validation

Issue with Route Guard in Angular Application: I encountered an issue with my route guard in my Angular application. The problem arises when the guard is active and runs a check by calling a service to retrieve a value. This value is then mapped to true or ...

angulartypescriptrxjsangular-ui-router

Multiple occurrences of Angular @HostListener event being triggered

I am currently working on an Ionic 3 application where I have created an "auto-complete" directive. This directive triggers an auto-complete dialog when the element is focused. The implementation of this in the directive looks like this: @HostListener(&ap ...

angulareventsionic3

Maintaining accurate type-hinting with Typescript's external modules

Before I ask my question, I want to mention that I am utilizing Intellij IDEA. In reference to this inquiry: How do you prevent naming conflicts when external typescript modules do not have a module name? Imagine I have two Rectangle classes in different ...

javascriptintellij-ideatypescript

Upgrade all dependencies within the organization's Angular scope in the package.json file to the latest version available

My current package.json dependencies include: "@angular/animations": "^5.0.0", "@angular/cdk": "^5.2.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/flex-layout": "^2.0.0-beta.12", "@angular/forms": "^5 ...

angularnpmangular-cli

Creating a package exclusively for types on NPM: A step-by-step guide

I'm looking to set up a package (using either a monorepo or NPM) that specifically exports types, allowing me to easily import them into my project. However, I've run into some issues with my current approach. import type { MyType } from '@a ...

typescriptnpmmonorepo

Troubleshooting Angular 4 Routing Problems

I am facing an issue with Angular where the components I configure to load at the empty '' path are not rendering properly. Below is a breakdown of my project structure: project/ |- app/ | |- landing-page/ | |- second-page/ | |- third-pag ...

angularangular2-routing