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

Angular - Replicated Side Navigation

I am a beginner in Angular and I am using Angular 10 to design a simple page with a side bar and footer using Angular Material components. I am encountering an issue with displaying the left side navigation correctly as it is currently being duplicated. Be ...

angularangular-material

Steps for implementing a button to erase all created polygons in Leaflet and Geoman

I'm currently utilizing Geoman-free in conjunction with Leaflet to create a map where I can draw polygons. My objective is to develop a custom button within my Angular UI that can clear all the drawn polygons. How can this be achieved? Update: Let m ...

angularleaflet

The 'getAllByRole' property is not found in the 'Screen' type. TS2339 error

I am currently developing a web application using ReactJs for the front end. While testing the code, I encountered the following error: TypeScript error in My_project/src/unitTestUtils.tsx(79,27): Property 'getAllByRole' does not exist on type & ...

reactjstypescriptreact-typescript

Nativescript Image-picker is encountering difficulties locating files in external storage

I have been using nativescript-imagepicker from the related website and followed all the instructions in the documentation and sample codes. I even set the permission code in AndroidManifest.xml for API 29 and higher. However, I encountered an error after ...

angularnativescript

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

The class function in the exported typescript logs that "this" is not defined

I am currently facing an issue with my TypeScript class where I am setting class values in a constructor and referencing them using "this" in a class method. While the .ts file compiles without any warnings, when I import the compiled .js file into another ...

node.jstypescript

Rendering a React/Material UI class based on the state variable in a conditional manner

I am currently working on building a basic navbar setup using React and Material UI. I have encountered an issue where React-Router-Dom does not seem to be functioning within this particular project, and implementing it would be excessive for the simple ta ...

reactjstypescriptmaterial-uiconditional-statementsstyling

update component following an ajax request

I attempted the suggested solutions for similar questions, however, they proved ineffective. Upon inserting data into my database, I am looking to update my component (with the user remaining on the same component). I tried navigating directly to the com ...

angular

What is the best way to retrieve the attribute value of an element using Angular 2?

I am working with an HTML span that contains two hyperlinks. <span><a href="http://appcarvers.cloudaccess.host/index.php?Itemid=207" alt="Shirley Setia">Shirley Setia</a><i class="fa fa-caret-right"></i> <a href="http:// ...

angularionic2angular2-directives

What is the best way to filter specific data types when using ngFor in Angular?

As I loop through the array named "fruits," which contains objects of type "FruitService" that I created, I want to display each element. However, when I delete them (I know it's strange, no database involved), they turn into type "undefined" and star ...

htmlangulartypescriptngfortypescript-types

Acquire elements and variables from another component using a dual @NgModule setup in Angular2

I am looking to retrieve the value of the element variable and _dataTable component from the datatable.component.ts file (specifically from the render() function) in order to create a new event for a new button using element.on. Alternatively, I could crea ...

angularvariablescomponentsng-modules

Show the hash codes in angular2

I need assistance with displaying hash values in angular2. The response I am receiving is in the following format: [{"1":"7"},{"2":"6"},{"3":"8"},{"4":"1"}] The key "1" represents user_id and the value "7" represents the count of posts for that user. I w ...

angular

Intellisense from @reduxjs/toolkit is not showing up in my VS Code editor

My experience with vscode is that intellisense does not recognize @reduxjs/toolkit, even though the code itself is functioning correctly. I have already installed the ES7+ React/Redux/React-Native snippets extension from here. Here are a couple of issues ...

reactjstypescriptvisual-studio-codeautocompleteintellisense

Guide on creating a Typescript function with a strongly typed argument

I am looking to develop a function that accepts a type created using export class and imported in the traditional manner as an extension of a particular type. With a base Page class and various derived classes, I aim to have this function capable of receiv ...

typescriptinheritancestrong-typingtypescript3.0

The canActivate: [AuthGuard] feature on the external router is not functioning as expected

I'm encountering an issue with my routing. I attempted to use the following code: const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ { path: 'events', component: Ev ...

angulartypescriptnativescriptrouterguard

Angular Fails to Identify Chart.js Plugin as an Options Attribute

Encountering issues with using the 'dragData' plugin in Chart.js 2.9.3 within an Angular environment: https://github.com/chrispahm/chartjs-plugin-dragdata After importing the plugin: chartjs-plugin-dragdata, I added dragdata to the options as sh ...

angulartypescriptpluginschart.js

Setting up systemjs.config.js for utilizing relative paths within IIS - A step-by-step guide

My new ASP.NET MVC web application utilizes Angular for its UI components. I have set up the necessary config files in my project (e.g. package.json and systemjs.config.js). Created a test page Index.cshtml to test out the template in app.component.ts. The ...

asp.net-mvcangulartypescriptsystemjs

Dealing with Angular package.json and unresolved peer dependencies

As I embark on the journey of developing an Angular project using CLI, I am also exploring additional components like angular handsontable and primeng. Amidst this exploration, a wave of confusion hit me when I attempted to check the versions of various pa ...

angularnpmnpm-installpackage.json

Prevent redundancy by caching svg icons to minimize repeated requests

I have a collection of info cards on my page, each featuring its own unique illustration along with a set of common icons (SVG) for options such as edit, delete, and more. While the illustrations vary from card to card, the icons remain consistent across a ...

angulartypescripthttpsvgcaching

Guide on utilizing the useContext hook in React/Next.js while incorporating TypeScript

As I embark on my journey in the world of TypeScript, I find myself working on a new project in Next.js using TypeScript. My goal is to incorporate authentication functionality into this project by utilizing createContext. Coming from a background in JavaS ...

reactjstypescriptreact-hooksnext.js