jQuery UI Widgets Forums Angular cellsrenderer data object looses functions/arrays

This topic contains 2 replies, has 3 voices, and was last updated by  teggs 7 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • apendse


    We are using jqxGrid to render a grid in Angular 2 application.
    We are using cellsrenderer function to render few columns in the grid.

    The data objects passed in to grid have few functions.
    As an example, consider data passed to grid is Array<Student> objects.

    Assume that Student is a typescript class with below structure

    export class Student {
      name: string;
      id: number;
      departments: Array<Department>;
      listDepartments(): string {
        let response = '';
        _.forEach(this.departments, department => {
          response = response + department.name + ', ';
        return response;

    department is another class

    export class Department{
      name: string;
      id: number;

    We are passing Array<Student> as data to grid.
    Below is our columns property

    let columns = [
      {text: 'Student Name', datafield: 'name'},
      {text: 'Departments', cellsrenderer: this.getDepts}
    private getDepts(row, columnfield, value, defaulthtml, columnproperties, data){
      return data.listDepartments();

    When grid renders, it throws error in getDepts() function saying listDepartments is not a function.
    When we debugged this, we noticed that listDepartments is no longer a function as was in original object. Data object that cellsrenderer function receives (getDepts in this case), has listDepartments converted to a string, value of the string being the function source code.

    Also, departments is no longer array of Department objects, rather a string that looks something like [object, object]

    I am guessing that, objects are cloned using JSON.parse/stringify somewhere which is causing this issue.

    Please note that, I have overly simplified the object structure to explain the issue here. Actual structure is much complex, and only way to generate cell data is to call the function on the data object.

    Ivo Zhulev

    Hi apendse,

    Your problem is coming from how you pass the data to the grid. Can you show me your dataAdapter, source, how you populate the data object?

    Best Regards,

    jQWidgets Team


    Good day Apendse, please have you been able to resolve this issue cause am having the exact same issue and error out put.
    Please if you have soled it kindly let us know how you solved it.


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.