Bind to field name containing a backslash in angular ui-grid

Question

I have a data model that looks like this:

 myData = [{
  "ListName": "list1",
  "domain\\UserA": true,
  "UserB": true,
  "userC": true
}, {
  "ListName": "list2",
  "domain\\UserA": true,
  "UserB": true,
  "userC": true
}];

and I am trying to bind in to a ui-grid like this:

 $scope.gridOpts = {
  data: myData,
  columnDefs: [{
      field: "ListName",
      displayName: 'listName'
    },
    {
      field: "domain\\UserA",
      displayName: 'UserA',
        cellTemplate: "<div class='ui-grid-cell-contents'><input type='checkbox' ng-checked='{{COL_FIELD CUSTOM_FILTERS}}' /></div>",

    },
    {
      field: "UserB",
      displayName: 'UserB',
        cellTemplate: "<div class='ui-grid-cell-contents'><input type='checkbox' ng-checked='{{COL_FIELD CUSTOM_FILTERS}}' /></div>",

    }

The user without the backslash works just fine, but I cannot bind the user with the embedded baskslash. How do I resolve this?

Plunkr is here : http://plnkr.co/edit/y61beZ4F8aKpHj83J9jx?p=preview

Any luck with my answer, did you check my demo as well. Please let me know, if not helpful il delete it. — PSL
– PSL, Commented Jan 23, 2015 at 2:42

PSL · Accepted Answer · 2014-12-26 22:08:59Z

It is because (two slashes) "\" in the field gets resolved to (one slash) "\" while ui grid internally creates map based on the field name in the column definition provided. So if you are getting 2 slashes in the data's field name (i.e in the bound object's key) then update your column Def to have double slashes to match each slash in the key name. This will enable the internal field mapping with the key name in the data in sync

In your case change def to:-

columnDefs: [{
      field: "ListName",
      displayName: 'listName'
    },{ 
      field: "domain\\\\UserA", //<-- 4 slashes here to match 2 slash in the bound data's key
      displayName: 'UserA',
      cellTemplate: "<div class='ui-grid-cell-contents'><input type='checkbox' ng-checked='{{COL_FIELD CUSTOM_FILTERS}}' /></div>",
    },

angular.module('app', ['ui.grid']).controller('ctrl', function($scope) {

  var myData = [{
    "ListName": "list1",
    "domain\\UserA": true,
    "UserB": true,
    "userC": true
  }, {
    "ListName": "list2",
    "domain\\UserA": true,
    "UserB": true,
    "userC": true
  }];;

  $scope.gridOpts = {
    data: myData,
    columnDefs: [{
      field: "ListName",
      displayName: 'listName'
    }, {
      field: "domain\\\\UserA",
      displayName: 'UserA',
      cellTemplate: "<div class='ui-grid-cell-contents'><input type='checkbox' ng-checked='{{COL_FIELD CUSTOM_FILTERS}}' /></div>",

    }, {
      field: "UserB",
      displayName: 'UserB',
      cellTemplate: "<div class='ui-grid-cell-contents'><input type='checkbox' ng-checked='{{COL_FIELD CUSTOM_FILTERS}}' /></div>",

    }]
  };
});

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ui-grid="gridOpts"></div>
</div>

Collectives™ on Stack Overflow

Bind to field name containing a backslash in angular ui-grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related