Unable to display safe html in Angular UI-Grid - javascript

I'm trying to display html in UI-Grid that is sent from the server. An example is my column header containing a tooltip's HTML that was created server side and concatenated to the string (for some reason). I need that to display as HTML but regardless of SCE setting, it still displays the HTML encoded. Here is an example that replicates my issue:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.config(function($sceProvider){
$sceProvider.enabled(false);
});
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.gridOptions = {
columnDefs: [
{
displayName: "First Name",
field: "firstName",
cellFilter: "exampleFilter:this"
},
{
displayName: "First Name",
field: "lastName",
},
{
displayName: "First Name",
field: "company",
},
{
displayName: "First Name",
field: "employed",
}
]
};
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "<span>Comveyer</span>",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
app.filter('exampleFilter', function ($sce) {
console.log($sce.isEnabled());
return function (value) {
return $sce.trustAsHtml("<span>Here</span>");
//return (isNaN(parseFloat(value)) ? '0.0' : Number(value).toFixed(2)) + "%";
}
});
This is my plunker demo

You need to combine a cellTemplate and sce.
{
displayName: "First Name",
field: "company",
cellTemplate: '<div ng-bind-html="COL_FIELD | trusted"></div>'
}
COL_FIELD is replaced by ui-grid to contain the right field binding. The cellTemplate uses ng-bind-html and the following trusted filter to display the unescaped HTML:
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
http://plnkr.co/edit/rOWDQkFrQh24DWmIbhZx?p=preview

If you want to render the html of a filtered field, you can do this:
cellTemplate: '<div class="ui-grid-cell-contents" ng-bind-html="grid.getCellDisplayValue(row ,col)"></div>'
You may need to install ngSanitize plugin to ng-bind-html work.

Related

check boxes are not functioning in react-bootstrap-table-next

I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e
I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result.
My code
For selecting the row
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
classes: 'selection-row',
};
Table rendering
<BootstrapTable
keyField="id"
data={tableData[0].rowsData}
columns={tableData[0].columnsData}
selectRow={selectRow}
/>
I Think issue is coming because of my data, as it is nested one And I am rendering it, but I am not able to resolve it.
My data
let tableData = [
{
rowsData: [
{
fname: "john",
lname: "smith"
},
{
fname: "steve",
lname: "warn"
},
{
fname: "michel",
lname: "clark"
}
],
columnsData: [
{
dataField: "fname",
text: "First name",
sort: true
},
{
dataField: "lname",
text: "last Name",
sort: true
}
]
}
];
Here is my code sandbox link This
You're telling keyField="id" yet each of your rowsData has no id. Give each of them an id and it should work.

Add fields in DevExpress Pivot using AngularJS

I'm looking at this template to build a web application: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = [];
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the server to retrieve data
$scope.getTestData = () => {
$scope.testData.length = 0;
result.forEach(e => {
$scope.testData.push(e);
);
$scope.pivotGridDataSource.reload();
}
$scope.getTestData();
The problem is that when the data are loaded, in the Fields below it shows just the fields written at the beginning (so the name, the count and the country). But I saw in the demo that it should be display ALL parameters of the object.
For example, if the object is so structured:
{ "name": "Test1", "country": "Germany", "creationDate": "xxx", "surname": "yyy" }
So, I expect that in the fields there should be ALL parameters, so name, country, creationDate, surname. So, I did this at the beginning:
I changed $scope.testData = [] into:
$scope.testData = [{ "name": "", "country": "", "creationDate": "", "surname": "" }]
so the component will preparare all fields. And this works. But what if the server gives me back an Object that has another parameters? How can I display them?
I tried so after the calling and before the reload():
let fields = $scope.pivotGridDataSource.fields();
let newField = {
llowExpandAll: false,
allowFiltering: true,
allowSorting: true,
allowSortingBySummary: true,
caption: "This is a new field",
dataField: "newField",
dataType: "string",
displayFolder: "",
index: fields.length
}
$scope.pivotGridDataSource.fields().push(newField);
$scope.pivotGridDataSource.reload();
But it doesn't work yet. Worse, it does not even initialize the Pivot.
The fieldChooser uses the store fields, in this case $scope.testData fields, in your code I see your store is first declared (as null or with some format as you described) and then you have a function to fill it.
I don't know how your code looks and why you create your store that way, but that is basically your problem (the flow).
In the sample code the flow is:
Store with data (static in this case)
PivotGridDataSource
FieldChooser
In your code the flow is:
Store (empty)
PivotGridDataSource
FieldChooser
Store (fill) --> at this point your FieldChooser has been initialized with the fields of the empty version of your store so not much to do (in Jquery you could re-create your object, you dan do it using Jquery within AngularJs see a simple code sample here and below)
$('#chartContainer').dxChart('instance').dispose();
$('#chartContainer').dxPieChart({
...
});
To avoid all of this you can just use the DevExpress.data.CustomStore and your flow will be basically identical to the demo.

how to display data stored in JSON file by entering an value in input field and fetching data corresponding to that value or id using AngularJS

https://plnkr.co/edit/iZqalOkrpSnjIzwvGchO?p=preview
How to get the data corresponding to each serial number entered in search box
What's missing in the code
{
"SerialNumbers": {
"451651": [{
"Owner": "Mr Happy"
}],
"5464565": [{
"Owner": "Mr Red"
}],
"45165": [{
"Owner": "Mr Sad"
}],
"4692": [{
"Owner": "Mr Green"
}],
"541": [{
"Owner": "Mr Blue"
}],
"D4554160N": [{
"Owner": "Mr Loud"
}]
}
}
From the plunker you shared,
There is no controller named MyController
You are referring to MyController instead of MainCtrl
angular.module('myApp', []) - myApp module was created twice. if you want to extend the modue use angular.module('myApp') - which returns the existing module.
In your findValue method, you are not resetting the result array. I modified your findValue code to following,
$scope.findValue = function(enteredValue) {
$scope.results = Object.keys($scope.data.SerialNumbers)
.filter(function(key) {
return key === enteredValue;
}).map(function(key) {
return {
serial: key,
owner: $scope.data.SerialNumbers[key][0].Owner
};
});
};
Working plunker:
https://plnkr.co/edit/N82OhOwKYcW6JEk6sjkI?p=preview

Import JSON data for AngularJS Web App

I have been following the Angular tutorials, and I am trying to get my JSON data to appear, yet I know I am doing something wrong, but can't figure out the proper method.
I know that somewhere in my app.js my scope is messed up.
How can I display the Family Name of each product?
Here is the layout I have:
app.js
var eloApp = angular.module('eloMicrosite', []);
eloApp.controller('homeListController', ['$scope', '$http',
function($scope, $http) {
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
$scope.products = data;
});
}]);
eloApp.controller('HomeController', function(){
this.products = $scope.products;
});
HTML
<div ng-controller="HomeController as home">
{{home.products[o]["Family Name"]}}
</div>
JSON Layout
{
"products": [
{
"Family Name": "3201L",
"Type": "IDS",
"Size (inches)": 32,
"Aspect Ratio": "16:9",
"Part Number": "E415988",
"Product Description": "ET3201L-8UWA-0-MT-GY-G",
"Marketing Description": "3201L 32-inch wide LCD Monitor",
"Advance Unit Replacement": "",
"Elo Elite": "",
"Package Quantity": 1,
"Minimum Order Quantity": 1,
"List Price": 1800
},
.
.
.
],
"families": [
{
category: "Category1"
},
{
category: "Category2"
}
],
"accessories": [
{
category: "Category1"
},
{
category: "Category2"
}
]
}
You should add homeListController on your page instead of HomeController, Also need to use this instead of using $scope as you wanted to follow controllerAs syntax, 2nd controller is useless in this scenario, you could remove that from app.js.
Markup
<div ng-controller="homeListController as home">
{{home.products[0]["Family Name"]}}
</div>
Controller
eloApp.controller('homeListController', ['$http',
function($http) {
var home = this;
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
home.products = data.products; //products should mapped here
});
}]);
Demo Plunkr

How to populate data from one element to another on click with knockout.js

I'd like to populate a popup with the data of the element that was clicked. For example, I have a list of users with their name, position, etc. Then when I click 'view more', a popup shows up with the same user data that was in the list item.
At the moment nothing is get written in the popup.
Please see example here: http://jsfiddle.net/46LJ9/
JS/KO
//should be a json from server
var users = [
{
"name": "Yoshi",
"surname": "Kawasaki",
"position": "Developer"
},
{
"name": "Miu",
"surname": "Furinji",
"position": "Martial Artist"
},
{
"name": "Shigure",
"surname": "Kosaka",
"position": "Martial Artist Master"
},
{
"name": "Ore",
"surname": "Ore Ga",
"position": "Martial Artist and Developer"
}
];
(function($, ko, window) {
var UserModel = {
name: ko.observable(''),
surname: ko.observable(''),
position: ko.observable(''),
users: ko.observableArray(users),
userDetails: ko.observable({}),
showOverlay: function(o) {
UserModel.userDetails(o);
$('.overlay, .overlay-bg').fadeIn(400, function() {
$(this).removeClass('hide').addClass('show');
});
},
closeOverlay: function(o, e) {
$('.overlay, .overlay-bg').fadeOut(400, function() {
var $this = $(this);
$this
.removeClass('show')
.addClass('hide')
.removeAttr('style');
});
}
};
ko.applyBindings(UserModel);
}(jQuery, ko, window));
In your JS, you're updating UserModel.userDetails(o); but your html is binding to name etc.
<h1><span class="name" data-bind="text: name"></span></h1>
Change the binding to data-bind="text: userDetails().name" and it will work.
Either that, or update your name, surname and position observables.
See: http://jsfiddle.net/46LJ9/1/
EDIT
Obviously using a with binding makes more sense than the above:
<div class="overlay hide" data-bind="with: userDetails">
Seen here: http://jsfiddle.net/46LJ9/3/

Categories

Resources