formatItem With AngularJS Directives

Posted by: metrik on 26 June 2018, 6:10 am EST

  • Posted 26 June 2018, 6:10 am EST

    Hello,

     I would like to ask whether it's possible to insert AngularJS 1 expressions into cells (and get them compiled) using the ```
    

    formatItem

    Please note that we cannot use native FlexGrid directives for AngularJS because of this issue: https://www.grapecity.com/en/forums/wijmo/angularjs--webpack-setup
    I have tried to do templatess compiling and linking inside of formatItem function but this dramatically slows down application performance because the function is called for each cell every time user scrolls through the table.
    
    In this example: http://jsfiddle.net/KirillMetrik/dd14cqcx/14/ I have modified the wijmo sample for custom templates in AngularJS by providing over 1000 items to the table and scrolling is still perfect. How can I achieve the same result by using the formatItem function?
  • Posted 27 June 2018, 9:07 am EST

    Hi,

    We are sorry indeed but you cannot use angular expressions inside formatItem without using $compile API, angular does not allow that.

    Can you please let us know what type of angular expression you are using in the formatItem event?

    ~Manish

  • Posted 27 June 2018, 10:00 am EST

    Hi Manish,

      in formatItem I do the following (given I'm having a prepared angular template):
    
    
    const el = $compile(_myTemplate)($scope);
    
    

    There are two problems with this:

    1. compiling and linking inside of formatItem slows down everything because it’s a very expensive operation which is called very often. But let’s not focus on this problem for now - I can resolve it by precompiling all needed things in advance. Second problem is worse.
    2. In formatItem we can only add innerHtml to the cell (a string), so the following doesn’t work (ignored by FlexGrid):
    cell.appendChild(el[0])
    

    This code will work:

    cell.innerHtml = el.html(); // getting HTML string here
    

    But angular works only with elements, not strings, so passing it like a string to cell will basically do nothing (cells will only contain non-compiled Angular markup).

    I have found an example using CellFactory, is it the way to go in this case?

  • Posted 28 June 2018, 7:12 am EST

    Hi,

    We are sorry, we are unable to replicate the issue at our end.

    Here is the sample we tested:-http://jsfiddle.net/z01oaec7/

    In the sample above we were able to use appendChild() inside itemFormatter/formatItem without any issues.

    Please have a look at that and let us know if we are missing something important to replicate the issue.

    P.S. If you are using formatItem just for displaying templates then please use instead.

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels