Questions tagged [kendo-grid]

The Kendo Grid is an exceptional widget provided by Kendo. Its main function is to showcase tabular data while offering a plethora of features to enhance data interaction. These features span from pagination, sorting, grouping, to even selection capabilities. Without a doubt, the Grid proves its might by providing users with ample configuration options. The versatility of this powerful widget shines as it enables seamless binding to both local JSON data and remote data sources via the remarkable Kendo DataSource component.

Enhancing Efficiency: Streamlining Editing in KendoUI Grid for Angular 2/4

According to the information provided on this link, it seems that batch editing of the kendo ui grid for angular 2/4 is currently unavailable. Is there anyone who has come up with a solution or workaround for this issue? ...

angularuser-interfacekendo-uikendo-grid

Ways to customize the appearance of a specific column in a k-grid td

While working with a kendo grid, I encountered an issue with setting a tooltip for one of the columns. After some experimentation, I discovered that in order for the tooltip to display correctly, I needed to override the overflow property on the k-grid td ...

htmlcssangularjskendo-uikendo-grid

I am wondering why my JSON appears in Kendo UI as Datasource.options.data but not Datasource.data

I'm new to Kendo and struggling to display my JSON data in the Kendo Grid. When I try to access my $scope.actionData using a regular HTML table, it displays on the page. My ultimate goal is to achieve something similar to this. The column headers are vis ...

jsonangularjskendo-uikendo-grid

Unlock the Potential: Leverage Kendo Grid jQuery's Brilliant Feature - Reveal Hidden Column

Presently, the grouped columns are concealed using the attributes of the k-group-indicator element field. $("div.k-group-indicator").each(function (i, v) { grid.hideColumn($(v).data("field")); }); However, I am now faced with the task of making th ...

jquerykendo-uikendo-grid

How to add a new row to a Kendo grid with a unique custom styling

I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't find ...

javascriptjquerycsskendo-uikendo-grid

What are the steps to modify the "text" displayed on a button in a kendo grid?

How can I change the default button text "add new record" on my kendo grid? I attempted to modify it using the following code, but it did not work: #turbinegrid .k-icon.k-add::after { content: "ADD"; } ...

csskendo-grid

How to make a Kendo Grid Combobox template or editor automatically set focus and select all text

I've been experimenting with using the combobox as either an editor or template for a column. The key difference is that one (the template) is always visible, while the other (the editor) is only displayed when the user edits a cell in the column. I&a ...

jquerykendo-uikendo-grid

Utilize Kendo jQuery to create advanced filter menus similar to those found in

Currently, I am utilizing the Kendo grid UI within the Jquery Library. In order to enhance my grid's functionality, I am looking to achieve two specific objectives with the column filter menu dropdown checkboxes: 1) Alphabetically sorting the checkboxes ...

jquerykendo-uikendo-grid

Choose a row by selecting the checkbox in the Kendo UI grid using TypeScript

I'm just starting out with Kendo UI and Angular 2, and I'm currently working on integrating Kendo UI with Angular 2. Specifically, I have a Grid Module set up with checkboxes in each row. My goal is to extract the row ID or any other field value when a row ...

angulartypescriptkendo-uikendo-grid

What is the process for collapsing Kendo Grid headers?

My current task is rather unusual. I have been tasked with collapsing all data rows of a Kendo grid to its header. While I am familiar with collapsing to groups, this particular requirement seems quite challenging. Below is the proposed design for the Ken ...

jquerykendo-uikendo-grid

What is the best way to retrieve information from my Angular 2 component while I am already within my Kendo Grid?

After creating a new row in my grid, I encounter an issue with accessing other information within my component. Typically, I would use "this.method" or "this.property" to access these details. However, post-creating the row, "this" no longer references t ...

angularkendo-uicomponentskendo-grid

Use rowSelected to set the initial selected rows in an Angular Kendo UI grid

Within my Kendo UI Grid, the ability to select individual rows is made possible by clicking a checkbox that adds them to an array. However, my goal is to initially set selected rows based on whether or not the dataItem for each row exists in a specified ar ...

angularkendo-uikendo-grid

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

I am struggling with implementing custom command buttons in a Kendo grid that makes an AJAX call using JavaScript to call a web API post action with dynamic parameters (start, stop, restart) behind button clicks. datasource dataSource = new ken ...

javascriptjqueryajaxtelerikkendo-grid

Add a click function to an element in a grid when it is databound

In my TypeCtrl ES6 class angular controller, I am using a kendo datagrid directive with a template for grid config options. Within the grid template, I need to call a method from the TypeCtrl class when a span within the row is clicked. However, the functi ...

javascriptangularjsangularjs-scopekendo-gridangularjs-ng-click

Troubleshooting: Height setting issue with Kendo UI Grid during editing using Jquery

Issue: My Kendo UI JQuery Grid is fully functional except for a bug that occurs when adding a new record. When I add and save a new record, the grid's footer "floats" halfway up the grid and the scrollbar disappears, making it look distorted. Further in ...

javascriptjquerykendo-uikendo-grid

Fetching DataItem from a Kendo Grid using a custom button in an Angular application

I have been working on transferring the dataItem from a Kendo grid to an Angular 6 component. Here is my setup: <kendo-grid [data]="view | async" [height]="533" (dataStateChange)="onStateChange($event)" (edit)="editHandler($even ...

angularkendo-uikendo-griddataitem

The pagination messages in the Telerik Kendo UI Grid Vue do not appear to be functioning properly

I've been attempting to modify the pagination display message, but I'm encountering an issue. The default message currently looks like this: https://i.stack.imgur.com/MYmoz.png '{0} - {1} of {2} items' For example: "1 - 10 of 1000 items' I want to ...

vue.jskendo-uikendo-grid

The Jquery Click Event does not seem to function properly when applied to a Kendo Grid

I need to implement a jQuery function on the Destroy button in order to store data in an array: For this purpose, I am utilizing Kendo Grid as shown below: @(Html.Kendo().Grid(Model) .Name("Passenger") .TableHtmlA ...

jqueryasp.net-mvcasp.net-mvc-3kendo-uikendo-grid

Guide to Implementing Kendo-Grid in Angular 4 CLI

Having trouble using the Kendo-Grid in Angular4? You may encounter this error message: Uncaught Error: Template parse errors: 'Kunden-grid' is not a known element: 1. If 'Kunden-grid' is an Angular component, then verify that it is part of this module. 2. ...

angulartelerikkendo-grid

Issues Arising When Using $scope Variable as Datasource in Kendo UI Grid with AngularJS

I have tried multiple tips and tricks from various sources, but I still can't seem to solve my problem. My goal is to replace a trNgGrid with the Kendo UI Grid. The trNgGrid functions differently as it retrieves its data from a $scope variable named ...

angularjskendo-uikendo-grid

I'm facing an issue in Angular 4 where the routing for a child component is

I'm currently working on implementing routing in my Angular app for movies. I've set up a movie component and an edit movie component. The edit movie component is nested within the movie component, as shown in the folder structure below: https://i.stack. ...

angularkendo-gridangular4-router

Retrieving information from a Kendo grid cell

I am working on a web application that utilizes Kendo Grid. How can I retrieve the values of the "Ticket No" from the selected checkboxes? https://i.stack.imgur.com/aPOje.png This is my code: var grid = $("#poGrid").data("kendoGrid"); grid.items().filte ...

jquerycheckboxtypescriptkendo-grid

Tips for maintaining values in Kendo MultiSelect after editing within a grid template

I am encountering an unusual issue with a grid that displays a comma-separated list of values and utilizes an array in a template editor for the grid. When I add a value to the multiselect, save in the editor, and then reopen the editor, only one of the mo ...

angularjskendo-gridkendo-multiselect

The integration of a Kendo Grid with a Kendo Tooltip using an inline template is malfunctioning

My kendo Grid has a tooltip that displays details using a kendo tooltip. The template below works fine as an external template, but I am not sure if it can be passed as an inline template. Here is the code for the external template: <script id="ja ...

angularjskendo-uikendo-gridkendo-templatekendo-tooltip

Tips for increasing the height of a Kendo-UI grid to 100% within an AngularJS 1.x environment

Encountering an issue, I needed a Kendo UI Grid widget with its height set to 100% of the surrounding <div>. Attempting basic CSS styling on the grid proved unsuccessful: html, body { height:100%; } .expand-vertical { height: 100%; min-h ...

jqueryangularjskendo-uiheightkendo-grid

Ways to deactivate a button within a Kendo Grid cell

I am trying to include 2 buttons in a cell, where one button calls a specific function and the other button disables the previous button that calls the function. In my template column, I have implemented the following: return '<button kendo-button clas ...

javascriptjquerykendo-uikendo-gridangularjs-ng-disabled

How can I retrieve data during a double-click event in Kendo Grid using Angular?

How can I retrieve data on the doubleClick event in a Kendo Grid? I want to access the same object that is fetched during the selected event, which would be the dataitem at the selected index row. HTML: <kendo-grid #myGrid [data]="gridDat ...

javascriptangulartypescriptkendo-uikendo-grid

Using ngFor to create dynamic columns in a Kendo Grid

Looking at this code snippet <kendo-grid-column title="{{localizationKeys.adempimenti.organizzazione.responsabile}}" field="addettiGrid"> <li *ngFor="let addetto of addettiGrid; let i=index"> <div>{{addetto}}</div> ...

angularkendo-uikendo-gridngfor

Can one ascertain the cleared Kendo grid column filter using jQuery?

I am working with a kendo grid that has approximately 10 to 12 columns, each with its own filtering option. My current task requires me to identify when a column filter is cleared and determine which specific column triggered the event. Is there an event w ...

jqueryfilterkendo-grid

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

I am currently facing a challenge in passing the row data from the Kendo Grid to a partial view that is displayed through a Kendo popup window. Within the partial view, users have the option to upload an image file related to the specific row record. This ...

javascriptjquerykendo-uikendo-gridkendo-window

Customize date filtering in KendoUI grid

I am trying to modify the date format in the filter of my kendo grid. For example, I would like to change 1/30/2015 to Jan 30, 2015 I have successfully changed the date format for Start Date field: "StartDate", title: " ...

javascriptkendo-uikendo-grid

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...

cssangularkendo-grid

What is the best way to update Kendo grid data whenever I sort a column or click on it?

Below is a grid where the user can click on the subcategory Name column to populate another grid on the right side with data for the selected row. I would like to implement a function for the subcategory Name column so that when the user clicks on it, th ...

angularjskendo-uikendo-grid

Ways to deactivate Kendo UI draggable function

While working in my Angular-Kendo setup, I have implemented a Drag/Drop functionality on the rows of two grids. I referred to this example as the basis for my code : http://jsfiddle.net/BtkCf/4/ The row drag feature is functioning properly, but it seems ...

angularjsdomkendo-uikendo-grid

How can I add multiple filters to a Kendo Grid?

Is there a way to include two separate filter fields for date filtering in Kendo Grid UI? Currently, the method I am using only allows for one date filter to be displayed. filterable: { ui: function (element: any) { element.ken ...

javascriptangulartypescriptkendo-uikendo-grid

What is the best way to extract raw data from a kendo dataSource?

After fetching data for my Kendo grid from the backend and populating it in the alignedProcessesToRiskGridOptions, I noticed that while the data is displayed in the grid, I also need access to the raw data for additional logic. Is there a way to retrieve d ...

javascriptangularjskendo-grid