We Keep Coding

jqGrid inline editing not working after adding new row

I'm currently using free-jqGrid version 4.14.1 (using cdn hyperlink). I would like to let the users add a new row with their input values, and edit the row if they want to make any change by clicking the row. For adding new row, I created an adding button (not using jqGrid pager).
I'm now facing two different issues:
1) I refered this demo for inline editting. According to this demo code, I need to use the line
grid.jqGrid('restoreRow', lastSelection);
However, with this line, everytime I am adding new row, the previous row is deleted and only newly added row is displayed. Please check this fiddle.
2) Due to 1), I commented out that line(I don't think I supposed to do that for proper functioning), and tried to run. The previously added rows remain after adding new row, but all rows displayed is showing in textbox like this(fiddle):
What I would like to have is only after user clicks the row to modify, it changes to the textboxes like the guriddo demo.
I have not found any post related to this issues. Is there anyone please help me??
============================================
Add:
I started with some base table value just for verification. The base data rows were functioning as I wanted (click the row for modification), but the new rows were not. It seems like new rows are not selected and not focused when I click, and not exiting the edit mode after hitting enter key..
============================================
============================================
The below is the code of grid just for reference:
$(document).ready(function () {
Load_Bin();
$('#Bin-QtyBin').focus();
$('#btnEnter-Bin').click(function () {
var valNumBin = $('#Bin-numBin').val();
//if bins are dropbox: select enabled one
var valQtyBin = $('#Bin-QtyBin').val();
var paramRow = {
rowId: "new_row",
initdata: {
numBin: valNumBin,
QtyPutAway: valQtyBin
},
position: "first" //"last"
}
$("#tbBin").jqGrid('addRow', paramRow);
$('#Bin-numBin').val('');
$('#Bin-QtyBin').val('');
});
});
var lastSelection;
function Load_Bin() {
var tbBinArea = $('#tbBin');
tbBinArea.jqGrid({
datatype: "local",
colModel: [
{ label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true },
{ label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }],
rowNum: 10,
rowList: [10, 15, 30, "10000:All"],
prmNames: {
page: 'defaultPageNumber',
rows: 'rowsPerPage'
},
//forceClientSorting: true,
rownumbers: true,
//autowidth: true,
viewrecords: true,
loadonce: true,
multiselect: false,
multiPageSelection: false,
iconSet: "fontAwesome",
pager: true,
height: 250,
onSelectRow: editRow,
searching: {
searchOperators: true,
defaultSearch: 'cn',
closeOnEscape: true,
searchOnEnter: false,
multipleSearch: true
}
});
}
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#tbBin");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true });
lastSelection = id;
}
};
(p.s. thanks to the owner of this fiddle since I was struggling to move the code to fiddle, and sorry for not addressing him/her since I lost the original answer link for that fiddle... )

I ended up just reload the whole grid after adding new row. It works fine, except that newly added line does not turn to edit mode since it doesn't detect whether user clicks it or not since it is already highlighted when it was created..
After creating new row, just added this code:
var reloaddata = $('#tbBin').jqGrid("getGridParam", "data");
$('#tbBin')
.jqGrid('setGridParam',
{
datatype: 'local',
data: reloaddata
})
.trigger("reloadGrid");

echarts Media queries not working with Bootstrap (carousel)

I have a bootstrap carousel with 2 slides. Both the slides uses bootstrap grids of 2x2 to display charts on them. They are working fine , however I am trying to implement responsive media queries and can't seem to make it work. I used baseOptions and media options to define but the charts do not load up and the console doesn't show any error.
I have tried to define the <div> container with inline style width and height i.e. style="width: 100%;height:400px;" and I have also tried to define the width and height in CSS like so-
.mychart {
width: 100%;
height: 400px;
}
The javascript looks like below.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Processed','Unprocessed','In RIB','Errors']
},
color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'],
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false},
magicType : { show: false},
dataZoom : { show : false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Processed',
type:'pie',
radius : ['50%', '70%'],
startAngle : 230,
center: ['35%', '50%'],
itemStyle : labelFormatter, //custom formatter
data: lpnArr //load chart with data array lpnArr
}
]
}
var mediaQuery = [
{
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
}
];
myChart1.setOption({baseOption : option,
media : mediaQuery});
if I use it without the media query it works just fine. like this
myChart1.setOption(option);
Using the media query, as per the documentation along with baseOptions and media, the charts simply don't load and it doesn't show me any error in the console as well, so I am not sure if I am using it correctly or not.
By the way, I also have this in the end of the script to be able to resize the charts when the window is resized but then I realized that this is not truly responsive -
$(window).on('resize', function(){
myChart1.resize();
});
The bootstrap chart elements are <div> elements within other div with a class of BS container-fluid. The carousel code can be found in this JSFiddle.

Media query was introduced in echarts version 3, whereas I have been using version 2 and thus it wasn't working. It's extremely odd that using media with version 2 doesn't show any kind of error, neither does baseOption show any error so I was left scratching my head. Documentation isn't clear enough to say that media queries is only supported in version 3. So after scouring through the code and GitHub threads for hours and trying out all their js versions I came to this conclusion.
The downside of using version 3 echarts is that it is missing the "Tree" chart type and it's a lot more pickier than any prior version. Also, it's twice as much slower than version 2.

Serial Chart in amCharts showing different beahaviour

I am using amCharts for my App. Recently I updated it from version 3.17.0 to 3.20.6.
In my App, I have used export with capture method to capture image as below:
if (window.fabric) {
clearTimeout(interval);
// CAPTURE CHART
chart.export.capture({}, function() {
// SAVE TO JPG
this.toPNG({}, function(base64) {
//some code
});
});
}
}, 10);
In my serial chart with Chart cursor, It was working fine as below in previous version. See image:
After updating version it shows weird behavior: ChartCursor gone, and on dragging cursor it is drawing line on Chart.
I have checked on amChart website, I have correctly set everything.
What can be wrong here?
If I will disable chart.export.capture, it' will working fine.
Here is my code to set properties chart:
"type": "serial",
"theme": "none",
"pathToImages": "resources/javascript/amcharts/images/",
"marginTop": 1,
"marginBottom": 1,
"autoMarginOffset": offsetM,
//left hand side space between container and chart
"zoomOutButtonRollOverAlpha": 0.15,
"zoomControl": {
"zoomControlEnabled": true,
"backgroundAlpha": "0.15",
"backgroundColor": "#000000"
},
"dataProvider": valueChartData,
"columnWidth": 1,
"categoryField": "date",
"categoryAxis": {
"minPeriod": "DD",
"parseDates": true
},
"export": {
"enabled": false,
"menu": []
}
for exporting and cloning chart:
var interval = setInterval(function() {
if (window.fabric) {
clearTimeout(interval);
// CAPTURE CHART
main.pageContainerBulkMarketing.bulkmarketing.pageContainerBMReports.reports.chart["export"].capture({}, function() {
// SAVE TO JPG
this.toPNG({}, function(base64) {
somewhere.OpenedTabGrpClone = "";
somewhere.OpenedTabGrpClone = base64;
});
});
}
}, 10);
Note: I have observed one thing: It is adding one canvas tag over our chart div, it is like:
<canvas class="upper-canvas " style="position: absolute; width: 802px; height: 360px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="802" height="360"></canvas>
UPDATE: Here I have added jsfiddle But, here it is working fine, I took this time to figure out that why it's not working my side; result :none.

Simple do this
1) Check your library links and plugin code , may it interfer with other js or plugin .
2) Also Test your code with live amchart libraries.
3) if every thing fine and working set Z-index by -1 for canvas tag.

Opentip styling doesn't work

I using opentip and I tried to style the opentip with custom styling.
These are my code inside coffee.
Opentip.styles.orangetip = {
stem: true,
borderColor: "#ffa358",
borderWidth: "50",
background: "#ffa358",
fixed: true,
stemLength: "10"
}
And I even use this block to make my styling as default, but it still doesn't work.
Opentip.defaultStyle = "orangetip"
This is my script to call the style.
tip1 = new Opentip("#testong", "Optional content", {
style: "orangetip",
showOn: "mouseover"
})
Style doesn't load, but showOn is working. As example if I change "mouseover" into "click", the container will showing with click, not hover.
Anyone know why the style doesn't load? Thank you.

I already found the answer.
The problem is because I using "" for integer value.
So, it must be :
Opentip.styles.orangetip = {
stem: true,
borderColor: "#ffa358",
borderWidth: 50,
background: "#ffa358",
fixed: true,
stemLength: 10
}

jVectorMap on mobile requires 2 clicks

I've been using jVectorMap quite successfully-- it's a wonderful package for displaying interactive maps!
In this case, I only want some regions to be selectable, and there doesn't seem to be an option to set regions active/inactive. So instead, I set "regionsSelectable=false", and then set "selectedRegions" to the ones I want active.
This works fine (showing the correct hover attributes, etc. for "active" regions only)-- with one exception, in iOS. There, it takes two "clicks" (touches) for the "onRegionClick" handler to get invoked. On the first click, the "selectedHover" attributes are set correctly, but "handleRegion" never gets called. A second click, and "handleRegion" is called.
Initialization code looks like:
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
What is needed is either a way to "activate" only a few regions, or a way around this two-click problem.

I know this is a bit outdated question, but here is a hack around iOS issue for others like me who bumped to this question while searching for some hack around this.
As you already noted, iPad/iPhone are emulating hover with first "tap" .. and click with second "tap".
So to fix this ackward behavior we will do following (example on fiddle)
var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'green',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "white",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "white",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
if (lastCode && lastCode == country) {
e.preventDefault();
return;
}
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
},
onRegionLabelShow: function (e, el, country) {
if (iOS) {
e.preventDefault();
var map = $("#world-map").vectorMap("get", "mapObject");
if (lastCode) {
map.regions[lastCode].element.setSelected(false);
}
map.regions[country].element.setSelected(true);
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
}
},
markers: [{
latLng: [37.7833, -122.4167],
name: 'San Francisco'
}]
});
In short words, we are overwriting onRegionLabelShow functionality with custom behavior (only for the iOS devices). Basically we are preventing the tooltip from showing and instead of that we are selecting the hovered (tapped) ccountry, focusing it and storing it's code in global variable.
On second tap we are detecting if the country has changed by comparing current code with last value and in that case un-selecting previously selected country and selecting new one.
It should be fairly easy to adapt the resolution to your needs.

actually, you should check onRegionTipShow:
...
handleIOSClick = function (e, el, code) {
if (istouch) {
var mapObject = $(map).vectorMap('get', 'mapObject');
map.regions[code].element.setSelected(true);
e.preventDefault();
}
},
CreateMap = function () {
if (typeof $(map) !== 'undefined'){
$(map).width(700);
$(map).height(400);
mapObject = $(map).vectorMap({
map: 'us_lcc_en',
onRegionClick: regionClicked,
onRegionTipShow: handleIOSClick,
backgroundColor: "inherit",
regionStyle: {
initial: {
fill: '#477294'
}
}
});
}
},
...