What is the easiest way to change the header name in Ag Grid for Vue.js?
After reading the API documentation here is what I tried:
const columns = this.columnApi.getColumnState();
const columnForWhichIWantChangeHeaderName = columns.find(column => column.colId === "colId");
But there is no headerName in the columnForWhichIWantChangeHeaderName:
Related
I'm attempting to display Video.js captions on a custom DOM element, outside of the video playing. This works as intended and below are snippets showing this.
Unfortunately, I can't seem to disable captions appearing also on top of the video too. Is there a way to disable captions appearing/showing on top of the video and only in the TextTrackDisplay element?
Any setting in the caption options (addRemoteTextTrack(options)) and textTrackSettings.setValues() seems to affect both on-video and custom captions.
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: subURL,
mode: 'showing',
};
connectTextTracks = (player) => {
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const textTrackDisplay = new TextTrackDisplay(player);
subtitleDiv.appendChild(textTrackDisplay.el());
}
player.ready(function () {
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0 if captions exists
var settings = this.textTrackSettings;
settings.setValues({
backgroundColor: '#000',
backgroundOpacity: '1',
edgeStyle: 'uniform',
});
settings.updateDisplay();
connectTextTracks(player);
});
I ended up just hiding the on-video text track display, before creating a new TextTrackDisplay, like so:
// First hide main text track display (on-video)
const mainTextTrackDisplay = player.getChild('TextTrackDisplay');
mainTextTrackDisplay.setAttribute("hidden", true);
// Add new text track display
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const newTextTrackDisplay = new TextTrackDisplay(player);
const newTextTrackDisplayEl = newTextTrackDisplay.el();
// Append new text track display to subdiv element
const subDiv = document.querySelector("#subdiv");
subDiv.append(newTextTrackDisplayEl);
Full example here:
https://codepen.io/avtconnect/pen/poOvEyj
I need way-points like Pune-Bengaluru-Kerala is there any prop to pass locations arr.
currently I have,
destination : {longitude:77.56,latitude:28.67,name:"MapmyIndia",address:"Okhla,New Delhi"},
source : {longitude:73.7228769,latitude:18.5248904,name:"Pune",address:"Pune,Maharashtra"},
currently my code look like this
const data = await MapplsDirectionWidget.openDirectionWidget({
// destination : {longitude:77.56,latitude:28.67,name:"MapmyIndia",address:"Okhla,New Delhi"},
// source : {longitude:73.7228769,latitude:18.5248904,name:"Pune",address:"Pune,Maharashtra"},
)}
I have a tourist App, and i have made a tab i.e ATM onPress it will display List of ATM's in nearby defined Radius.
I have tried Different modules which available in NPM website, but didn't figured it out the use case for my specific result
The problem i have facing is when reading '''textSearch()''' documentation's is uses
'''google.maps.places.PlacesService(map);''' from where this .object should i import
if any relevant sources welcome
const handleSearch = async () => {
const url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?";
const fulllocation = `location=${location.latitude},${location.longitude}`;
const radius = `&radius=2000`;
const type = `&keyword=ATM`;
const key = "&key=xyz";
const restaurantSearchUrl = url + fulllocation + radius + type + key;
await fetch(restaurantSearchUrl)
.then((response) => response.json())
.then((result) => setPlaceData(result))
.catch((e) => console.log(e));
I have used placeSearch to get result - but it needed to click few times to get the result, on first click it shows empty array then on second click it shows result with "status" : "ZERO_RESULTS" then after few clicks it shows the results.
I have tried to use async/await to get result, but it gives empty array or ZERO_RESULTS. How can i fix that
Every array of object is a result after click
const marker = document.createElement('div');
marker.innerHTML = `<img src="../../assets/FuelPin.png" style="height: 56px; width: 44px" alt=""/>`;
new mapboxgl.Marker(marker)
.setLngLat(lngLatPopup)
.addTo(this.map);
},
In the above code the src from img attribute is not loading the image. I tried using :src to bind as vue component but it is being rendered as string. My relative path to the image exists as well.
In general changing innerHTML with JavaScript is not something frameworks like Vue or React will let you do (see https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations)
Here is the plain JS example from the Mapbox GL website:
const el = document.createElement('div');
const width = marker.properties.iconSize[0];
const height = marker.properties.iconSize[1];
el.className = 'marker';
el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.backgroundSize = '100%';
el.addEventListener('click', () => {
window.alert(marker.properties.message);
});
// Add markers to the map.
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
From https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
One pro tip, if you have lots of images to load (like thousands of markers) you will get better performance if you have MapboxGL render it in WebGL vs using the DOM, for that see: https://docs.mapbox.com/mapbox-gl-js/example/add-image/
I use the Datatables script with YADCF filters. I need to create a new "Copy URL" button that copies the page URL with the applied filters. I added a script that uses the "URLSearchParams" and allows to get the filtered column data. For example, if I type example.com/table?category=DAA URL manually in the browser address bar, it filters the data in the "Category" column and shows the relevant result.
However, I am not sure how to improve this script and:
make the URL be updated dynamically in the address bar when you change filters OR save the updated URL on the server (what approach will be easier);
get this URL with applied filters from the server;
make the "Copy URL" button to copy this URL to the clipboard.
The copied URL should have a similar format: example.com/table?category=DAA&function=Data%20Con&bits=12 (where example.com/table is the link to the page on the site)
I uploaded the whole code here: https://plnkr.co/edit/GuT04wDkcGDzV7y5?preview
The part below allows to use the parameters in filters:
const urlParams = new URLSearchParams(window.location.search);
const whichCategory = urlParams.get('category');
if ( whichCategory !== null ) {
yadcf.exFilterColumn( productTableVar, [[0, whichCategory]]);
}
const whichFunction = urlParams.get('function');
if ( whichFunction !== null ) {
yadcf.exFilterColumn( productTableVar, [[1, whichFunction]]);
}
const whichBit = urlParams.get('bits');
if ( whichBit !== null ) {
yadcf.exFilterColumn( productTableVar, [[3, whichBit]]);
}
An important note: the columns include content in HTML format with special characters (& or /) and spaces.
I will appreciate your help. Thank you.