I am very new to leaflet.
Below is my code where a polygon layer and a point layer are loaded from Geoserver through wfs service.
Each layer has a tooltip. When the two layers do not overlap the tooltips work as expected. When a point overlaps a polygon, in its position the tooltip of the polygon is shown. Unfortunately, for my purposes, when the two geometries overlap I want only the circle marker tooltip to be shown, that is exactly the opposite behavior than it is currently doing. It seems to be a kind of issue so impossible to solve for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<title>Example Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css">
</head>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var map = new L.Map('map');
var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
var myRenderer = L.canvas({padding: 0.5});
var dataset = new L.layerGroup().addTo(map);
$.ajax({
url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:point_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson1&SrsName=EPSG:4326&MaxFeatures=200',
dataType: 'jsonp',
jsonpCallback: 'getJson1',
success: function(response) {
WFSLayer1 = L.geoJson(response, {
style: function(feature) {
return {
color: '#696969'
};
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
renderer: myRenderer
});
},
onEachFeature: function(feature, layer) {
var popupText = '';
if (feature.properties.NOMECOMUNE) {
popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
}
if (feature.properties.CIVICO) {
popupText += "<b>CIVICO: </b>" + feature.properties.CIVICO + "<br />";
}
layer.bindTooltip(popupText, {'sticky': true});
}
}).addTo(dataset);
// map.fitBounds(WFSLayer1.getBounds());
}
});
$.ajax({
url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:polygon_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson2&SrsName=EPSG:4326&MaxFeatures=200',
dataType: 'jsonp',
jsonpCallback: 'getJson2',
success: function(response) {
WFSLayer2 = L.geoJson(response, {
style: function(feature) {
return {
stroke: true,
fillOpacity: 0
};
},
onEachFeature: function(feature, layer) {
var popupText = '';
if (feature.properties.NOMECOMUNE) {
popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
}
if (feature.properties.ZONA) {
popupText += "<b>TIPO ZONA: </b>" + feature.properties.ZONA + "<br />";
}
if (feature.properties.DEN_FI) {
popupText += "<b>AREA DI RISPETTO: </b>" + feature.properties.DEN_FI + "<br />";
}
if (feature.properties.TR_VINC) {
popupText += "<b>TRATTO VINCOLATO: </b>" + feature.properties.TR_VINC + "<br />";
}
if (feature.properties.DESCRIZION) {
popupText += "<b>CATEGORIA FORESTALE: </b>" + feature.properties.DESCRIZION + "<br />";
}
if (feature.properties.GIARDINI) {
popupText += "<b>PRESENZA GIARDINI: </b>" + feature.properties.GIARDINI + "<br />";
}
if (feature.properties.STAB_INDUS) {
popupText += "<b>STABILIMENTO A RISCHIO INCIDENTE GRAVE: </b>" + feature.properties.STAB_INDUS + "<br />";
}
if (feature.properties.CHANGETYPE) {
popupText += "<b>VARIAZIONI: </b>" + feature.properties.CHANGETYPE + "<br />";
}
layer.bindTooltip(popupText, {'sticky': true});
}
}).addTo(map);
map.fitBounds(WFSLayer2.getBounds());
}
});
map.on('zoomend', function() {
if (map.getZoom() < 16){
map.removeLayer(dataset);
}
else {
map.addLayer(dataset);
}
});
var BaseMap = {
"Base map": map
};
L.control.layers(BaseMap).addTo(map);
</script>
</html>
What I tried
I tried to create two explicit separate panes for each layer as follow:
map.createPane("polygonsPane");
map.createPane("pointsPane");
map.getPane('pointsPane').style.zIndex = 750;
map.getPane('polygonsPane').style.zIndex = 350;
Then I assigned each layer to its pane inside the style section.
For the polygon layer:
style: function(feature) {
return {
stroke: true,
fillOpacity: 1,
pane: "polygonsPane"
};
},
And for the point layer:
style: function(feature) {
return {
stroke: true,
fillOpacity: 1,
pane: "pointsPane"
};
},
With this, I was able to bring the points to the front and to make the tooltip work. Unfortunately, the tooltip for the polygon doesn't show anymore!
I'm very new to Leaflet. I'm sure I'm missing something obvious but I've been racking my brain trying to see what I'm missing. I would really appreciate it if anyone is able to give me a workaround.
Thank you very much.
Related
I have tinyMCE 6.2 in my project. How to chose file?
And I can't choose an image by click or by check.
The selected file path (tinymceCallBackURL) is empty. Can you help me?
tinyMCE init:
tinymce.init({ selector: '.tinymce', file_picker_callback: myFileBrowser, .......... }
My code js:
var type = meta.filetype;
var cmsURL = "file_manager/?conf=tiny";
if (cmsURL.indexOf("?") < 0) {
cmsURL = cmsURL + "?type=" + type;
} else {
cmsURL = cmsURL + "&type=" + type;
}
var windowManagerCSS = '<style type="text/css">' + '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' + '.tox-dialog__body { padding: 0!important; }' + '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' + '</style> ';
window.tinymceCallBackURL = '';
window.tinymceWindowManager = tinymce.activeEditor.windowManager;
tinymceWindowManager.open({
title: 'Menedżer plików',
url: cmsURL,
body: {
type: 'panel',
items: [{
type: 'htmlpanel',
html: windowManagerCSS + <iframe src="/file_manager/?conf=tiny&type=${type}" style="width:100%; height:500px" id="filemanager"></iframe> }]
},
buttons: [],
onClose: function () {
if (tinymceCallBackURL != '') callback(tinymceCallBackURL, {}); //to set selected file path } }); }````
I have a solution. (unswer in github issue https://github.com/artgris/FileManagerBundle/issues/107):
I needed to add module=tiny in cmsURL :
var cmsURL = "file_manager/?module=tiny&conf=tiny";
and replace:
html: windowManagerCSS + '<iframe src="/file_manager/?conf=tiny&type=${type}" ... thinking
with:
html: windowManagerCSS + '<iframe src="' + cmsURL ...
https://github.com/artgris/FileManagerBundle/blob/master/Resources/doc/tutorials/integrate-tinymce.md
hi I'm trying to use a datepicker bootstrap with a long date backwards selection. now I can only get 45 days back.
$( "#from" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
the code will disable all dates except the date specified in the array, but only a maximum of 45 days back. so the date of the array is not included.
any suggestions for this problem?
Thank you for your help
TRy this... Use '15/08/2018' to '15/8/2018'
$( "#js-date" ).datepicker({
multidate: true,
beforeShowDay: function (date) {
var tgl = ['15/8/2018', '16/8/2018', '17/8/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control" id="js-date">
Just another example, ("0" + (date.getMonth() + 1)).slice(-2) will get month in 2 digit format.
$('#datepicker').val("08-15-2018");/* for demo purpose */
$('#datepicker').datepicker({
multidate: true,
beforeShowDay: function(date) {
var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
var dt_ddmmyyyy = date.getDate() + '/' + ("0" + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
if (tgl.indexOf(dt_ddmmyyyy) != -1) {
return true;
} else {
return false;
}
}
});
td.day.disabled {
opacity: 0.2;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<input id="datepicker">
I'm trying to implement Mapbox on my website.
I would like to add on my home page, an autocomplete field.
I know I can add it to the map, but I would like to know if I can use a separated input field to get the job done ?
I've not found anything on the Mapbox documentation.
Can someone help me with this ?
Thanks.
The mapbox team has done a good job in showing an example of it in Geocoder
And regarding your query: Yes, you can use your own input field. What you have to do is listen for every keyboard input as shown in this. Take that value as the query parameter and then make the API request as done in search.js and then display the suggestions returned by the API.
If you are using React, then you could very well, use the same code and just modify the styles for your input.
For placement of the input box
If you are using leafletjs, then you can add this input as a control
else, if you are using mapbox-gl-js, then you can add it as its specific control. The Control API has only fixed positions such as top-right, top-left, bottom etc. If this is not your intended positioning, then you can just place it as a simple div overlay.
AUTCOMPLETE SUGGESTION INPUT BOX WITH MAPBOX API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Add a geocoder</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript"></script>
<script src="https://unpkg.com/#mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font: 16px Arial;
}
/*the container must be positioned relative:*/
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Autocomplete</h2>
<p>Start typing:</p>
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
<script>
var geocodingClient = mapboxSdk({accessToken: 'ADD_ACCESS_TOKEN_HERE'});
function autocompleteSuggestionMapBoxAPI(inputParams, callback) {
geocodingClient.geocoding.forwardGeocode({
query: inputParams,
countries: ['In'],
autocomplete: true,
limit: 5,
})
.send()
.then(response => {
const match = response.body;
callback(match);
});
}
function autocompleteInputBox(inp) {
var currentFocus;
inp.addEventListener("input", function (e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) {
return false;
}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
// suggestion list MapBox api called with callback
autocompleteSuggestionMapBoxAPI($('#myInput').val(), function (results) {
results.features.forEach(function (key) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + key.place_name.substr(0, val.length) + "</strong>";
b.innerHTML += key.place_name.substr(val.length);
b.innerHTML += "<input type='hidden' data-lat='" + key.geometry.coordinates[1] + "' data-lng='" + key.geometry.coordinates[0] + "' value='" + key.place_name + "'>";
b.addEventListener("click", function (e) {
let lat = $(this).find('input').attr('data-lat');
let long = $(this).find('input').attr('data-lng');
inp.value = $(this).find('input').val();
$(inp).attr('data-lat', lat);
$(inp).attr('data-lng', long);
closeAllLists();
});
a.appendChild(b);
});
})
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function (e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
autocompleteInputBox(document.getElementById("myInput"));
</script>
</body>
</html>
I've created something similar to this- separated from Mapbox. My use case involved taking a .csv file from a client and converting it to json format, then I bind map markers using leaflet.js. I'm then using the json file and an autocomplete plugin to query the json dataset to output info about the city, state on the map. Here's the code and codepen to follow:
var parseData = function () {
return {
mapMarkersInit: function () {
// Define an icon called cssIcon
var cssIcon = L.divIcon({
// Specify a class name we can refer to in CSS.
className: 'css-icon',
// Set marker width and height
iconAnchor: [5, 5],
iconSize: [10, 10]
});
//console.log(placesData);
placesData.forEach(function (place) {
L.marker([place.Latitude, place.Longitude], {icon: cssIcon}).addTo(mymap)
.bindPopup('<div class="active-place" data-active="' + place.City + '">City: ' + place.State + '<br>' +
'Population: ' + place.Population.toLocaleString() + '<br>' +
'# of Plans: ' + place.Sum + '<br>' +
'401(k) Plans per person: ' + Math.round(place.PerCapita) + '</div>');
});
},
selectCitiesInit: function () {
//map through data and return options
var cityData = placesData.map(function (place) {
return '<option name="selectCountry" data-active="' + place.City + '" value="' +
place.State + '">' + place.State + '</option>';
});
//take array of city data and string-ify it
var options = cityData.join('');
//console.log(options);
//print select options to page
jQuery('#input-city').append(options);
},
selectChange: function () {
//get user input city
var city = jQuery(this).val();
//Prefered method to use with data objects. Finds the match and exits the dataset.
var place = placesData.find(function (item) {
return (item.State == city);
});
//Best practice- deal with error first, returns out of function if error
if (!place) {
jQuery('#place-data').html('error! city not found');
return;
}
//now create html from data
var cityData = '<div class="active-place" data-active="' + place.City + '">' +
'<h2> ' + place.State + '</h2> | ' +
'<h4>Population: ' + place.Population.toLocaleString() + '</h4> | ' +
'<h4># of Plans: ' + place.Sum + '</h4> | ' +
'<h4>401(k) Plans per person: ' + Math.round(place.PerCapita) + '</h4></div>';
//print city data
jQuery('#place-data').html(cityData);
}
}
};
View example on codepen
I am working on a webapp where I need to show comments along with the photo using fancybox. The comments are custom and not from facebook. I am using beta 3 version of fancybox which includes all the features of fancybox 2.3, I hope.
below is the code, I have tried:
$("[rel='fancybox-thumb']").fancybox({
helpers : {
thumbs : true,
},
caption : {
type : 'inside',
position: 'right'
},
fitToView : false,
autoSize : false,
width : 600,
height : 'auto',
mouseWheel: false,
afterLoad: function () {
if(in_array(media, this.href,false)){
var orientation = $(this.element).data('orientation');
var width = 640;
var height = 480;
if(orientation == 3){
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "180", "zoom": "1.0" } } }';
}
else if(orientation == 1){
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "90", "zoom": "1.0" } } }';
}
else{
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "360", "zoom": "1.0" } } }';
}
this.content ='<video id="parse-video" class="video-js vjs-default-skin vid" width="'+width+'" height="'+height+'" data-setup="'+datasetup+'" preload="auto" poster="ajax-loader.gif" autoplay ><source src="'+this.href+'" type='+type+' />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="'+width+'" height="'+height+'" type="application/x-shockwave-flash"' +
'data="/players/flowplayer/flowplayer.swf">' +
'<param name="movie" value="/players/flowplayer/flowplayer.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": '+ this.href + ',"autoPlay":true,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video><div>lorem ipsum lorem ipsum</div>' ;
}
else{
//$(".fancybox-inner").css('display','inline-block').wrap('<div style="display: inline-block" id="wrapper"></div>');
//$('#wrapper').prepend('<div style="display:inline-block" id="content-div">Some content here</div>');
$(".fancybox-wrap").css('width',$(".fancybox-wrap").width()+200);
}
},
beforeShow: function(){
console.log($(".fancybox-wrap").width());
$(".fancybox-wrap").css('visibility','hidden');
$(".fancybox-wrap").css('width',$(".fancybox-wrap").width()+200);
$(".fancybox-wrap").append('<div style="width:190px;display:inline-block">this is the comment</div>');
$(".fancybox-inner").css('display','inline-block');
},
afterShow: function(){
if(in_array(media, this.href,false)){
var my_video_id = videojs('parse-video-'+i);
var orientation = $(this.element).data('orientation');
if(orientation == 3){
my_video_id.zoomrotate({
rotate: 180,
zoom: 1.0
});
}else if(orientation == 1){
my_video_id.zoomrotate({
rotate: 90,
zoom: 1.0
});
}else{
my_video_id.zoomrotate({
rotate: 360,
zoom: 1.0
});
}
}else{
}
}
//'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
//'onClosed': function () { $("#fancybox-inner").empty(); },
});
Also, I am playing videos in fancybox. I am able to show text along with images this way but window resize disturbs the css. many thanks in advance.
I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That's why I am searching on how to change the editoptions:value of an edittype:"select".
Here's the sample jqGrid code:
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
Scenario:
All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.
How can I change the options?
I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
// get the selected stock column value before the editRow
var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
if( stockValue == 'Yes') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
} else if( stockValue == 'No') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
}
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}