How to Customize Columns in Kendo Grid, Populate with New Data, and Update?

I am working with a Kendo grid that has several columns. I want to be able to update the visibility of some columns, add new ones, and then display the updated data after a button click.

Here is my attempt at achieving this:

// GET THE EXISTING COLUMNS FROM THE GRID
var existingColumns = grid.columns; 
// MAKE CHANGES TO COLUMN VISIBILITY IN A LOOP
for loop
// SET THE UPDATED COLUMNS BACK TO THE GRID
$("#orders_grid").data('kendoGrid').fields(existingColumns);
// POPULATE THE GRID WITH FRESH DATA FROM THE SERVER
$("#orders_grid").data('kendoGrid').dataSource.read();
// REFRESH THE GRID
$("#orders_grid").data('kendoGrid').refresh();

However, the code crashes on this line:

$("#orders_grid").data('kendoGrid').fields(existingColumns);

Can someone please advise me on how to do this correctly?

Answer №1

There isn't a fields functionality within the Grid. You have a couple of choices:

  • The first option is to specify all necessary columns during initialization and only hide some with the ability to later show/hide them based on your needs.
  • Alternatively, if you're unsure about the columns at initialization, you can provide a new set of column options and pass them to the setOptions method of the Grid.

Answer №2

There is no "fields" method available for the grid. To show or hide columns, Kendo provides the methods showColumn and hideColumn. Please refer to the Kendo Grid API Documentation for more information.

----------------------------UPDATE------------------------------

If you need to add new columns with a new dataset, you will need to redefine the entire column schema of the grid. I have created a simple example, which you can further develop to meet your specific requirements. You can also refer to the kendo grid columns documentation for assistance in defining your column schema correctly.

I hope this information proves helpful.

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

Move on to a different screen in a React Component once the data has been fetched

Currently, I am delving into the world of React and TypeScript and attempting to utilize "react-router-dom" in order to create a login component that will interact with my backend server. Essentially, my goal is to develop a "Login" class that, upon form ...

Deleting an item from an array using Mongoose

Looking to eliminate an element from an array in a document using mongoose. Example entry: { _id: "12345", folder: { name: "Folder1", files: [ { fileName: "File 1", fileID: "6789", folderID: "12345" } ] ...

How can I load a .json file into JavaScript without inserting it directly into the code?

Currently, I am dealing with a lengthy JSON snippet that resembles the following: { "section: [ [stuff] ] } To incorporate this into my JavaScript code, I currently use the following approach: var obj = { // {All the stuff from above} } My ...

ReactJS Antd displays a faulty design on the webpage

Currently, I am utilizing Antd for a ReactJs project, however, I have noticed an issue with the rendering of components in the layout. Below is the code snippet: import React from 'react'; export default class Test extends React.Component { ...

Tips for implementing live camera feed in reactJs

UPDATE I attempted to make changes in the code by using srcObject, however, it did not produce the desired result as expected. componentDidMount() { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then( stream => { ...

Is there a way I can prevent redundancy in my jQuery code?

I am looking to have a fixed content displayed at the bottom of each page on my website, similar to this example: <div class="footer-fix"> <p>This is its contents......</p> </div> .footer-fix { background:#fff; positio ...

Unexpected Issue: Complex Form Fields Using JavaScript, PHP, and MySQL

I encountered a very unusual error with my dynamic form field script. Describing it may not be straightforward, but I'll try my best. In my HTML form, I have a javascript function to add elements dynamically by clicking a link. 1 select field 2 tex ...

Learn the process of transmitting JSON data from a server-side (nodejs) to the client-side using Ajax

I have successfully set up a Node.js/express server to make a GET call to an API, which returns JSON data. Now, I am looking for ways to send this JSON data to my local JavaScript (client-server) in order to manipulate it by looping through and appending i ...

Utilizing material-ui's LocalizationProvider to display times in a different time zone

My application requires material-ui date and time pickers to function based on a remote time zone specified by the server. I want the today circle on the date picker to accurately reflect today in the remote time zone, and I need to convert the datetimes i ...

Is it possible for a mobile web application to continue running even when the screen is

Thinking about creating a mobile web application with the use of jQuery Mobile for tracking truck deliveries. I'm interested in sending GPS coordinates back to the server periodically. Is this possible even when the screen is turned off? If not, any ...

Passing PHP information into a JavaScript array

I am facing an issue with my PHP file where I am fetching data from a MySQL database and storing it in a PHP array. I am then trying to output this data as a JS array but for some reason, I am unable to access the JS variable in my JS files. Here is the c ...

Transfer the output of papaparse into an array

I'm currently utilizing papaparse to parse a local csv file. Here is the code I am using: var display_links = []; Papa.parse(file_links, { header: true, download: true, dynamicTyping: true, complete: function (results) { r ...

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

Tips for integrating Twilio Notify with Firebase Cloud Messaging for successful communication

Currently, I am working my way through the Twilio firebase quickstart tutorial until step 7. This step involves the final push notification test, but I am feeling a little confused about the connection between "identity" and "address". From what I understa ...

Utilize a directive to showcase information stored within the scope

Struggling to grasp the concept of directives and encountering a bug along the way. To see my example in action, check out the codepen I've created here In my scope called "movies," I have 3 movie titles that I want to display using a directive. va ...

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

The average duration for each API request is consistently recorded at 21 seconds

It's taking 21 seconds per request for snippet.json and images, causing my widget to load in 42 seconds consistently. That just doesn't seem right. Check out this code snippet below: <script type="text/javascript"> function fetchJSONFil ...

Display PDF file retrieved from the server using javascript

I am currently working on a web application using JavaScript, jQuery, and Node.js. I need to receive a PDF file from the server and display it in a new browser window. While I believe I have successfully received the file on the client side (the window sh ...

Can I display my clickCount without having to use the <input> tag for printing?

Is there a way to display my click count on the page without using an input element? Below is the code for reference: <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title> ...

What is preventing the installation of this Chrome extension?

I am struggling to install a few short and simple extensions on Chrome. The error message I receive about the 'manifest version' indicates that the issue might be due to outdated information. Since I lack experience in Chrome extensions and JavaS ...