We Keep Coding

How to get information on onItemMouseover?

I want to retrieve item information when I hover the mouse over it. I tried the example of an earlier question but it doesn't work. It shows the title but not the content (Bootstrap popover over $(this) element)
[...]
demoSource.push({
name: RFInum,
desc: deadline,
values: [{
from: start,
to: end,
label: tit,
customClass: balk_kleur,
dataObj: stat
}],
var popoverContent;
$(".gantt").gantt({
source: demoSource,
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 20,
scrollToToday: false,
useCookie: true,
onItemClick: function(data) {
},
onItemMouseover: function(elm, data) {
popoverContent = data.detailContent;
alert(popoverContent);
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: function _getItemText() {
return this.textContent;
},
container: '.gantt',
content: function () {
return popoverContent;
},
trigger: "hover",
placement: "auto right"
});
[...]

Draggable does not work in extjs6.5

I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?

First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});

jqgrid load save state data doesn't load dynamicly

I have jqgrid page with a lot of columns. Idea is to allow user choose columns and their order in table and save this order and column count in cookies. For this purposes I use $.jgrid.saveState() for saving and $.jgrid.loadState() for restoring jqgrid options from cookies. This methods works fine. But I don't want to save data to storage: only column order and filter. I tried option restoreData: false and storeData: false, but it didn't work.
Here the code of my jqgrid:
jQuery(function ($) {
var table = $("#table");
var pager = "#pager";
var search_panel = "#search";
var localization = globalLocale;
var colNames = [ "Mobile direction total time (sec)", "Mobile direction q-ty ", "Mobile time Percent",
"City direction total time (sec)", "City direction q-ty", 'City time Percent' ];
var exportToCsvBut = "Export to excell";
resizeToFitPageSize(table);
resizeOnSidebar(table);
$(function () {
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var defCurDate = moment().startOf('day').format('DD.MM.YYYY HH:mm:ss');
var defNextDate = moment().endOf('day').format('DD.MM.YYYY HH:mm:ss');
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
$("#datetimepickerFrom").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
$("#datetimepickerTo").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
defCurDate = $('#datetimepickerFrom').val();
defNextDate = $('#datetimepickerTo').val();
});
var initDate = function (elem) {
$(elem).datetimepicker({
dateFormat: 'd.m.Y H:i:s',
showButtonPanel: true
});
};
var template = {width: 160, fixed: true, align: 'center', editable: false, stype: 'text'};
var colModel = [
{
name: 'mobileDirectionTotalTime',
index: 'mobileDirectionTotalTime',
sortname: 'mobileDirectionTotalTime',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionQty',
index: 'mobileDirectionQty',
sortname: 'mobileDirectionQty',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionPercent',
index: 'mobileDirectionPercent',
sortname: 'mobileDirectionPercent',
width: 120,
fixed: true, align: 'center', editable: false,
template: "number",
sorttype: 'number'
},
{
name: 'cityDirectionTotalTime',
edittype: "custom",
sortname: 'cityDirectionTotalTime',
formatter: null,
sorttype: 'number'
},
{
name: 'cityDirectionQty',
index: 'cityDirectionQty',
sortname: 'cityDirectionQty',
template: template,
sorttype: 'number'
},
{
name: 'cityDirectionTimePercent',
index: 'cityDirectionTimePercent',
sortname: 'cityDirectionTimePercent',
template: template,
sorttype: 'number'
},
];
table.jqGrid({
url: URL_DATA,
datatype: "json",
jsonReader: {
repeatitems: true
},
height: 'auto',
colNames: colNames,
colModel: colModel,
shrinkToFit: false,
forceFit: true,
pager: pager,
toppager: true,
rowNum: 10,
rowList: [5, 10, 15, 20, 25, 30],
loadonce: true,
viewrecords: true,
storeNavOptions : true,
// navOptions: {reloadGridOptions: {fromServer: true}},
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
gridComplete: function () {
/*var idarray = table.jqGrid('getDataIDs');
if (idarray.length > 0) {
var firstid = table.jqGrid('getDataIDs')[0];
table.setSelection(firstid);
}*/
}
});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
function beforeRefresh() {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
}
//navButtons
table.jqGrid('navGrid', pager,
{ //navbar options
cloneToTop: true,
edit: false,
add: false,
del: false,
search: true,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
beforeRefresh: function () {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
},
refreshicon: 'ace-icon fa fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey'
}, {}, {}, {},
{
multipleSearch: true,
searchOnEnter: true,
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
form.closest('div.ui-jqdialog').center();
}
}
);
addToolButton({
caption: "",
buttonicon: "ace-icon fa fa-calculator blue",
title: "Выбрать столбцы",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 550,
msel_opts: {dividerLocation: 0.5}, modal: true
});
$("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
.prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Поиск:</label>');
}
}, table, pager);
addSearchField('table', 'globalSearchText');
$(window).triggerHandler('resize.jqGrid');
table.triggerHandler("jqGridAfterGridComplete");
destroyGrid(table);
$('#table')
.append($("<div style='margin-top: 10px'>" +
"<button id='savestate'>save state</button>" +"<button id='loadstate'>load state</button>" +
"</div>"));
$("#savestate").click(function(){
$.jgrid.saveState("table");
});
$("#loadstate").click(function(){
$.jgrid.loadState("table", {}, {});
})
});
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
Here the view of table page:
After user press load state and save state it displays data which was before but not actual:
It just show data which was saved in localstorage.
If I add storeData: false it just diplayed table with no data and doens't load new data from server.
Can anyone help?
P.S In case someone will have the same problem:
$("#table").jqGrid().setGridParam({datatype:'json'}).setGridParam({url : URL_DATA}).trigger("reloadGrid"); after $.jgrid.loadState("table", '', { restoreData: false}); will load new data in loaded grid.

I recommend you to use restoreData: false in loadState and after this command to reload the grid with trigger by example
$("#loadstate").click(function(){
$.jgrid.loadState("table", '', { restoreData: false});
$("#table").trigger("reloadGrid");
});
This will reload fresh grid data from server with the current setting

ExtJs Type Error

When I trying to add new row in the grid was the error h is undefined.I've tried understand why and I found that if scroller was in the down of scrollbar all was right,but if it was in other position was the error. I've tried to override ensureVisible because error was in that function but without any result and it's the library function I don't want to override that,error was in the row var cleft = parseInt(cellEl.offsetLeft, 10); ,so how can I resolve this bug?
Ext.override(Ext.grid.GridView, {
ensureVisible : function(row, col, hscroll) {
var resolved = this.resolveCell(row, col, hscroll);
if(!resolved || !resolved.row){
return;
}
var rowEl = resolved.row,
cellEl = resolved.cell,
c = this.scroller.dom,
ctop = 0,
p = rowEl,
stop = this.el.dom;
var p = rowEl, stop = this.el.dom;
while(p && p != stop){
ctop += p.offsetTop;
p = p.offsetParent;
}
ctop -= this.mainHd.dom.offsetHeight;
var cbot = ctop + rowEl.offsetHeight;
var ch = c.clientHeight;
var stop = parseInt(c.scrollTop, 10);
var sbot = stop + ch;
if(ctop < stop){
c.scrollTop = ctop;
}else if(cbot > sbot){
c.scrollTop = cbot-ch;
}
if(hscroll !== false){
var cleft = parseInt(cellEl.offsetLeft, 10);
var cright = cleft + cellEl.offsetWidth;
var sleft = parseInt(c.scrollLeft, 10);
var sright = sleft + c.clientWidth;
if(cleft < sleft){
c.scrollLeft = cleft;
}else if(cright > sright){
c.scrollLeft = cright-c.clientWidth;
}
}
return this.getResolvedXY(resolved);
},
});
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
selModel: new helpsys.AddRowSelectionModel({
singleSelect: true
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{
header: '',
menuDisabled: true,
width: 33,
dataIndex: '',
fixed: true,
renderer: this.renderOrder
},
{
menuDisabled: true,
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
autoCreate: {tag: 'input', type: 'text', maxlength: '10'},
listeners: {
blur: function(item){
var record = item.getValue();
record = Ext.util.Format.htmlEncode(record);
record = this.controllerThis.replaceAll("&apos;","'",record);
item.setValue(record);
}
}
}),
header: 'Library',
id: 'name'
},
{
header: '',
menuDisabled: true,
width: 35,
dataIndex: '',
fixed: true,
renderer: this.renderActions
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
allowEdit: true,
listeners: {
rowclick: {
fn: onRowClick,
scope: this
}
},
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
cls: "library-list-add-button",
text: "<span>Add </span>",
handler : function(){
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
var insertIndex;
var selectedRecord = this.libraryListGrid.getSelectionModel().getSelected();
if (selectedRecord) {
insertIndex = this.libraryListGrid.getStore().indexOf(selectedRecord) + 1;
}
else {
insertIndex = this.libraryListGrid.getStore().getCount();
}
this.libraryListGrid.stopEditing();
this.libraryListGrid.getStore().insert(insertIndex, p);
this.libraryListGrid.selModel.selectRow(insertIndex);
this.libraryListGrid.startEditing(insertIndex, 1);
},
scope: this
}],
view:this.view
});
},

easy ui with null data bug

I am using easyui for my application. I need to show empty grids for some reasons and I send null data to easyui. However it doesn't show empty grid but a sort number and a button at the first column.
Here is my code:
$('#GRID_PT_TARIFF_CONTRACT').datagrid({
singleSelect: true,
remoteSort: false,
fitcolumns: true,
columns: [[
{ field: 'action', title: 'İşlem', width: (_width * 0.08).toString(), sortable: false, formatter: function (value, row, index) {
var button = "";
button = '<input type="button" value="Tarifeyi aç" class="BttnWindow" onclick="DESIGN.OPEN_SEGMENT_FRAME_BY_BUTTON(\'' + row.TariffId+ '\',\'' + row.TariffName + '\',\'' + row.ContractName + '\',\'' + row.Supplier + '\') "/>';
return button;
}
},
{ field: 'TariffName', title: 'Taslak Tarife Tanımı', width: '100%', sortable: true },
{ field: 'TariffStat', title: 'Taslak Tarife Durumu', width: '100%', sortable: true },
{ field: 'Supplier', title: 'Tedarikçi', width: '100%', sortable: true },
{ field: 'ContractName', title: 'Sözleşme Tanımı', width: '100%', sortable: true },
{ field: 'ContractStat', title: 'Sözleşme Durumu', width: '100%', sortable: true },
{ field: 'StartDate', title: 'Başlangıç Tarihi', width: '100%', sortable: true },
{ field: 'EndDate', title: 'Bitiş Tarihi', width: '100%', sortable: true },
{ field: 'NoticePeriod', title: 'İhbar Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Gün';
}
return val;
}
},
{ field: 'ValidityPeriod', title: 'Geçerilik Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Ay';
}
return val;
}
}
]],
onClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
//DEGIGN.ROWCLICKEVENT
}
},
onDblClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
GLOBALS.SelectedTariffName = row.TariffName.toString();
GLOBALS.SelectedContractName = row.ContractName.toString();
GLOBALS.SelectedSupplier = row.Supplier.toString();
DESIGN.CREATE_TARIFF_WIN(row.TariffId);
}
},
onLoadSuccess: function (data) {
var panel = $(this).closest(".datagrid");
var dg = $(this);
panel.find("div.datagrid-view2 > div.datagrid-body tr:first > td[field]").each(function (k, v) {
var bodyCol = $(v);
var field = bodyCol.attr("field");
var headerCol = panel.find("div.datagrid-view2 > div.datagrid-header tr:first > td[field='" + field + "']");
var bodyContent = bodyCol.children(":first");
var headerContent = headerCol.children(":first");
var content = null;
if (bodyCol.width() > headerCol.width()) {
content = bodyCol.children(":first");
} else {
content = headerCol.children(":first");
}
var col = dg.datagrid("getColumnOption", field);
col.width = content.outerWidth();
col.boxWidth = $.boxModel == true ? content.width() : content.outerWidth();
bodyContent.width(col.boxWidth);
headerContent.width(col.boxWidth);
});
dg.datagrid("fitColumns");
dg.datagrid("fixColumnSize");
}
});
And here is the image:

This topic will help you and then I changed extension code with;
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function (target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if ($(target).datagrid('getRows').length <= 1) {
if ($(target).datagrid('getRows')[0].Id == null) {
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position: 'absolute',
left: 0,
top: 25,
height: 25,
width: '100%',
textAlign: 'center',
background: 'snow'
});
}
}
}
});