Develop Reference

How to add block plugins to grapesjs?

This is my code and I have installed the node module too but it's not working.
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
block: {
category: 'basic',
}
}
},

I think you have an extra key block inside plugin options, it should be category.
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
category: "Basic"
}
});

customize plugin doesn't add in single quote
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload:0,
container: '#gjs',
plugins: ['gjs-preset-webpage',myPlugin,'myNewComponentTypes' ],
pluginsOpts: {
'grapesjs-plugin-export': { /*option*/ },
'myPlugin':{ category: "myPlugin"},
},
Make plugin in function Reference
//PLUGIN
function myPlugin(editor) {
editor.BlockManager.add('my-block',{
label:'Plug',
category: 'Basic',
content:'<div class="my-block"><p>Plugin Success</p></div>',
});
}

Try this:
const editor = grapesjs.init({
container: "#editor",
fromElement: true,
width: "auto",
storeManager: false,
plugins: [gjsBlockBasic],
pluginsOpts: {
gjsBlockBasic: {},
},
blockManager: {
appendTo: "#blocks",
},
})
Add "blocks" to a div where you want to display block basic options.
<div id="blocks"/>

How to change the format of a date field in a jsgrid table

Good afternoon, I have this data in a jsgrid table, the fact is that when the database returns the date when displaying it on the page it looks like this: / Date (1614232800000) / what I need is to convert it to DD format / MM / YYYY
Reading the official documentation, there is by default a type of date field as such, but it is possible to modify parameters at will, that being the case, how can I convert the date?
I read all from this, any idea, thank you.
http://js-grid.com/docs/#custom-field
First of all, Thanks.
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
css: "date-field", // redefine general property 'css'
align: "center", // redefine general property 'align'
myCustomProperty: "itemTemplate", // custom property
itemTemplate: function (value) {
return new Date(value).toDateString();
}
});
jsGrid.fields.date = MyDateField;
$('#dgrecordsfound').jsGrid({
width: "100%",
height: "350px",
filtering: false,
inserting: false,
editing: false,
sorting: true,
paging: true,
autoload:true,
pageButtonCount: 5,
noDataContent:"No records!",
loadIndication: true,
loadMessage: "Loading, Please wait",
pagercontainer:null,
pageIndex: 1,
pageSize: 6,
pageButtonCount: 15,
pagerFormat: "Pages: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
pagePrevText: "Prev",
pageNextText: "Next",
pageFirstText: "First",
pageLastText: "Last",
pageNavigatorNextText: "...",
pageNavigatorPrevText: "...",
controller: {
loadData: function () {
return $.ajax({
type: "GET",
datatype: "json",
data: { parname: "#ViewBag.name" , parlastname: "#ViewBag.lastname"},
url: "/asoc/getbyname"
});
},
},
fields: [
{
name: "cod",
title: "Code",
type: "text",
width: 30
},
{
name:"firstname",
title: "firstname",
type: "text",
width: 100
},
{
name: "date",
title: "Date",
type: "date",
myCustomProperty: "itemTemplate",
width: 30
}
],
rowClick: function (itemselected) {
var getdata = itemselected.item;
var fields = Object.keys(getdata);
var textarray = [];
$.each(fields, function (idx, value) {
textarray.push(getdata[value])
});
var url = '#Url.Action("index", "request")' + '/id=1?parCod='+ textarray[1];
window.location.href = url;
}
});

kendo Grid excelExport's hideColumn not working

I am trying to hide one column from excelExport. I have tried some traditional ways shown on google like e.sender.hideColumn(13) or e.sender.hideColumn("bID") or grid.hideColumn(13). but none of this working for me. I have also done exportPDF which is working perfectly.
here is JS code I am attaching, to show what I am doing.
$("#ALReport").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
allPages: true,
fileName: "ALReport" + todayDateFormatted() + ".xlsx",
proxyURL: "/content",
filterable: true
},
excelExport: function (e) {
e.sender.hideColumn(12);
var grid = $("#ALReport").data("kendoGrid");
grid.hideColumn("Bid");
},
pdf: {
allPages: true,
filterable: true,
fileName: "ALReport" + todayDateFormatted() + ".pdf",
proxyURL: "/content",
margin: {
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
}
},
pdfExport: function (e) {
var grid = $("#ALReport").data("kendoGrid");
grid.hideColumn("Bid");
$(".k-grid-toolbar").hide();
e.promise
.done(function () {
grid.showColumn("Bid");
$(".k-grid-toolbar").show();
});
},
dataSource: {
serverSorting: true,
serverPaging: true,
transport: {
read: getActionURL() + "ALReport....
},
.....
This is my js code. Can anyone guide where i am making mistake?

Your export to excel has no effect because event is fired after all data have been collected. For your example try following approach:
var exportFlag = false;
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
allPages: true,
fileName: "ALReport" + todayDateFormatted() + ".xlsx",
proxyURL: "/content",
filterable: true
},
excelExport: function (e) {
if (!exportFlag) {
e.sender.hideColumn("Bid");
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.showColumn("Bid");
exportFlag = false;
}
}
For this example event is prevented and fired one more time excluding hidden column.

CKEditor how to get dialog input

I have CKEditor and I added a dialog with 2 text areas in my own plugin.js folder, but I can't take text inputs when ok button pressed at dialog.
CKEDITOR.dialog.add('ticketDialog', function (editor) {
return {
title: 'Ticket Properties',
minWidth: 100,
minHeight: 100,
maxWidth: 100,
maxHeight: 100,
contents:
[
{
id: 'general',
label: 'Ticket from',
elements:
[
{
type: 'text',
id: 'Ticket',
label: "Write the company's name that you bought from",
'default': "Thy,Pegasus etc."
},
{
type: 'text',
id: 'Price',
label: "Price for single ticket",
'default': "0.00TL"
}
]
}
]
};
});
I have mvc view page and I replace my textarea with CKeditor by using javascript and I need to handle dialog's ok event here.
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('editor1', {
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'ticket',
toolbar: 'Full',
language:'English'
});
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = e.data.definition.dialog.getElement('Price');
var rawValue = elementPrice.getInputElement().$.value; // here I am trying to take the value of Price area input.
alert(rawValue);
//CKEDITOR.instances['editor1'].insertHtml(rawValue);
});
});
</script>
Thank you.

Here is the answer for the other people to see well.
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = dialog.getContentElement('general','Price');
});
});

ExtJS TaskRunner

I'm still in the learning process with EXTJS and any help would be much appreciated.
The goal for me is to load data into a grid where one cell needs to have the value incremented every minute. From my research using the TaskRunner function is the way to go but can't figure out where to put it and how to use it. My assumption is that it needs to go into the model or the controller but I'm not sure. In my simple project I'm using the MVC architecture.
Currently my gird works as expected. It reads in a file does a date conversion that produces a minute value. It's that minute value that I need to increment.
The code below is a sample TaskRunner snippit that I'm working with, right or wrong I don't know yet.
var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
run: store.each(function (item)
{
var incReq = item.get('request') + 1;
item.set('request', incReq);
}),
interval: 60000 // 1-minute interval
});
task.start();
Model:
Ext.define("myApp.model.ActionItem", {
extend : "Ext.data.Model",
fields : [
{
name: 'pri',
type: 'int'
},
{
name: 'request',
type: 'int',
defaultValue: 0,
convert : function(v, model) {
return Math.round((new Date() - new Date(v)) / 60000);
}
}
]
});
Controller:
Ext.define("myApp.controller.HomeController", {
extend: "Ext.app.Controller",
id: "HomeController",
refs: [
{ ref: "ActionItemsGrid", selector: "[xtype=actionitemgrid]" },
{ ref: "DetailsPanel", selector: "[xtype=actionitemdetails]" }
],
pri: "",
models: ["ActionItem"],
stores: ["myActionStore"],
views:
[
"home.ActionItemDetailsPanel",
"home.ActionItemGrid",
"home.HomeScreen"
],
init: function () {
this.control({
"#homescreen": {
beforerender: this.loadActionItems
},
"ActionItemsGrid": {
itemclick: this.displayDetails
}
});
},
displayDetails: function (model, record) {
this.getDetailsPanel().loadRecord(record);
},
loadActionItems: function () {
var store = Ext.getStore("myActionStore");
store.load();
this.getActionItemsGrid().reconfigure(store);
}
});
View:
Ext.define("myApp.view.home.ActionItemGrid", {
extend: "Ext.grid.Panel",
xtype: "actionitemgrid",
resizable: true,
multiSelect: false,
enableDragDrop : false,
store: null,
columns:
[
{ header: "Pri", dataIndex: "pri", sortable: false, autoSizeColumn: true},
{ header: "Req", dataIndex: "request", sortable: false, autoSizeColumn: true}
],
viewConfig:
{
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
}
});
Sample JSON File:
{
"actionitems" : [
{
"pri": 1,
"request": "2014-12-30T03:52:48.516Z"
},
{
"pri": 2,
"request": "2014-12-29T05:02:48.516Z"
}
]
}

You have error in code which creates task - you should provide function to run configuration property, not result of invocation. Try this:
var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
run: function() {
store.each(function (item)
{
var incReq = item.get('request') + 1;
item.set('request', incReq);
})
},
interval: 60000 // 1-minute interval
});
task.start();
You can put that code in loadActionItems method.