CKEDITOR - create new button in toolbar - ckeditor

I'm trying to create a new button in CKEDITOR toolbar and do something with it but no way...
I haven't any error in my console and nothing appear in the toolbar...
My code :
var textarea = $('#tiny_mce_block').find('textarea');
var textareaId;
$(document).ready(function () {
textareaId = textarea.attr('id'); // Récupère l'ID du textarea pour être transformé par CKEDITOR
ckeditor_init(); // Initialisation de CKEDITOR
});
/*************************
CKEDITOR
************************/
function ckeditor_init() {
CKEDITOR.replace(textareaId, {
removePlugins: 'autosave, elementspath', //, liststyle, tabletools, contextmenu <= à ajouter pour supprimer click droit
language: 'fr',
entities: false,
entities_latin: false,
contentsCss: [
'/css/ckeditor_audio_transcription_v1.css',
'/plugins/bower_components/ckeditor/contents.css'
],
allowedContent: true,
extraAllowedContent: 'show, word',
disallowedContent: 'script, script; *[on*]',
enterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
ignoreEmptyParagraph: true,
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'TextColor'],
['Undo', 'Redo'],
['Find', 'Replace', 'SelectAll'],
['Maximize']
],
on: {
// Register command and button along with other plugins.
pluginsLoaded: function () {
var editor = this;
// Registers a command that applies the style.
// Note: it automatically adds Advanced Content Filter rules.
this.addCommand("alignementCommand", { // create named command
exec: function (edt) {
alert(edt.getData());
}
});
// Add toolbar button for this command.
this.ui.addButton && this.ui.addButton('alignementBoutton', {
label: 'Alignement',
command: 'alignementCommand',
toolbar: 'insert'
});
}
}
});
}
Where is the problem ?
Thank you !

Related

How to remove header in PDF export result from DataTable and change color table fill to white?

I tried removing the header in the exported PDF from the DataTable but it didn't work. Also, how to change the color table to full white and border black?
var table = $('#ReportTable').DataTable( {
lengthChange: false,
buttons: [
{"extend": 'pdf',
"className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0',
customize: function(doc) {
doc.header = false;
doc.pageMargins = [ 150, 20, 150, 20 ];
},
},
{
"extend": 'print',
"className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0'
},
]
} );
table.buttons().container()
.appendTo( '#ReportTable_wrapper .col-md-6:eq(0)' );
You can use title to control the title ("SiPanda") and you can use customize to control the different colors (striped lines) used for alternate rows in the PDF.
I don't want to interfere with your existing use of customize, so here is my test example which you can use as a model:
var table = $('#example').DataTable( {
dom: 'Brftip',
buttons: [
{
extend: 'pdfHtml5',
text: 'To PDF',
title: '',
customize: function ( pdf, btn, tbl ) {
delete pdf.styles.tableBodyOdd.fillColor;
}
}
]
} );
The title: '' is straightforward (assuming your PDF is actually getting its title from the web page's title).
The delete pdf.styles.tableBodyOdd.fillColor; assumes that your DataTable is using the "standard" zebra-stripes" style.
This command works because the DataTable passes the following properties to PDFMake:
tableBodyEven: Object { }
tableBodyOdd: Object { fillColor: "#f3f3f3" }
So, we remove the fillColor: "#f3f3f3" property from the tableBodyOdd object.
If you have used a different DataTables styling, you may see something different from what I see - in which case you can use console.log( pdf ); to take a closer look.
UPDATE
I missed the part about "and border black" - so here is an approach for that, also:
buttons: [
{
extend: 'pdfHtml5',
text: 'To PDF',
title: '',
customize: function ( pdf, btn, tbl ) {
delete pdf.styles.tableBodyOdd.fillColor;
pdfMake.tableLayouts = {
exampleLayout: {
hLineWidth: function (i) {
return 0.2;
},
vLineWidth: function (i) {
return 0.2;
},
hLineColor: function (i) {
return 'black';
},
vLineColor: function (i) {
return 'black';
}
//paddingLeft: function (i) {
// return i === 0 ? 0 : 8;
//},
//paddingRight: function (i, node) {
// return (i === node.table.widths.length - 1) ? 0 : 8;
//}
}
};
pdf.content[0].layout = "exampleLayout";
}
}
]
In the above snippet, I define an object called pdfMake.tableLayouts which contains a custom object called exampleLayout.
My exampleLayout defines thin black lines around every cell in the table.
I then use this custom layout by using:
pdf.content[0].layout = "exampleLayout";
You can choose your own line widths and colors.
The end result:

How to disable the cell if the date is empty or null or undefined?

I'm new to jqgrid and jquery, can someone please help me in disabling the cell when the date is null or empty or undefined?
Actually the json for some (rows,col) date data is there and for some it is not there.
I want to disable the cell in the row for which Date data is not available.
grid cell editing POC
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="/jqGrid/jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/jqGrid/Guriddo_jqGrid_JS_5.0.1/css/ui.jqgrid.css">
<script type="text/ecmascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/jqGrid/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/src/jquery.jqGrid.js"></script>
<script type="text/javascript">
$(function () {
"use strict";
var grid = $("#tree");
var initDateWithButton = function (elem) {
var ids = grid.jqGrid('getDataIDs');
for (var i=0;i<ids.length;i++) {
var id=ids[i];
if (grid.jqGrid('getCell',id,'assignedDate') == null) {
grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
}
if (grid.jqGrid('getCell',id,'assignedDate') == "") {
grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
}
if (grid.jqGrid('getCell',id,'assignedDate') == undefined) {
grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
}
}
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
showWeek: false,
showButtonPanel: true,
buttonImage: 'http://rcban0015:10039/GridPOC/pages/calenderIcon.gif',
onClose: function (dateText, inst) {
inst.input.focus();
}
});
$(elem).next('button.ui-datepicker-trigger').button({
text: false,
position: "relative",
top: "4px"
});
}, 100);
},
dateTemplate = {align: 'center', sorttype: 'date', editable: true,
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
size: 11, // for the advanced searching dialog
attr: {size: 11} // for the searching toolbar
}},
lastSel;
jQuery('#tree').jqGrid({
url: '<%= webAppAccess.getBackchannelActionURL("actionListjqGridPagination",false) %>',
"colModel":[
{
"name":"course_id",
"index":"course_id",
"sorttype":"int",
"key":true,
"hidden":true,
"width":50
},{
"name":"courseName",
"index":"courseName",
"sorttype":"string",
"label":"courseName",
"width":200
},{
"name":"facility",
"index":"facility",
"label":"facility",
"width":200,
"align":"left"
},{
"name":"assignedDate",
"index":"assignedDate",
"label":"assignedDate",
"width":110,
"template": dateTemplate
},{
"name":"dueDate",
"index":"dueDate",
"label":"dueDate",
"width":110,
"template": dateTemplate
},
{
"name":"AssignmentStatus",
"index":"AssignmentStatus",
"label":"AssignmentStatus",
"width":50
},{
"name":"Action",
"index":"Action",
"label":"Action",
"width":50
},
{
"name":"lft",
"hidden":true
},{
"name":"rgt",
"hidden":true
},{
"name":"level",
"hidden":true
},{
"name":"uiicon",
"hidden":true
}
],
"jsonReader": { "repeatitems": false, "root": "employees.rows" },
"toolbar": [true, "top"],
"width":"1200",
"hoverrows":false,
"viewrecords":false,
"gridview":true,
"height":"auto",
"sortname":"lft",
"loadonce":true,
"rowNum": 2,
"rowList":[2,10,15],
"scrollrows":true,
// enable tree grid
"treeGrid":true,
// which column is expandable
"ExpandColumn":"courseName",
// datatype
"treedatatype":"json",
// the model used
"treeGridModel":"nested",
// configuration of the data comming from server
"treeReader":{
"left_field":"lft",
"right_field":"rgt",
"level_field":"level",
"leaf_field":"isLeaf",
"expanded_field":"expanded",
"loaded":"loaded",
// set the ui icon field froom data
"icon_field":"uiicon"
},
"sortorder":"asc",
"datatype":"json",
"pager":"#pager",
"cellEdit": true, // TRUE = turns on celledit for the grid.
"cellsubmit" : 'clientArray',
"editurl": 'clientArray'
});
$('#t_' +"tree")
.append($("<div><label for=\"globalSearchText\">Global search in grid for: </label><input id=\"globalSearchText\" type=\"text\"></input> <button id=\"globalSearch\" type=\"button\">Search</button></div>"));
$("#globalSearchText").keypress(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key === $.ui.keyCode.ENTER) { // 13
$("#globalSearch").click();
}
});
$("#globalSearch").button({
icons: { primary: "ui-icon-search" },
text: false
}).click(function () {
var postData = jQuery('#tree').jqGrid("getGridParam", "postData"),
colModel = jQuery('#tree').jqGrid("getGridParam", "colModel"),
rules = [],
searchText = $("#globalSearchText").val(),
l = colModel.length,
i,
cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
postData.filters = JSON.stringify({
groupOp: "OR",
rules: rules
});
jQuery('#tree').jqGrid("setGridParam", { search: true });
jQuery('#tree').trigger("reloadGrid", [{page: 1, current: true}]);
return false;
});
});
</script>
</head>
<body>
<table id="tree"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
There are exist alternative fork of jqGrid: free jqGrid, which I develop since more as one year. It has the functionality, where one can define editable property of colModel as function, which can return true or false based on the cell or the row content. See the wiki article for more details.
Check if this How to disable editing for soe cells in row editing of JQGrid
helps, it seen it is a similar thing, You just need to add into your logic.

Option of Dropdown is not display in kendo grid popup template

I try to create dropdown into kendo grid edit popup tempate.but i unable to get value of dropdown into popup tempate.how to get it using kendo grid popup?
kendo field detail is describe below
{ field: "PaymentMode", title: "Payment Mode", width: 150, editor: paymentModeDropDownEditor, template: "#:AvailablePaymentMode#", hidden: true },
At Edit Event code is written below
edit: function (e) {
var formTypeData = new kendo.data.DataSource({
data: [
{ Text: "Cheque", Value: "0" },
{ Text: "Cash", Value: "1" },
]
});
function paymentModeDropDownEditor(container, options) {
$('<input required data-text-field="Text" id="paymentMode" data-value-field="Value" data-bind="value:PaymentMode"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: formTypeData,
change: onChange,
});
}
function onChange(e) {
var dataItem = this.dataItem(e.item);
if (dataItem.Text == "Cash") {
$("input[name='ChequeReferenceNo']").hide();
$("label[for='ChequeReferenceNo']").hide();
$("input[name='BankName']").hide();
$("label[for='BankName']").hide();
}
else {
$("input[name='ChequeReferenceNo']").show();
$("label[for='ChequeReferenceNo']").show();
$("input[name='BankName']").show();
$("label[for='BankName']").show();
}
};
Kendo grid popup template script is written below
<script id="InvoiceUpdatePopup_editor" type="text/x-kendo-template">
<input name="paymentMode" data-bind="value:AvailablePaymentMode" data-value-field="value" data-text-field="text" data-role="dropdownlist" />
<script>
I know its not as per your query but have implemented using editable template as below:
Grid --
Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))
Grid Model :-
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.Role).DefaultValue(ViewData["defaultCategory"] as UserRole);
}
PopupEditView-
#(Html.Kendo().DropDownListFor(model => model.Role)
.DataValueField("Id")
.DataTextField("RoleName")
.SelectedIndex(Model.Role.Id)
//.Value(Model.Role.RoleName)
//.Events(e => e.("onDataBound"))
.BindTo(ViewData["Category"] as IEnumerable<UserRole>)
.HtmlAttributes(new { style = "width: 280px;" })
)
Controller--
ViewData["Category"] = list;
ViewData["defaultCategory"] = list.FirstOrDefault();
let me know how it worked for you.

In JQGrid - How to set value in a field in edit dialog programmatically

I am using JQGrid with Spring + Hibernate in my web application. I have created a functionality wherein JQGrid opens an edit dialog for editing a selected row, wherein I have created a custom button. When a user clicks this custom button, a dialog box opens and user selects a row from this dialog. When user clicks 'Ok' control moves back to JQGrid Edit dialog.
I just want the selected value from the dialog for a field to be copied in the field in JQgrid edit dialog. I am able to get the value from the dialog in a global javascript variable, but not able to set it in the JQGrid edit dialog field. Please help me doing this.
Relevent code from my javascript file is pasted below:
function JQDialog(title, contentUrl, params) {
var dialog1 = $("#codesdlg").dialog(
{
autoOpen: false,
modal: true,
title: title,
zIndex: 1000,
close: function (e, ui) { dialog1.remove(); },
buttons: { "Ok": function ()
{
alert("Selected A/c Code: " + selAccode + ' - '+selAcDescr);
$('#TblGrid_list').$('#tr_acccode').val(selAccode);
dialog1.dialog("close"); }
}
});
dialog1.load(contentUrl, function () {
dialog1.dialog('open');
});
// dialog1.load(contentUrl).dialog('open');
};
$("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:true,refresh:false},
{
recreateForm: true, dataheight: 375, width: 400, height: 450, zIndex:75,
beforeShowForm: function(form) {$('#tr_ccode',form).hide();
$('Select<span class="ui-icon ui-icon-search"></span>')
.click(function(rowid, iRow, iCol, cellValue, e) {
JQDialog("Test Dialog","../acctmstmgmt/opendlg",rowid);
// var rowData = jQuery(this).getRowData(rowid);
// rowData.acccode = selAccode;
// $('#list').jqGrid('setRowData', rowid, rowData);
// $("#list").jqGrid("setCell", rowid, "acccode", selAccode);
// alert(selAccode);
// $('#trv_acccode').val(selAccode);
// window.open("../acctmstmgmt/opendlg", 'Dialog', 'width=700,height=300', top=500, left=500 );
}).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.appendTo("#tr_acccode");
}
},
{
recreateForm: true, dataheight: 375, width: 400, height: 450, zIndex:75,
beforeShowForm: function(form) {$('#tr_ccode',form).show();
$('Select<span class="ui-icon ui-icon-search"></span>')
.click(function() {
alert('Clicked');
}).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.appendTo("#tr_acccode");
}
},
{
},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
});
});
$.jgrid.edit = {
addCaption: "Add Codes Master",
editCaption: "Edit Codes Master",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
bYes : "Yes",
bNo : "No",
bExit : "Cancel",
closeAfterAdd:true,
closeAfterEdit:true,
reloadAfterSubmit:true,
modal:true,
msg: {
required: "is mandatory or required",
number: "is a number field. Enter a valid number",
minValue: "should not be less than ",
maxValue: "should not be more than "
},
errorTextFormat: function (response) {
if (response.status !== 200) {
return '<div style="overflow-y: scroll;">'+
"Error encountered while processing. Please check the accuracy of data entered.-" + response.status + " "+response.responseText
+ '</div>';
}
},
I have resolved the issue with following code
simply placed following code in the "Ok" button function
$('#acccode').val(selAccode);
here acccode is colModel field and selAcccode is global javascript variable from where value is placed in the edit form field.

How to implement button insert image tiny mce

I am developing my own image manager, until now I have reached to open the pop-up and list my images, but after this I have no idea how to get the URL of the image to insert in tiny mce
Here's is my source code:
$(document).ready(function() {
$('#txapublication').tinymce({
toolbar: 'styleselect | bold underline italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | media | forecolor backcolor',
plugins: [
'advlist image autolink link lists charmap preview',
'searchreplace wordcount code media',
'save textcolor'
],
menubar: false,
language: 'es',
file_browser_callback: function(field_name, url, type, win) {
win.document.getElementById(field_name).value = 'my browser value';
tinymce.activeEditor.windowManager.open({
title: 'Browse Image',
file: "<? echo PUBLIC_PATH ?>" + 'account/selimgsblog',
width: 450,
height: 305,
resizable: "no",
inline: "yes",
close_previous: "no",
buttons: [{
text: 'Insert',
classes: 'widget btn primary first abs-layout-item',
disabled: true,
onclick: 'close'
}, {
text: 'Close',
onclick: 'close',
window: win,
input: field_name
}]
});
}
});
});
Here is my source to list the images, these images come from a method in a controller
<?foreach($imagenes as $img):?>
<img src="<? echo PUBLIC_PATH.$img->path.$img->name?>" width="80" height="80"/>
<?endforeach;?>
I am using tiny mce 4.0.6
You can try:
In buttons.js
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
});
});
})();
Here need to use buttons as background like this in functions.php:
function my_shortcodes_mce_css() { ?>
<style type="text/css" >
.mce-ico.mce-i-my-mce-icon {
background:url(http://prowpexpert.com/wp-content/uploads/2014/05/favicon-1.ico);
}
</style>
<?php
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );
You can get help from here about wp tiny mce buttons: http://prowpexpert.com/dynamic-tab-html-wp/

Resources