Develop Reference

dgrid 1.2.1 OnDemandGrid not firing request when scrolling

I'm using dgrid 1.2.1 OnDemandGrid, and with it have tried both dstore 1.1.1 and 1.1.2 (Rest, SimpleQuery, Trackable). It seems no matter what I try I am unable to get the virtual scrolling to work.
My store is defined as:
seStore = new declare([Rest, SimpleQuery, Trackable])({
target: appUrl + "api/GET_ITEMS",
idProperty: "SID",
sortParam: "sort",
useRangeHeaders: true
});
Defined with the store is a method for the sorting and filtering:
seStore.getSECollection = function (sortFieldName, desc) {
var sFilter = {};
if (sArea != "") {
sFilter.AREA = sArea;
}
var coll = seStore.filter(sFilter).sort({ property: sortFieldName, descending: desc });
return coll;
}
Grid:
// Create a Grid instance
seGrid = new (declare([OnDemandGrid, Selection, DijitRegistry, Selector, Keyboard, Editor, ColumnHider, ColumnResizer, ColumnReorder]))({
id: "seGrid",
idProperty: "SID",
cellNavigation: true,
columns: seColumns,
collection: seStore.getSECollection("SID", true),
region: 'center',
selectionMode: "multiple",
keepScrollPosition: true,
query: { responseType: "json" },
getBeforePut: false,
farOffRemoval: Infinity, // larger than total height of data; never remove rows
minRowsPerPage: 25, // request more data at a time
maxRowsPerPage: 50,
pagingMethod: 'throttleDelayed',
queryRowsOverlap: 0,
//loadingMessage: "Loading data...",
noDataMessage: "No results found.",
showFooter: true
});
And backend REST service response provides the correct response where rItems is an array of items from my database query and rTotal is the total number of items in the database for this query:
HttpResponseMessage rm = new HttpResponseMessage(HttpStatusCode.OK);
string dgrJsonResults = Newtonsoft.Json.JsonConvert.SerializeObject(rItems, Formatting.None);
rm.Content = new StringContent(dgrJsonResults, System.Text.Encoding.UTF8);
rm.Content.Headers.ContentRange = new ContentRangeHeaderValue((long)start, (long)count, rTotal) { Unit = "items" };
The grid initally loads correctly with the first 25 items requested, but after this initial request once I scroll down to the bottom (item 25), a request to get the next range of data is not fired.
Can someone please help point me in the right direction?

how to run a background service in electron js?

How to implement background service using electron.
i'm having a trouble can anyone tell me how to start a background
service using electron which runs even after closing the app. i have
tried many solutions but all of them stop the service after closing
the app.

You can use tray. here is an example (source):
"use strict";
// [run the app]
// $ npm install electron
// $ ./node_modules/.bin/electron .
const {app, nativeImage, Tray, Menu, BrowserWindow} = require("electron");
let top = {}; // prevent gc to keep windows
app.once("ready", ev => {
top.win = new BrowserWindow({
width: 800, height: 600, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
top.win.loadURL("https://google.com/");
top.win.on("close", ev => {
//console.log(ev);
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
// empty image as transparent icon: it can click
// see: https://electron.atom.io/docs/api/tray/
top.tray = new Tray(nativeImage.createEmpty());
const menu = Menu.buildFromTemplate([
{label: "Actions", submenu: [
{label: "Open Google", click: (item, window, event) => {
//console.log(item, event);
top.win.show();
}},
]},
{type: "separator"},
{role: "quit"}, // "role": system prepared action menu
]);
top.tray.setToolTip("hello electrol");
//top.tray.setTitle("Tray Example"); // macOS only
top.tray.setContextMenu(menu);
// Option: some animated web site to tray icon image
// see: https://electron.atom.io/docs/tutorial/offscreen-rendering/
top.icons = new BrowserWindow({
show: false, webPreferences: {offscreen: true}});
top.icons.loadURL("https://trends.google.com/trends/hottrends/visualize");
top.icons.webContents.on("paint", (event, dirty, image) => {
if (top.tray) top.tray.setImage(image.resize({width: 16, height: 16}));
});
});
app.on("before-quit", ev => {
// BrowserWindow "close" event spawn after quit operation,
// it requires to clean up listeners for "close" event
top.win.removeAllListeners("close");
// release windows
top = null;
});

Yes, it is possible by using electron-process npm library.
ref :- https://www.npmjs.com/package/electron-process
First you will have to register the module which you want to run in background, just create simple background.html,
--background.html--
add below lines in script tag,
const background = require('electron-process').background;
background.registerModule(require('../main/snippets/SnippetsManager'));
In main process just create one browser window in which your background.html will run and keep it as hidden window,
--main.js--
app.once("ready", ev => {
service = new BrowserWindow({
width: 80, height: 60, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
service.loadURL("file://' + __dirname + '/background.html");
service.on("close", ev => {
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
});
Hope it helped,
Regards.

Electron is not designed to run in background. If you are closing
application then it will terminate all processes related with it.
Electron is only used to provide GUI layer. After all it is hybrid application and it doesn't interact with core OS services to live
itself like background service.
Apart from this there are two options:
If you write a service with something else, say a node or .net application, then you probably could use Electron to interact with that service (via bundled Node accessing Windows APIs).
Create feature like system tray. Minimise application to system tray.
Ref Link

Codemirror autocomplete and auto closing brackets doesnt trigger change event

I have the following problem. I've written a server and client scripts for node js that work as live collaboration code editing. 2 or more people can code in the same instance of CodeMirror editor. Until i have enabled autocomplete feature and auto closing brackets it was working perfect, but after i did it messed up the work. When you use autocomplete list or when bracket or tag will be closed by module not by you manually it will not be recognized as change. I have inspected an object that CodeMirror instance is returning and it doesnt contain change that have been done automatically. its not even strictly problem for node js beacuse if you want lets say, send changes to server via ajax and save in a file, it wont happen beacuse its not present in change object. Anyone had similiar problem and can help?
client code:
var appCM = CodeMirror.fromTextArea(document.getElementById('app-cm'), {
mode: 'text/html',
theme: "monokai",
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true,
autoCloseTags: true,
autoCloseBrackets: true,
matchTags: false,
extraKeys: {
"Ctrl-Space": "autocomplete",
"Ctrl-Q": function(appCM) {
appCM.foldCode(appCM.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
readOnly: access
});
appCM.on('change', function(i, op) {
socket.emit('change', op);
});
socket.on('change', function(data) {
appCM.replaceRange(data.text, data.from, data.to);
});
server code:
socket.on('change', function(op) {
if(op.origin === '+input' || op.origin === 'paste' || op.origin === '+delete') {
clients.forEach(function(client) {
if(client !== socket)
client.emit('change', op);
});
};
});

You are explicitly filtering out changes whose origin isn't one of input/paste/delete. Why are you doing that? You'll need to propagate all changes if you want peers to stay in sync.

Duplicate toastr error messages

I am using the Toastr 2.1 JavaScript library to display transient user input validation error messages. I set preventDuplicates option to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession (clicks are faster than 'timeout').
Here are my toastr defaults:
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
target: 'body',
closeHtml: '<button>×</button>',
newestOnTop: true,
preventDuplicates: true,
progressBar: false
};
}
Do i need to make any other changes to prevent duplicate error messages?

this may help
toastr.options = {
"preventDuplicates": true,
"preventOpenDuplicates": true
};
toastr.error("Your Message","Your Title",{timeOut: 5000});

I believe it's working as expected
preventDuplicates: Prevent duplicates of the **last toast**.
Perhaps this is the property you are looking for?
preventOpenDuplicates: Prevent duplicates of open toasts.

I had the same issue and it turned out that toastr preventDuplicates option does not work for array messages (current version 2.1.1). You need to convert the array to string using join.

I have the same requirements as you. Below is my implementation. See if it can help you.
function hasSameErrorToastr(message){
var hasSameErrorToastr = false;
var $toastContainer = $('#toast-container');
if ($toastContainer.length > 0) {
var $errorToastr = $toastContainer.find('.toast-error');
if ($errorToastr.length > 0) {
var currentText = $errorToastr.find('.toast-message').text();
var areEqual = message.toUpperCase() === currentText.toUpperCase();
if (areEqual) {
hasSameErrorToastr = true;
}
}
}
return hasSameErrorToastr;
}
//Usage
var message = 'Error deleting user';
if (hasSameErrorToastr(message)) {
toastr.error(message, title, errorToastrOptions);
}
The code is to check whether there are existing error toastr which has the same message being displayed. I will only fire the toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored futher more but I'll leave it like this so that its more easier to understand for others.

imports: [
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
this is also present in npm for ngx-toastr documentation. you can add it in your app module.ts to see the change.

this may help.
var config = {
maxOpened: 1,
timeOut: 100
}
put it in your toastr config.and it should work.opened toastr is made to 1,and timeout set to 100.

Search preventDuplicates in toastr.min.js and change
preventDuplicates:!1
to
preventDuplicates:1

I was facing the same issue ngx-toastr and resolved by adding the below code in my module file.
ToastrModule.forRoot({
maxOpened: 1,
preventDuplicates: true,
autoDismiss: true
})
Also, if lazy loading is implemented, then you need to add the same lines of code to your parent module file also as I've added in my app.module.ts

Add preventDuplicates:1 to
toastr.options = {
maxOpened: 1,
preventDuplicates:1,
autoDismiss: true
};

I added this in the constructor and it worked for me
this.toastr.toastrConfig.preventDuplicates = true;

TypeError: overHeader is undefined after using reconfigure on grid

I was running into this error when using the grid reconfigure method.
TypeError: overHeader is undefined [Break On This Error]
This is the Error i saw at ext-dev.js (overHeader.isOnLeftEdge(e))
and the warnings are showing up :
Ext.grid.header.Container attempted to reuse an existing id h1
The code snippet is :
initComponent: function () {
var searchGrid=this;
searchGrid.plugins = [ Ext.create('Ext.ux.grid.HeaderFilter'), Ext.create('Irm.grid.GridResetView')];
searchGrid.columns = [{
header: '',
dataIndex: '',
sortable: false,
menuDisabled: true,
hideable: false,
draggable: false,
width: 25,
tdCls : 'grid-cell-wordwrap',
componentCls: 'auto-test-search-result-grid-header-cart-icon',
renderer: function (value, metaData, record) {
var returnValue;
returnValue = 'my return value';
return returnValue;
}
},{
header : '<span data-qtip="'+searchGrid.translate('search.gridHeadAsset')+'">'+
searchGrid. translate('search.gridHeadAsset')+'</span>',
dataIndex : 'assetType',
sortable : true,
hideable: false,
draggable : false,
width : 90,
componentCls : 'auto-test-search-result-grid-header-asset-type',
tdCls : 'grid-cell-wordwrap',
renderer : function (value, metaData, record) {
var assetType = value,
boxContents = '',
returnValue;
returnValue = 'adfasf';
return returnValue;
} // this is how its declare in the view
var myGrid = this.getSearchGrid(); // this is general grid which
var myStore = this.getRetrievalItemsStore(); // this is attached to the store from where it brings the data
myGrid.reconfigure(myStore,filterColumns); // filter colums are the new set of columns i want to set to the grid.
can any one please let me know why this is happening?
I really Appreciate your help..this is happening in ext js 4.07.
EDIT :
Found the problem
This problem happens when the grid declaration is in one file and we are using columns for reconfiguration. if we see we are sending an array of columns, but reconfiguration needs an array of objects , i.e the configuration at the declaration time. Use another variable to send the raw config to the new file or make sure ur declaration of grid is on the same page as the reconfig method.
Please correct me if am wrong.
Glad if this helps anyone.