[3.0] Allow grid to handle custom interpolation symbols

[mirzadelic]

Hi,
i have this controller:

    $scope.allOrders = [];
    OrdersFactory.query().$promise.then(function(data) {
     $scope.allOrders = data;
    });
    $scope.gridOptions = {
        data: 'allOrders',
        columnDefs: [
            { name:'document_no', field: 'document_no' },
            { name:'waiter_name', field: 'waiter_name' }
        ]
    };

factory will get this data:

[
    {
        "id": 21, 
        "document_no": "RAC_21", 
        "waiter_name": "Name 2"
    }, 
    {
        "id": 20, 
        "document_no": "RAC_20", 
        "waiter_name": "Name"
    },
    ...
]

And this is result:

Why doesn't it show my data and heading for table?

[mirzadelic]

Problem is with interpolate:

    config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

how can i fix this in ng-grid?

[c0bra]

I would try fetching every grid template from templateCache and use a regex to swap out the interpolation symbols, then save them back to the cache.

[mirzadelic]

Does this work?

grunt build --startSymbol=[[ --endSymbol=]]

[c0bra]

No there's no symbol options

[c0bra]

I'm changing this to a feature request. It looks like the grunt-angular-templates config can be changed to take a custom bootstrap option. In it we could push each template onto a .value() in the ui.grid module, and then in .config() or .run() replace all the interpolation symbols in the cached templates for the templates listed in the .value().

There are some static in-code uses of {{ and }} that will need to be handled, either by replacing template:with templateUrl:, or by using the $interpolate service to get the right symbols.

[mirzadelic]

Ok, thanks..
Really need this, becouse i use django as server-side..

[dsbaars]

+1 for this (Using PHP Twig server-side here)

I think the only clean solution is implementing using the $interpolate server. I'm gonna try regex-swapping the cache as temporary workaround.

[xavadu]

+1 to this feature !

[jaznow]

+1 to this feature, I'm not able to use ng-grid without it. (Symony + Twig)

[xavadu]

Meanwhile, I modify a code that i was using with ng-grid 2.0 to do it compatible with ui-grid 3.0

/*
 * Angular ng-grid interpolate template fix
 * for working with non-default string interpolation symbols
 *
 */
(function (ng) {
    'use strict';

    // Used for ng-grid to update interpolation symbols
    ng.module("ui.grid").service(
        "$InterpolateUpdateService",
        ['$templateCache', '$interpolate', function($templateCache, $interpolate){
        this.changeGridInterpolate = function() {

            var templates = [
                'ui-grid/ui-grid-footer',
                'ui-grid/ui-grid-group-panel',
                'ui-grid/ui-grid-header',
                'ui-grid/ui-grid-menu-button',
                'ui-grid/ui-grid-no-header',
                'ui-grid/ui-grid-row',
                'ui-grid/ui-grid',
                'ui-grid/uiGridCell',
                'ui-grid/uiGridColumnFilter',
                'ui-grid/uiGridColumnMenu',
                'ui-grid/uiGridFooterCell',
                'ui-grid/uiGridHeaderCell',
                'ui-grid/uiGridMenu',
                'ui-grid/uiGridMenuItem',
                'ui-grid/uiGridRenderContainer',
                'ui-grid/uiGridViewport'
            ];

            var start = $interpolate.startSymbol();
            var end = $interpolate.endSymbol();
            for (var i = 0; i < templates.length; i++){
                var template = templates[i];
                var curTemplate = $templateCache.get(template);
                if (start !== "}}"){
                    curTemplate = curTemplate.replace(/\{\{/g, start);
                }
                if (end !== "}}"){
                    curTemplate = curTemplate.replace(/\}\}/g, end);
                }
                $templateCache.put(template, curTemplate);
            }
        };
    }]);

    ng.module("ui.grid").run(["$InterpolateUpdateService", function($InterpolateUpdateService){
        $InterpolateUpdateService.changeGridInterpolate();
    }]);

})(angular);

For further information, follow the link: http://brainoverflow.net/ui-grid-ng-grid-3-0-with-angularjs-interpolations-symbols-problem/

Cheers

[c0bra]

Added! Tutorial 313 will demonstrate this.

[jaznow]

AWESOME! :)

[xavadu]

UI Grid will automatically detect the change and transform any default symbols in the templates

superb!

[c0bra]

http://ui-grid.info/docs/#/tutorial/313_custom_interpolation_symbols