EventListener for Keystrokes in Kendo Grid

I have set up a Kendo Grid using Kendo directives. How can I capture the keydown or keypress event of the grid? My main goal is to populate a column in the grid based on user input from another column. For instance, filling in the phone number when the first name is entered. To achieve this, I think I need to utilize the Kendo Grid edit and keypress events to search for the user input, unless there's a more efficient way to accomplish it. Is this feasible?

This is how I initialized the grid:

<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
   ....
   <div kendo-grid="vm.testGrid" k-options="vm.testGridOptions" k-rebind="vm.testGridDataSource.data" k-on-edit="vm.onEdit(kendoEvent)"></div>
   ....
</section>

Here are the options defined in my JavaScript file:

vm.testGridOptions = {
  columns: [
    { field: "Id", title: "ID" },
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" },
    { field: "Phone", title: "Phone" },
    { command: ["destroy"] }
  ],
  toolbar: ["create", "save", "cancel"],
  dataSource: vm.testGridDataSource,
  editable: {
    createAt: "bottom"
  },
  height: 400,
  autoBind: false
};
vm.onEdit = function (e) {
    //if grid column == Id && keypressed == Tab key
    //search
};

The grid is currently in batch edit mode.

Answer №1

To determine the current column/field name based on the index, you can use the following code to filter the dropdown in the column next to it. Note that this is a sample code and you should replace the DOM ids with your own:

vm.onEdit = function (e) {
    var header = vm.thead; // grid header
    var index = vm.cellIndex(e.container); // current cell index

    var th = $(header).find("th").eq(index);
    var colName = $(th).data("field"); // fieldname for current cell  

    var dataItem = e.model; // row model

    if (colName == 'LastName') {
         var phoneDropDown =  e.container.find("#PhoneDropDownId").data("kendoDropDownList");
         if (phoneDropDown) {
               phoneDropDown.dataSource.filter({ field: "Phone", operator: "eq", value: e.model.LastName });
         }
    }
}; 

Answer №2

Given the limitations of the Kendo Grid, I opted to utilize the JQuery onBlur event to achieve the desired functionality.

vm.onEdit = function (e) {
    alert("Edit event triggered");
    $('input.k-input.k-textbox').blur(function (f) {
        alert("Blur event triggered");
    }
};

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

Ways to turn off emojis in froala editor

I successfully integrated the Froala editor and dynamically generated an ID for it based on specific requirements. Everything is working well, but I now need to disable emoticons in this editor. $('#froala'+key).froalaEditor({ imageUploadP ...

Utilizing the Public Directory in Vite Compilation

One issue I encountered in my project with Vite version 2.9.7 is related to the handling of images stored in the public folder within the project's root directory. To import these images, I utilized Vite's import.meta.glob function, like so: imp ...

Steps for creating a button that increments by using ng loop:1. Begin

I am attempting to create a button that can be used to increment and decrement. However, I am facing an issue where all input fields are being affected instead of just one. This is the code in body.component.html <div class="items-detail-detail" *n ...

Concealing specific outcome by implementing jQuery and AJAX with a database

I have an HTML list that appears as follows: <ul> <li>something</li> <li>something1</li> <li>something2</li> <ul> <div class="randomwrapper"> <img src="<?php echo $databaseresult[$i];?& ...

Update the href tag to javascript: instead of #

Hello, I previously inquired about how to dynamically load a div's content (a URL) by clicking a button instead of loading it on page load. Someone provided me with the following code as a solution: <script type="text/javascript"> function ...

Learn how to store the outcomes of an HTTP operation within array.map() in JavaScript

Having read numerous articles, I am a complete beginner when it comes to async programming and struggling to grasp its concepts. My goal is to map a filtered array of objects and return the result of a function (an amount) to set as the value of pmtdue. De ...

Sending information from a react front-end to a Node.js back-end server

I am having trouble integrating React with Node. When I send data from the React side to Node, it always comes back as undefined. Can someone please review the code below? (The GET request works fine!) React side: export default class customers extends C ...

The regex pattern checks for the presence of '<' followed by a space or

When using a multi-line textbox, I encountered the following string: index a<3 2<x I want to use regex to add a space after the character '<' if there isn't already one present. If there is already a space after the character &ap ...

Interactive jQuery dialog box with a customizable form

I am currently working on a form that sends post data to a PHP parser. However, I realize that the user needs to input a considerable amount of information, so I decided to implement jQuery UI modal dialogs to make the process more user-friendly. When the ...

The POST request to the localhost API endpoint resulted in a 404 Not Found error

Whenever I try to send a POST request to "/api/auth/signup" in my JavaScript application, I keep getting a 404 Not Found error. My goal is to create a MERN application for a Modern Real Estate Marketplace. This is the code snippet causing the is ...

Fabric JS i-text cursor malfunctioning when loading JSON data

When I initially create a fabricjs i-text object in a new window, the cursor works perfectly. However, upon loading a saved JSON file, the cursor no longer functions as expected. I am utilizing the league_gothic font. Please refer to the image below showi ...

Use the angular cli to incorporate the CSS styles found in the node_modules directory

After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...

Dropzone is encountering an issue with uploading photos: The upload path seems to be invalid

Despite thoroughly checking the path settings in my code, the error message persists when I attempt to upload photos using Dropzone. It seems to be indicating a problem with the upload path. What could be causing this issue? I am currently in the process ...

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

Transforming a directory structure into JSON using Node.js

Looking to Achieve: My aim is to transform the existing directory structure provided below into a single JSON file. The directory includes JSON files that must be integrated into the output file. Restrictions: Only Node.js Inquiries: How can I effi ...

Error: The configuration object is invalid, and I am unable to deploy my server to test the bundled code

After running the webpack --mode production command to build the dist folder, I encountered an error when trying to run the server as the app is still running in developer mode. The error message displayed was: C:\Users\Bymet\Documents&bs ...

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

The concept of AJAX send function and toggling button visibility

I am facing a challenge with a textarea and send button on a panel that is displayed after entering the first character. The visibility of the button is controlled by the isButtonVisible() method. Once clicked, it sends the text from the textarea using the ...

Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00". scope.$watch(attrs.ngModel, function(new ...

Safari's problem with CSS transitions

This issue is specific to Safari, as it has been tested and works fine in Chrome, Opera, and Firefox. Upon hovering over a certain div (1), a child div (2) slides out by adjusting the left property. However, the child elements (buttons) within the second ...