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

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

Answer 1

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>