We Keep Coding

React Jodit default value for openInNewTabCheckbox

I am using react jodit as rich text editor in an application. This is how my current config looks like:
const richTextEditorConfig = {
readonly: false,
toolbarAdaptive: false,
toolbarSticky: false,
showCharsCounter: false,
showWordsCounter: false,
height: '200',
showXPathInStatusbar: false,
askBeforePasteHTML: false,
askBeforePasteFromWord: false,
disablePlugins: 'add-new-line',
buttons: 'bold,italic,underline,strikethrough,|,ol,ul,|,link,brush',
};
I want to have default value of "Open in new tab" checkbox under link option of the editor to be set to true. Currently its set to false on open.
Cannot find anything related to this in documentation(https://xdsoft.net/jodit/docs/classes/config.Config.html#link). The only config I could see is conditional render of whether to show or disable this checkbox using such config:
link: { openInNewTabCheckbox: false },
How should I go about this?

How to remove sorting on ui-grid before reload another data set ui-grid

Im using ui-grid to load my data set. Here is my requirment;
step 01: I want to load dataset_01 (scope.gridOptions.data = res_01;).
step 02: I want to sort by First Name (Click by firstname column).
step 03: Click an external button and Reload ui-grid with an another data set (scope.gridOptions.data = res_02;).
Here is my result:
I dont want sort by First Name here for second dataset.
I want data without sorting. How can I do it ?
Expected result:
So I want to reload second data set without sorting (Means I want to remove first sorting before load second data set). how can I reset my ui-grid before load next data set (scope.gridOptions.data = res_01;).
How can I do it ?
Thank you. :)

You can set the sort property of your columnDefs to:
sort: {
direction: undefined,
}
and call for grid refresh using $sope.gridApi.core.refresh() after. This should re-render the whole grid and get rid of the sorting.

Visit this page: http://ui-grid.info/docs/#/api/ui.grid.core.api:PublicApi
After having instantiated your gridApi, you can just call:
$scope.gridApi.core.refresh();
Hope that helps! :)

Create your gridoption like this
example
$scope.gridOptions = {
useExternalPagination: true,
useExternalSorting: false,
enableFiltering: false,
enableSorting: true,
enableRowSelection: false,
enableSelectAll: false,
enableGridMenu: true,
enableFullRowSelection: false,
enableRowSelection: false,
enableRowHeaderSelection: false,
paginationPageSize: 10,
enablePaginationControls: false,
enableRowHashing: false,
paginationCurrentPage:1,
columnDefs: [
{ name: "FristName", displayName: "Frist Name", width: '6%', sort: { direction: undefined } },
]
};
after that you can remove the sorting where you want using below code
$scope.RemoveSorting = function ()
{
$scope.gridOptions.columnDefs.forEach(function (d) {
d.sort.direction = undefined;
})
}

Two DataTable in One Page - Second one initialising weird

I have two dataTable in my page and I have a method like below:
function ToDataTable()
{
$(".dataTable").css("width", "100%");
$(".dataTable").each(function ()
{
var $that = $(this);
/* Start of method */
function ToDataTableInternal()
{
var table = $that.DataTable({
responsive: {
details: { type: "column", target: -1 },
},
columnDefs: [{
className: "control", orderable: !1, targets: -1,
},
{ orderable: !1 }],
"paging": false,
"ordering": false,
"info": false,
"searching": false,
retrieve: true
});
}
/* End of method */
if ($that.is(":visible"))
{
ToDataTableInternal()
}
else
{
// Observe all invisible parents or table to trigger
// ToDataTableInternal method if made visible
var $arr = $(this).parentsUntil(":visible").filter(function ()
{
return $(this).css("display") === "none";
}).add($(this));
var observers = [];
$arr.each(function ()
{
var observer = new MutationObserver(function (mutations)
{
mutations.forEach(function (mutation)
{
if ((mutation.attributeName === 'style' ||
mutation.attributeName === 'class') &&
$that.is(":visible"))
{
ToDataTableInternal();
for (var i = 0; i < observers.length; i++)
{
// Disconnect observers
observers[i].disconnect();
}
}
});
});
observers.push(observer);
observer.observe(this, {
attributes: true
});
});
}
});
}
The reason I have this method is that when table's display is none, it really lags browser(especially IE, where I cannot do anything for minimum of 5 seconds) which is the reason of that I'm changing the table to DataTable after it made visible.
But the problem with calling methods individually is the second DataTable doesn't have the same settings which I passed on.(The first one has) Instead, second one has filters, paging, sort elements in it too.
If I call both at the same time, nothing out of ordinary happens. What may be the problem?
EDIT: I can't reproduce the same behaviour in fiddles.

There seems to be no problems in another environments when I'm trying to do the same thing.
An another library we use is causing problems and there is no problem with DataTable library.

you can add following properties of dataTable in your datatable configuration to remove filtering, pageing and sorting:
Datatable 1.9
"bPaginate":false, //Enable or disable pagination.
"bFilter": false, //Enable or disable filtering of data
"bLengthChange": false, //Enable or disable the size dropdown
"bSort": false, //Enable or disable sorting of columns.
"bInfo": false, //Enable or disable the table information display.
Update
Datatable 1.10
Option name update in datatable 1.10
bPaginate -> paging
bFilter -> searching
bLengthChange -> lengthChange
bSort -> ordering
bInfo -> info

Key event from firefox addon error : Permission denied to access property 'type'

I have a set of key events that i want to run, but am having a little trouble doing them from my extension.
The goal is to fire these events on an input element that triggers an autocompletion list, and it will select the first on the list:
var = document.getElementById(elementID);
// END KEY
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keydown', true, true, window, false, false, false, false, 35, 0);
element.dispatchEvent(e);
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keyup', true, true, window, false, false, false, false, 35, 0);
element.dispatchEvent(e);
// ARROW DOWN KEY
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keydown', true, true, window, false, false, false, false, 40, 0);
element.dispatchEvent(e);
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keyup', true, true, window, false, false, false, false, 40, 0);
element.dispatchEvent(e);
//ENTER KEY
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keydown', true, true, window, false, false, false, false, 13, 0);
element.dispatchEvent(e);
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keyup', true, true, window, false, false, false, false, 13, 0);
element.dispatchEvent(e);
If I run this on firebug, it does exactly what I want.
But when I run it from my extension, I get an error on the console that says
Permission denied to access property 'type'
wich points to a jQuery file of that website.
I don't understand what triggers that error, since it is working with no hassle in Firebug.
one example where this happens is on www.kayak.com with Paris on the "From" field. The elementID is "origin".
Any input on why this might be happening?
EDIT: With additional research on this kind of errors, it seems that this usually is related to same origin policy issues, but I can't figure out how this can happen from my extension. I can find the element, but when runing the key events it keeps giving that error.
EDIT 2 :
I've been testing this on multiple websites to try to figure what is happening, and it always gives some error on the console regarding the jQuery library file. At one of the websites, it wasn't a minified version and was able to see that the error was this block of code:
eventHandle = elemData.handle;
if (!eventHandle) {
elemData.handle = eventHandle = function (e) {
return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.dispatch.apply(eventHandle.elem, arguments) : undefined;
};
eventHandle.elem = elem;
}
Any ideas on how this is getting in the way of the event i'm trying to send from my extension?

Replacing
var e = document.createEvent('KeyboardEvent');
with
var doc = gBrowser.selectedBrowser.contentDocument;
var e = doc.createEvent('KeyboardEvent');
solved it.
Thanks to Dagger # #extdev (irc.mozilla.org)

jqgrid - Set the custom_value of edittype: 'custom'

The custom_value of place_id is set to whichever row I click first. Subsequent clicked rows will all use that same value, regardless of their actual value. Why?
example:
place_id foo_name bar_value
10 blah abc
11 blah2 fgr
click the row with the place_id of 10 and click "edit" and the form that appears will have 10 for the place_id value. Make a change and save it then click the next row down. The form will still have the place_id of 10 though all other values will be correct.
My code:
The column place_id looks like this:
{name:'place_id', index:'place_id', editable: true, edittype:'custom',
editoptions: { custom_element:myelem,custom_value:myval }}
The myval function is:
function myval(elem){
return elem.val();
}
What I need is for the myval to be set to the correct place_id for the row being edited. I looked at the elem object in Firebug and I see that it always has the value of whichever row was first clicked but I don't understand why nor do I see where I can grab the correct value from. Any suggestions are appreciated (I tried asking on the jqgrid forums but nothing came of it so I'm turning to stackoverflow).
*Edit: If I use edittype:'text' rather than edittype:'custom' I get the correct values displayed and passed but then the column is editable and it should only be visible but not editable.
Full code:
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'/foo/bar/results',
datatype: 'json',
mtype: 'POST',
colNames:['Place ID', 'Site ID', 'Site Name', 'API ID', 'M Type'],
colModel :[
{name:'place_id', index:'place_id', key: true, sorttype:'integer',
width:70, editable: true, edittype:'custom',
editoptions: {custom_element:myelem,custom_value:myval }},
{name:'site_id', index:'site_id', sorttype:'integer', width:70,
editable: true, edittype: 'select', editrule: {required: true},
editoptions:{value:getSites(), size:30}},
{name:'site_name', index:'site_name', width:150, editable: false,
editrule: {required: true}, editoptions: {size:30}},
{name:'api_id', index:'api_id', sorttype:'integer', width:75,
editable: true, edittype: 'text', editrules: {required: true},
editoptions:{size:30}},
{name:'m_type', index:'m_type', width:150, editable: true,
edittype: 'select', editrules: {required: true},
editoptions:{value:{'one':'one','two':'two','three':'three',
'four':'four'},size:30}}
],
editurl:'/foo/bar/editinfo',
height: 'auto',
width: 'auto',
pager: '#pager',
viewrecords: true,
loadonce: true,
rowNum:20,
rowList:[20,40,60,80,100],
caption: 'Meter Listing'
});
// Edit functionality
$("#editfields").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) {
jQuery('#list').setGridParam({datatype:'json'});
jQuery("#list").jqGrid('editGridRow',gr,
{editCaption: 'Edit Place Details',height:550,
closeAfterEdit:true,width:600,reloadAfterSubmit:true});
} else {
alert("Please select a row");
}
});
});
function myelem(value,options){
return $('<input type="text" value="'+value+'" disabled="disabled"/>');
}
function myval(elem){
return elem.val();
}
edit2:
getSites:
function getSites(){
<?php
$sites = "0:Select";
foreach ($this->sites as $k => $v){
$sites = $sites . ";" . $v['site_id'] . ":" . $v['site_name'];
}
?>
return "<?= $sites ?>";
}

Could you try to include key: true in the definition of the place_id column. You can remove id from the data which you send from the server.
If it will not help, then you should post a full code example which reproduce your problem and I will try to find a workaround.
UPDATED: Sometime there are a simple solution for complex problems. One additional parameter of editGridRow function solve your problem:
recreateForm: true
Without using of the parameter the function myelem will be called only one time at the first edit of the selected row. Then the form will be cached and not recreated. So you will be edit always the same row. After including of the parameter recreateForm: true the form will be created every time.
By the way I set some general settings which I use in all jqGrids per extending jQuery.jgrid.defaults, jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del and jQuery.jgrid.nav. For example I use always
jQuery.extend(jQuery.jgrid.edit, {
closeAfterAdd: true,
closeAfterEdit: true,
recreateForm: true,
//...
});
Then I don't need set this parameters later. During writing of the answer Add multiple input elements in a custom edit type field about custom editing I has also the settings, so I didn't see any problems.