Save the processed information in a Kendo Grid column

Question

Save the processed information in a Kendo Grid column

I am attempting to store data in a specific column by calculating it using information from another column.

Currently, I have a function that retrieves the number of available licenses for a given Id in JSON format:

function getAvailableLicenses(id) {
    var url = "/Host/Organization/AvailableLicenses/" + id;
    $.get(url, function (data) {
        return data.AvailableLicenses;
    });
}

How can I save this number in a column named "AvailableLicenses"?

Here is my current Grid setup:

$("#OrganizationGrid").kendoGrid({
dataSource: viewModel.get("orgDataSource"),
filterable: {
    extra: false
},
sortable: true,
pageable: true,
columns: [
    { field: "Id", hidden: true },
    { field: "Name", template: "<a href='/Host/Organization/Detail/#:Id#'>#:Name#</a>" },
    { field: "LicenseNumber", title: "Number of Licenses" },
    { field: null, title: "Available Licenses", template: "#= getAvailableLicenses(Id) #" },
    { field: "LicenseExpiration", title: "License Expiration", format: "{0:MM/dd/yyyy}" },
    { field: "State" },
    { field: "Active" }
],
editable: false
});

Although the function is being called for all rows, the "AvailableLicenses" column displays "Undefined". Am I missing something here?

javascript kendo-ui kendo-grid

Answer 1

Answer №1

In my opinion, the most effective approach is to utilize the dataSource parse() function.

To begin, your column configuration should be updated as follows:

 { field: "AvalableLicenses", title: "Available Licenses" },

You can always make use of your own template.

Furthermore, within your dataSource(), consider adding the following code snippet:

schema: {
    parse: function(response) {
      for (var i = 0; i < response.length; i++) {
       response[i].AvalableLicenses= null;
       response[i].AvalableLicenses = getAvailableLicenses(response[i].Id)
      }
      return response;
    }
  }

UPDATE:

If you prefer sticking with your current method, there may be an issue with your configuration, possibly resulting in the $.get returning undefined or unexpected values. For reference, I have provided a working example.

http://jsfiddle.net/jwocf897/

I hope this information proves useful.

Answer 2

In my opinion, the most effective approach is to utilize the dataSource parse() function.

To begin, your column configuration should be updated as follows:

 { field: "AvalableLicenses", title: "Available Licenses" },

You can always make use of your own template.

Furthermore, within your dataSource(), consider adding the following code snippet:

schema: {
    parse: function(response) {
      for (var i = 0; i < response.length; i++) {
       response[i].AvalableLicenses= null;
       response[i].AvalableLicenses = getAvailableLicenses(response[i].Id)
      }
      return response;
    }
  }

UPDATE:

If you prefer sticking with your current method, there may be an issue with your configuration, possibly resulting in the $.get returning undefined or unexpected values. For reference, I have provided a working example.

http://jsfiddle.net/jwocf897/

I hope this information proves useful.

Save the processed information in a Kendo Grid column

Answer №1

Similar questions

Utilizing Ajax and jQuery to extract information from an XML file based on an identification number

How can I conceal child <div> elements when the parent div is resized?

Uncovering the Depths of React Native Background Services

Execute the component function located within one page using another page

Update the $_Get value without the need to refresh the entire page

jQuery .css Intervals

Generating thick, shadowed lines in three.js to represent layers in a 3D printing visualization

When attempting to click on another button, the action does not seem to be working as expected. The button in question has a

"Modifying the image path using Jquery does not seem to

Enhance and modify data with AngularJS, while also incorporating new information into the

Tips for preventing conflicts between variables and functions in JavaScript (no need for a jQuery plugin)

Angular button will be disabled if the form control is empty

Limiting the display to only a portion of the document in Monaco Editor

Utilize AdWords Scripts/Javascript to display array objects on separate rows within a spreadsheet

Implementing jQuery form validator post anti-SPAM verification?

The JavaScript slideshow fails to display an image during one rotation

What steps should I take to resolve the "undefined property match cannot be read" error that's showing up in this code?

How to eliminate quotation marks from a nested array in JavaScript

Exploring the capabilities of storing and retrieving nested objects within a React database

Struggling to make antd compatible with my create-react-app project