Develop Reference

Summernote custom button pass context and data

I am using summernote in angular I want to create a custom button.
I would like to pass the listHit in customButton as parameter like this 'testBtn': this.customButton(context, listHit) but I am not sure how to do this since the function looks like this 'testBtn': this.customButton any help would be appreciated thank you.
My custom button looks something like this.
customButton(context) {
var listHit = ['One', 'Two', 'Tree'];
const ui = ($ as any).summernote.ui;
var i;
var listHitHtml = "";
for (i = 0; i < listHit.length; i++) {
listHitHtml += "<li>" + listHit[i] + "</li>";
}
var button = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle',
contents: '<i class="fa fa-comments"/><span class="caret"></span>',
tooltip: '#erp_colombia.Lang.Resource.conAvailableComments',
data: {
toggle: 'dropdown'
}
}),
ui.dropdown({
className: 'drop-default summernote-list',
contents: "<div id=\"container-comentario\"><div id=\"dialog\" title=\"Comentarios\" ><h1 class=\"header-comentario\">" + 'Comment' + "</h1><ul id=\"liste-comentarios\"><ul>" + listHitHtml + "</ul></div></div>",
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
context.invoke("editor.insertText", $(this).html() + "\n");
});
});
}
})
]);
return button.render(); // return button as jquery object
}
Here is my pdfmaker config
this.config = {
placeholder: placeholder,
shortcuts: false,
disableDragAndDrop: true,
//tabsize: 2,
hint: {
mentions: this.quoteCommentsForSummerNote,
match: /\b(\w{1,})$/,
search: function (keyword, callback) {
callback($.grep(this.mentions, function (item: any) {
return item.indexOf(keyword) == 0;
}));
},
content: function (item) {
return item;
}
},
height: 200,
toolbar: [
['myotherbutton', ['testBtn']],
],
buttons: {
'testBtn': this.customButton
}
}
And this is my angular html
Here you can fiddle with a example I created a list that we will assume comes from a service I would like to pass this list to customButton
listStringFromDbService = ['one', 'two', 'three'];
https://stackblitz.com/edit/angular-summernote-demo-gdvvbn?file=src%2Fapp%2Fapp.component.ts

I believe I figured this out.
You can change your button declaration to a function that returns a button function. That way you can pass data to it before constructing the function that Evernote binds to testBtn.
Change the function declaration (expression or declaration will work, like you pointed out)
function customButtonGenerator(arr) {
return function (context) {
const ui = $.summernote.ui;
const button = ui.button({
contents: '<i class="note-icon-magic"></i> Hello',
tooltip: 'Custom button',
container: '.note-editor',
className: 'note-btn',
click: function () {
context.invoke('editor.insertText', 'Hello from test btn!!! ' + arr);
},
});
return button.render();
};
};
then when you create the ui config you can generate the button function instead:
buttons: {
testBtn: customButtonGenerator(this.listStringFromDbService),
},
Here's an updated stackblitz showing a working example.

I have modified the answer of MPawlak like this in it there is a dropdown where you can click the items you want to add. Also I have the passing of parameter to the custom button that still works. Thanks to MPawlak
https://stackblitz.com/edit/angular-summernote-demo-yq8t4t

Vue 2 component prop getting wrong value

I am trying to build a menu between categories. If a category has a sub-category it returns a value that says has_subCategory as boolean 0/1.
<template>
<select><slot></slot></select>
</template>
<script>
export default {
props: ['value',
'hasSubCat'],
watch: {
value: function(value, hasSubCat) {
this.relaod(value);
this.fetchSubCategories(value, hasSubCat);
}
},
methods: {
relaod: function(value) {
var select = $(this.$el);
select.val(value || this.value);
select.material_select('destroy');
select.material_select();
},
fetchSubCategories: function(value, hasSubCat) {
var mdl = this;
var catID = value || this.value;
var has_subCat = hasSubCat || this.hasSubCat;
console.log("has_subCat:" + has_subCat);
mdl.$emit("reset-subcats");
if (catID) {
if (has_subCat == 0) {
if ($('.subdropdown').is(":visible") == true) {
$('.subdropdown').fadeOut();
}
} else {
axios.get(URL.API + '/subcategories/' + catID)
.then(function(response) {
response = response.data.subcatData;
response.unshift({
subcat_id: '0',
subcategory_name: 'All Subcategories'
});
mdl.$emit("update-subcats", response);
$('.subdropdown').fadeIn();
})
.catch(function(error) {
if (error.response.data) {
swal({
title: "Something went wrong",
text: "Please try again",
type: "error",
html: false
});
}
});
}
} else {
if ($('.subdropdown').is(":visible") == true) {
$('.subdropdown').fadeOut();
}
}
}
},
mounted: function() {
var vm = this;
var select = $(this.$el);
select
.val(this.value)
.on('change', function() {
vm.$emit('input', this.value);
});
select.material_select();
},
updated: function() {
this.relaod();
},
destroyed: function() {
$(this.$el).material_select('destroy');
}
}
</script>
<material-selectcat v-model="catId" name="category" #reset-subcats="resetSubCats" #update-subcats="updateSubCats" id="selcat">
<option v-for="cat in cats" :value="cat.cat_id" :hasSubCat="cat.has_subCat" v-text="cat.category_name"></option>
</material-selectcat>
The data looks like this:
cat_id:"0"
category_name:"All Subcategories"
has_subCat:0
What I dont understand is that console.log("has_subCat:" + hasSubCat); prints out different values each time I change the select. It should only display 0 or 1

Watcher in vue.js is supposed to be used in order to watch one value, but you can fulfill your requirement with help of computed.
export default {
props: ['value',
'hasSubCat'],
watch: {
/* without this, watcher won't be evaluated */
watcher: function() {}
},
computed: {
watcher: function() {
this.reload(this.value);
this.fetchSubCategories(this.value, this.hasSubCat);
}
},
...
}
I also made a simplified working fiddle, you can have a look.

You are assuming that the second parameter of your watch function is hasSubCat which is not the case. While the first parameter of the value watch function represents the new value of the property, the second parameter is actually the old value of the watched property. Try this out to understand more.
watch: {
value: function(value, oldValue) {
console.log('new value:', value)
console.log('old value:', oldValue)
}
}
So to watch both of value and hasSubCat, you can do something like this:
watch: {
value: function(newValue) {
this.reload(newValue)
this.fetchSubCategories(newValue, this.hasSubCat)
},
hasSubCat: function(newHasSubCat) {
this.reload(this.value)
this.fetchSubCategories(this.value, newHasSubCat)
}
}

jquery autocomplete transformResult auto focus property not working

Now it is looking like this
I am workingin jquery autocomplete below is my code where i want to search city.
jQuery('#citySearch').autocomplete({
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});
Now in above autocomplete i want to set autoFocus as true but it is not working. please help.
It should like 2nd image

I have found the solution with reference to these https://www.devbridge.com/sourcery/components/jquery-autocomplete/
I used autoSelectFirst property and i got the respected result as like 2nd image.
autoSelectFirst: if set to true, first item will be selected when showing suggestions. Default value false.
jQuery('#citySearch').autocomplete({
autoSelectFirst: true,
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});

autofocus will highlight first item, while selectFirst will select first item.
jQuery('#citySearch').autocomplete({
selectFirst: true,
autoFocus: true,
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});

u have to add
$( "#citySearch" ).focus();
https://fiddle.jshell.net/1vfcgcco/1/
or something like this...
$("#auto").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(src, request.term);
response(results.slice(0, 4));
}
});
http://jsfiddle.net/vqwBP/1098/

How to dynamically generate options for RichCombo in CKEDITOR?

There is a form on my page with textarea (CKEDITOR) and select field <select id="_photogalleries" multiple="multiple"></select>. I'd like options in RichCombo to depend on the options that are selected in select with id #_photogalleries. Is there any way to regenerate RichCombo dynamically?
Thanks in advance.
CKEDITOR.plugins.add('style_plugin', {
requires: ['richcombo'],
init: function(editor) {
var pluginName = 'style_plugin';
var config = editor.config,
lang = editor.lang.format;
editor.ui.addRichCombo('photogalleries', {
label: "Фоторепортаж",
title: "Фоторепортаж",
voiceLabel: "Фоторепортаж",
className: 'cke_format',
multiSelect: false,
icon: CKEDITOR.plugins.getPath('style_plugin') + 'photo-list-horizontal.png',
panel: {
css: [config.contentsCss, CKEDITOR.getUrl(editor.skinPath + 'editor.css')],
voiceLabel: lang.panelVoiceLabel
},
init: function () {
this.startGroup("Фоторепортаж");
var list=this;
$("#_photogalleries option:selected").each(function(index, value){
console.log(index, value);
list.add("#HORIZONTAL_GALLERY_"+ $(value).val()+"#", "(Г) " + $(value).text(), "(Г) " + $(value).text());
list.add("#VERTICAL_GALLERY_"+ $(value).val()+"#", "(В) " + $(value).text(), "(В) " + $(value).text());
});
},
onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertHtml(value);
editor.fire('saveSnapshot');
}
});
}
});

This works for me and you dont have to keep a global variable.
CKEDITOR.plugins.add('systemdata', {
init: function (editor) {
var fnData = editor.config.fnData;
if (!fnData || typeof (fnData) != 'function')
throw "You must provide a function to retrieve the list data.";
editor.ui.addRichCombo('systemDataCmb',
{
allowedContent: 'abbr[title]',
label: "System Data",
title: "System Data",
multiSelect: false,
init: function () {
var self = this;
var content = fnData();
$.each(content, function(index, value) {
// value, html, text
self.add(value.name, value.name, value.name)
});
}
}
Then to set the function to get the data put this somewhere where you setup the ckeditor
CKEDITOR.replaceAll(function(element, config) {
config.startupFocus = true;
config.fnData = function() {
var returnData = null;
$.ajax({
url: "/GetData",
async: false,
data: { id: 1 },
}).done(function(result) { returnData= result; });
return returnData;
};
});
It assumes you bring back a json response that has an array of items that have a value property, that can be easily changed though.

I guess I found a solution that worked for me. It was to keep a list object in a global variable and then modify it when onchange event fires in the external select.

I solved this trouble with a single line:
YOURCOMBO.createPanel(editor);
For example:
var comboTeam = editor.ui.get("team");
comboTeam.createPanel(editor);//This is important, if not, doesnt works
Now you can add items to the combo
comboTeam.add("name","name","name");
comboTeam.add("name2","name2","name2");
comboTeam.add("name3","name3","name3");

How to set default values if row is added using inline add button in jqgrid

Code below sets default values for new row if row is added using form.
If row is added using jqGrid inline add button from toolbar, those methods are not called and
default values are not set.
How to force inline add to perform same logic as code below ?
var lastSelectedRow;
$grid.navGrid("#grid_toppager", {
del: true,
add: true,
view: true,
edit: true
},
{},
{
addedrow: 'beforeSelected',
url: '/Grid/Add?_entity=Desktop',
beforeInitData: function () {
// todo: how to call this method from inline add
var rowid = $grid.jqGrid('getGridParam', 'selrow');
if (rowid === null) {
alert( 'Select row before adding');
return false;
}
},
afterShowForm: function(formID) {
// todo: how to set default values as this method sets from inline add
var selRowData,
rowid = $grid.jqGrid('getGridParam', 'selrow');
$('#' + 'Recordtype' + '.FormElement').val('Veerg');
$('#' + 'Nait2' + '.FormElement')[0].checked = true;
selRowData = $grid.jqGrid('getRowData', rowid);
$('#' + 'Baas' + '.FormElement').val(selRowData.Baas);
$('#' + 'Liigid' + '.FormElement').val(selRowData.Liigid);
}
);
$grid.jqGrid('inlineNav', '#grid_toppager', {
addParams: {
position: "beforeSelected",
rowID: '_empty',
useDefValues: true,
addRowParams: {
keys: true,
onEdit : onInlineEdit
}
},
editParams: {
editRowParams: {
onEdit : onInlineEdit
}
},
add: true,
edit: false,
save: true,
cancel: true
});
function onInlineEdit(rowId) {
if (rowId && rowId !== lastSelectedRow) {
cancelEditing($grid);
lastSelectedRow = rowId;
}
}
Update
I tried code
$grid.jqGrid('inlineNav', '#grid_toppager', {
addParams: {
position: "beforeSelected",
rowID: '_empty',
useDefValues: true,
addRowParams: {
keys: true,
extraparam: { _dokdata: FormData },
onSuccess : function (jqXHR) {
alert('addp oncuss');
jqXHRFromOnSuccess=jqXHR;
return true;
},
afterSave: function (rowID) {
alert('afeesave addp ');
cancelEditing($grid);
afterDetailSaveFunc(rowID,jqXHRFromOnSuccess);
jqXHRFromOnSuccess=null;
},
onError: errorfunc,
afterRestore : setFocusToGrid,
oneditfunc : function (rowId) {
var selRowData, selRowId ;
if (rowId && rowId !== lastSelectedRow) {
cancelEditing($grid);
selRowId = $grid.jqGrid('getGridParam', 'selrow');
if (selRowId ) {
selRowData = $grid.jqGrid('getRowData', selRowId );
$('#' + rowId + '_Reanr' ).val(selRowData.Reanr);
}
lastSelectedRow = rowId;
}
}
}
}
);
Only oneditfunc func is called. How to force onSuccess, afterSave, onError etc methods to be called also ?
Update 2
I added patch to jqGrid from github recommended in answer and tried
$.extend( jQuery.jgrid.inlineEdit, {
addParams: {
position: "beforeSelected",
rowID: '<%= EntityBase.NewRowIdPrefix %>',
useDefValues: true,
addRowParams: {
keys: true,
extraparam: { _dokdata: FormData },
onSuccess : function (jqXHR) {
jqXHRFromOnSuccess=jqXHR;
return true;
},
afterSave: function (rowID) {
cancelEditing($grid);
<% if (Model is RowBase ) { %>
afterDetailSaveFunc(rowID,jqXHRFromOnSuccess);
<% } else { %>
afterGridSaveFunc(rowID,jqXHRFromOnSuccess);
<% } %>
jqXHRFromOnSuccess=null;
},
onError: errorfunc,
afterRestore : setFocusToGrid,
oneditfunc : function (rowId) {
if (rowId && rowId !== lastSelectedRow) {
cancelEditing($grid);
lastSelectedRow = rowId;
}
}
}
}
} );
I this case enter does not terminate inline add. All parameters from this code are ignored.

You should use defaultValue property of the editoptions to set default values for the new added row. In the current documentation you can find that the option is valid only in Form Editing module:
The option can be string or function. This option is valid only in
Form Editing module when used with editGridRow method in add mode. If
defined the input element is set with this value if only element is
empty. If used in selects the text should be provided and not the key.
Also when a function is used the function should return value.
but if you examine the code of new addRow method you will see that
the default value of the useDefValues option is true
the method do use (see here) the defaultValue property of the editoptions.
UPDATED: OK! Now I see your problem. You used just wrong properties in editRowParams and addRowParams parts of the settings. Correct will be:
$grid.jqGrid('inlineNav', topPagerSelector, {
addParams: {
position: "beforeSelected",
rowID: '_empty',
useDefValues: true,
addRowParams: {
keys: true,
oneditfunc : onInlineEdit
}
},
editParams: {
keys: true,
oneditfunc: onInlineEdit
},
add: true,
edit: false,
save: true,
cancel: true
});
Moreover you can use new $.jgrid.inlineEdit feature to set keys, oneditfunc or other parameters of inline editing. The implementation of the feature is not full correct, but you can examine the current version from github (see here) and do the same modification in your version of jquery.jqGrid.src.js. In any way I would recommend to use the $.jgrid.inlineEdit feature after publishing the next version of jqGrid. The advantage is that you can easy set options of editRow independent from where the function will be called (from inlineNav, 'actions' formatter or any other way).
New jqGridInlineEditRow event feature (see here for more information) will allow you to implement actions like what you do now inside of onInlineEdit event without the usage of oneditfunc which can be set only one time.