jQuery UI Widgets Forums Angular How to use cell rendering

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Ivo Zhulev 4 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • How to use cell rendering #92811

    praneeth
    Participant

    I want to show tthe image but its not working
    My code,
    photoRenderer = (row: number, column: any, value: string): string =>
    {
    let name = this.myGrid.getrowdata(row).photo;
    let img = ‘<div style=”background: white;”></div>’;
    return img;
    }
    grid () {
    this.source =
    {
    localdata: this.group,
    datafields:
    [
    { name: ‘name’, type: ‘string’ },
    { name: ‘owner’, type: ‘string’ },
    { name: ‘city’, type: ‘string’ },
    { name: ‘country’, type: ‘string’ },
    { name: ‘formatted_address’, type: ‘string’ }
    ],
    datatype: “array”
    };
    this.dataAdapter = new $.jqx.dataAdapter(this.source);
    this.columns =
    [
    { text: ‘Photo’, width: 50, cellsrenderer: this.photoRenderer },
    { text: ‘Group Name’, filtertype: ‘input’, datafield: ‘name’,cellsrenderer:this.renderer, width: 160 },
    { text: ‘Owner’, filtertype: ‘input’, datafield: ‘owner’, width: 160 },
    { text: ‘City’, filtertype: ‘input’, datafield: ‘city’, width: 170 },
    { text: ‘Country’, filtertype: ‘input’, datafield: ‘country’ },
    { text: ‘Adddress’, filtertype: ‘input’,datafield: ‘formatted_address’ }
    ]
    }

    Here what I am getting is undefined for value in photorenderer.When i debud i did not found this function getrowdata(row) exits.

    • This topic was modified 4 years, 1 month ago by  praneeth.
    How to use cell rendering #92855

    Ivo Zhulev
    Participant

    HI praneeth,

    getrowdata exist and its working fine.
    Value returns undefined because you don’t have datafield in that column => { text: ‘Photo’, width: 50, cellsrenderer: this.photoRenderer }

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    How to use cell rendering #92867

    praneeth
    Participant

    Thanks Ivo,how can I send id to a function when a cell id clicked?Its not working with me.,

    var cellsrenderer = function (row, column, value ) {
    return ‘<select style=”width:80px; height:25px; font-size: 14px” >’ +
    ‘+<option (click)=”open(value)”>’ + ‘Edit’ + ‘</option>’ +
    ‘<option>’ + ‘Delete’ + ‘</option>’ +
    ‘</select>’;

    }

    this.columns =
    [
    {
    text: ‘S.NO’, columntype: ‘textbox’, filtertype: ‘input’, width: 100, cellsalign: ‘center’
    },
    {
    text: ‘Name’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘name’, width: 215
    },

    text: ‘Description’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘desc’, width: 215
    },
    {
    text: ‘Created By’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘created_by’, width: 100, cellsalign: ‘center’
    },
    {
    text: ‘Actions’, filtertype: ‘input’,datafield: ‘id’, cellsrenderer: cellsrenderer, width: 80, filterable: false
    }
    ];

    How to use cell rendering #92955

    Ivo Zhulev
    Participant

    Hi praneeth,

    Do you want to get the ID of a cell when it is clicked?

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    How to use cell rendering #93055

    praneeth
    Participant

    Hi Ivo Zhulev,

    I want to call a function when clicked.
    var cellsrenderer = function (row, column, value ) {
    return ‘<select style=”width:80px; height:25px; font-size: 14px” >’ +
    ‘+<option (click)=”open(value)”>’ + ‘Edit’ + ‘</option>’ +
    ‘<option>’ + ‘Delete’ + ‘</option>’ +
    ‘</select>’;
    }

    I want to call this open() {} unction when clicked.

    How to use cell rendering #93082

    Ivo Zhulev
    Participant

    Hi praneeth,

    The browser reads that code like a simple HTML. not an Angular template. click is an Angular event so it won’t work here. Try attaching a javascript one <select onclick="open(value)">Click me</select>

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    How to use cell rendering #93146

    praneeth
    Participant

    Hi Ivo Zhulev,

    It throws error open is not defined.

    open(value:any) {
    console.log(value);
    }

    <select onclick=”open(value)”>Click me</select> ’ +
    ‘+<option>’ + ‘Edit’ + ‘</option>’ +
    ‘<option>’ + ‘Delete’ + ‘</option>’ +
    ‘</select>

    How to use cell rendering #93207

    Ivo Zhulev
    Participant

    Hi praneeth,

    Set a class to the option:

    '<select class="select">' +
         '<option>Edit</option>' +
         '<option>Delete</option>' +
    '</select>'

    Then in ngAfterViewInit(or some other state where the component is rendered) do this:

    ngAfterViewInit() {
        let select = document.getElementsByClassName('select');
        for (let i = 0; i < select.length; i++) {
           select[i].addEventListener('change', (e) => {
              if ($(e.target).val() === 'Edit') {
                 this.open();
              }
           })
        }
    }

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    • This reply was modified 4 years ago by  Ivo Zhulev.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.