I'm using the following code:
http://plnkr.co/edit/CIGW0o?p=preview
in this code the html contains
<nvd3 options="options" data="data"></nvd3>
Im trying to add it from the code:
$scope.buildNewChart = function(){
var xmlString = "<nvd3 options='options' data='data' class='ng-isolate-scope'></nvd3>";
var wrapper= document.createElement('div');
wrapper.innerHTML= xmlString;
var div= wrapper.firstChild;
var elem = document.getElementById("charts");
elem.appendChild(div);
}
but it not works as I can see the element (<nvd3 options="options" data="data"></nvd3>) but its empty
To add some element with Angular, you should use $compile
$scope.buildNewChart = function(){
var chart = angular.element("<nvd3 options='options' data='data' class=''></nvd3>");
var elem = angular.element(document.getElementById("charts"));
elem.append(chart);
$compile(chart)($scope)
}
P.S. Also it goes against Angular practices. Consider to add it into initial HTML, but hide it with ng-if or something
Related
I have in my main spreadsheet a dropdown with data validation of a range from another tab in the same spreadsheet with data imported from another spreadsheet or with IMPORTRANGE function or imported with a script.
In both cases the main spreadsheet is very slow cause I have a lot of tab with data imported with both methods.
There is a way to do the data validation of the dropdown in the main sheet taking the data I need directly from the other spreadsheets without import them previously in the main spreadsheet with the IMPORTRANGE function or with a script?
I have tried to write a draft script but not works:
function externalSheetDataValidation() {
var cell = SpreadsheetApp.getActiveRange();
var dataValidationSheet = SpreadsheetApp.openById("xxxxxxxxxx");
var sheet = dataValidationSheet.getSheets()[0];
var range = sheet.getRange("B2:B5000");
var rule = SpreadsheetApp.newDataValidation()
.requireValueInRange(range, true)
.setAllowInvalid(false)
.build();
cell.setDataValidation(rule);
Logger.log(dataValidationSheet.getName());
}
You want to populate a dropdown based on the values of a range from a different spreadsheet.
You are currently importing those values to a sheet in your spreadsheet in order to use them via requireValueInRange.
You would like to skip the import process.
If that's the case, you can just do the following:
Create a function that returns a simple array with the values from the source range:
function importSheetA() {
return SpreadsheetApp.openById('xxxxx')
.getSheetByName('xxxxx')
.getRange('xxxxx')
.getValues()
.flat(); // This ensures a simple array is returned
}
Populate the dropdowns with requireValueInList instead of requireValueInRange, using the values returned by importSheetA:
function populateDropdown() {
var values = importSheetA();
var rule = SpreadsheetApp.newDataValidation()
.requireValueInList(values, true)
.setAllowInvalid(false)
.build();
var range = SpreadsheetApp.getActiveRange();
range.setDataValidation(rule);
}
Note:
You could update the populated options when the source range is edited if you install an onEdit trigger, and you could also specify what range of cells should be populated with dropdowns without them being necessarily selected, but I'm not sure that's what you want.
Update:
If your data has more than 500 items, value in list criteria is not an option. Your only other option would be to use List from a range instead, but as you said, this would require the source range to be on the same spreadsheet as the dropdown, which you wanted to avoid.
As a workaround, I'd suggest you to programmatically copy the data to a hidden sheet in the target spreadsheet, and use the data in this hidden sheet as your source range when creating the dropdown. For example, this:
function copyRange() {
var cell = SpreadsheetApp.getActiveRange();
var rangeNotation = "B2:B5000"; // Change according to your preferences
var sourceData = SpreadsheetApp.openById(xxxxx)
.getSheetByName(xxxxx)
.getRange(rangeNotation)
.getValues();
var targetSS = SpreadsheetApp.getActiveSpreadsheet();
var hiddenSheetName = "Hidden source data"; // Change according to your preferences
var hiddenSheet = targetSS.getSheetByName(hiddenSheetName);
if (!hiddenSheet) hiddenSheet = targetSS.insertSheet(hiddenSheetName);
var sourceRange = hiddenSheet.getRange(rangeNotation);
sourceRange.setValues(sourceData);
hiddenSheet.hideSheet();
var rule = SpreadsheetApp.newDataValidation()
.requireValueInRange(sourceRange, true)
.setAllowInvalid(false)
.build();
cell.setDataValidation(rule);
}
Reference:
requireValueInList(values, showDropdown)
Cached Dropdown Dialog
GS:
function getSelectOptions(){
const cs=CacheService.getScriptCache();
const v=JSON.parse(cs.get('cached'));
if(v){return v;}
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Options');
var rg=sh.getDataRange();
var vA=rg.getValues();
var options=[];
for(var i=0;i<vA.length;i++)
{
options.push(vA[i][0]);
}
cs.put('cached', JSON.stringify(vA), 300)
return vA;
}
function showMyselectionDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'), 'Selections');
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
google.script.run
.withSuccessHandler(function(vA) {
updateSelect(vA);
})
.getSelectOptions();
function updateSelect(vA,id){//the id allows me to use it for other elements
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
</script>
<body>
<select id='sel1'></select>
</body>
</html>
I am stuck with the following sample html content: It's a little trickier than I thought.
<div id="map-control">
<script type="text/javascript">...</script>
<script type="text/javascript">
var extStreetviewControl = null;
var pano = null;
var point = new google.maps.LatLng('56.18497', '10.21306');
var noFlash = false;
var noStreetView = false;
</script>
I need to extract the coordinate values var point . I figured regex would do the trick. But I don't know how to proceed. How can I achieve that using xpath?
Your html is marlformed (missing the closing <div>), but try something like
substring-after(//script[2], 'var point = ')
I have kendo inline grid where in I need to Add a test case for Adding a new row with valid data and validate the count after adding the row in Jasmine.
You can write the test case for inline grid using below code in Jasmine.
it("Inline grid Add Functionality", function (done) {
var grdRowcount = grd.dataSource._total;
var btnAdd = jq("a:contains('Add Button')", frm.cn);
jq(btnAdd).trigger("click");
var dataItem = grd.dataItem(grd.tbody.find(".k-grid-edit-row"));
dataItem.ID = dataItem.uid;
dataItem.Filed1= "ABC";
dataItem.Field2= "B";
dataItem.Field3= "XYZ";
var grdRowcountAfterAdd = grd.dataSource._total;
expect(grdRowcountAfterAdd).toEqual(grdRowcount + 1);
done();
});
I am using openlayers 3. From the values contained in a vector GeoJSON, I want to fill a dropdown menu. When selecting a value from the dropdown menu, I want to zoom in on the entity.
My problem now is that I want to generate my HTML from the attributes of my GeoJSON. So I tried this simple code but it doesn't work :
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function() {
menu.innerHTML = feature.get('NOM').join(', ');
});
EDIT:
I'm able to populate a dropdown menu from a list:
var list = ['a','b','c'];
var mySelect = $('#mySelect');
$.each(list, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
What i want to do it's to populate this list from the attribute of my vector
So i try this:
// vector2 it's a GeoJSON who is integrate on my map
vector2.getSource().getFeatures().forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
Firstly I'm assuming you have to pass some parameter to your callback:
vector2.getSource().forEachFeature(function(feature) {
Then you can append an item to a dropdown like so:
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
All together:
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function(feature) {
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
});
I have resolve my problem:
vector2.getSource().on('change', function(evt){
var source = evt.target;
var list = [];
source.forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
// console.log("Ecrit moi les noms : " + list);
Thanks you to those who took the time to respond
It appears the ScrollingDataTable scrollTo method is broken.
As an alternative, I've tried scrollIntoView() and jQuery's scrollTop on the correct dom elements without luck. I've also tried YAHOO.util.Scroll and it doesn't work either.
The datatable is in a div that has a vertical scrollbar.
jQuery version:
var scrollToThisRow = dataTable.getTrEl(recordToScrollTo);
var scrollPos = $(scrollToThisRow).position().top;
$('#tableBodyDiv').scrollTop(scrollPos);
Here's what I tried using YAHOO.util.Scroll:
var scrollToThisRow = dataTable.getTrEl(recordToScrollTo);
var scrollPos = $(scrollToThisRow).position().top;
var attributes = {
scroll: { to: [0, scrollPos] }
};
var anim = new YAHOO.util.Scroll($('#tableBodyDiv'), attributes);
anim.animate();