Datatables with Jeditable, how do I setup initially in edit mode? (or always be in edit mode) - plugins

Is it possible to have the Jeditable field start off in edit mode when using the datatables plugin?
Jeditable website says the solution (not using thru Datatables) :
You can trigger the used event when your document loads. For example:
$(function() {
$("#editable").trigger("click");
How do I access it in datatables, here's my code:
var oTable;
$(function () {
oTable = $('#calendarTable').dataTable({
"bPaginate": false,
"bSort": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [
null,
null,
null,
null,
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": true }
]
});
//$("#editable").trigger("click");
// oTable.fnGetNodes()).editable.trigger("click");
oTable.editable("disable");
var year;
var lobid;
var officeid;
year = $('#hv_year').val();
lobid = $('#hv_lob').val();
officeid = $('#hv_office').val();
var url;
url = "save.asp";
url = url + "?year=" + year;
url = url + "&lobid=" + lobid;
url = url + "&officeid=" + officeid;
/* Apply the jEditable handlers to the table */
$('td:eq(4)', oTable.fnGetNodes()).editable(url, {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
},
tooltip: 'Click to Edit',
height: "40px",
type: 'textarea',
onblur: 'ignore',
cancel: 'Cancel',
submit: 'Save',
indicator: '<img src="images/loader.gif">'
});

I think you can just chain the click:
$('td:eq(4)', oTable.fnGetNodes()).editable(url, {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
},
tooltip: 'Click to Edit',
height: "40px",
type: 'textarea',
onblur: 'ignore',
cancel: 'Cancel',
submit: 'Save',
indicator: '<img src="images/loader.gif">'
}).trigger("click");

Related

In jsTree make last child selected after click on in with link open

I can't make my last child node selected after click on it.
Click open this node (href url) but on reloaded page it only select parent node.
Maybe there is also an option to prevent selection of parent node? I don't need it at all.
My tree have only 3 levels and only 3rd/last is used to open links.
jstree config:
$(() => {
$('#jstree').jstree({
core: {
multiple: false,
themes: {
dots: false,
},
data: {
url: '/jsonCats',
dataType: 'json',
},
},
state: {
key: 'navTree',
tree_state: false,
},
types: {
firstfloor: {
icon: false,
selected: false,
},
secfloor: {
icon: false,
},
hidden: {
icon: false,
},
element: {
icon: 'bi bi-file-earmark-text',
},
},
search: {
case_sensitive: false,
show_only_matches: true,
},
plugins: ['search', 'types', 'state', 'changed'],
});
$(document).ready(() => {
$('.search-input').keyup(function () {
const searchString = $(this).val();
$('#jstree').jstree('search', searchString);
});
});
$('#jstree').on('changed.jstree', (e, data) => {
if (data.event === undefined) {
return false;
}
if (data.node.a_attr.href !== '#' && data.event.bubbles) {
location.assign(data.node.a_attr.href);
}
});
});
example json last child:
{
"id": 1001,
"parent": "16",
"text": "Text",
"type": "element",
"li_attr": {
"elem": "element"
},
"a_attr": {
"href": "/KnowledgeBase/1001"
}
localStorage only select parent node:
{"state":{"core":{"open":["1","16"],"scroll":{"left":0,"top":0},"selected":["1"]}},"ttl":false,"sec":1673943166005}

ag-grid createRangeChart Line start from 0

I use createRangeChart to the line but i want that range wii start at 0 ,but i can't set lineDashOffset to anywhere
how can i use lineDashOffset in createRangeChart ?
enter image description here
I want 30.6 that one start to 0
onFirstDataRendered: function onFirstDataRendered(params) {
const colIds = params.columnApi
.getAllDisplayedColumns()
.map(col => col.getColId());
params.api.createRangeChart({
chartType: 'line',
// chartThemeOverrides: {
// common: {
// title: {
// enabled: true,
// text: message,
// },
// },
cellRange: {
columns: colIds,
},
suppressChartRanges: false,
chartContainer: document.querySelector("#datalistgridChart"+id),
});
i find min can set 0 in the
createRangeChart -> chartThemeOverrides -> cartesian -> axes -> number -> min:0
params.api.createRangeChart({
chartType: chartType,
chartThemeOverrides: {
cartesian: {
axes: {
number: {
label: {
formatter: (params) => {
if (chartType == 'line'){
return params.value+'%';
}
return params.value;
}
},
min:0,
},
},
},
common: {
legend: {
enabled: true,
position: 'bottom',
}
}
},
unlinkChart: true,
cellRange: {
columns: colIds,
},
seriesChartTypes:seriesChartTypes,
suppressChartRanges: false,
chartContainer: document.querySelector("#datalistgridChart"+id),
});

How to build a quantity plus / minus composite control?

I try to build an input field for quantities with plus and minus buttons. More like to understand how composite controls are working. I found this documentation.
I thought I could use the new control like this:
new ex.perimental.Input({
width: "14em",
editable: true,
input: new sap.m.Input({
width: "8em",
value: {
path: "model>Quantity",
type: new sap.ui.model.type.Integer({}, {
minimum:0
})
},
description: "{model>Unit}"
}),
})
The control code looks like this:
sap.ui.define([
"sap/ui/core/Control",
"sap/m/Button",
"sap/m/Input"
], function(Control, Button, Input) {
"use strict";
return Control.extend("ex.perimental.Input", {
metadata: {
properties: {
width: {
type: "string",
defaultValue: "14em",
},
editable: {
type: "boolean",
defaultValue: false,
},
},
aggregations: {
_increaseButton: {
type: "sap.m.Button",
multiple: false,
visibility: "hidden",
},
_decreaseButton: {
type: "sap.m.Button",
multiple: false,
visibility: "hidden",
},
input: { type: "sap.m.Input", multiple: false },
_hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
},
events: {
increase: {},
decrease: {},
},
},
_onDecrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this.getAggregation("input").getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) - 1;
}
oInput.setValue(newValue);
this.fireEvent("decrease", {
oldValue: oldValue,
newValue: newValue,
});
},
_onIncrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this.getAggregation("input").getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) + 1;
}
oInput.setValue(newValue);
this.fireEvent("increase", {
oldValue: oldValue,
newValue: newValue,
});
},
init: function() {
this.setAggregation(
"_decreaseButton",
new Button({
icon: "sap-icon://sys-minus",
press: this._onDecrease.bind(this),
})
);
this.setAggregation(
"_increaseButton",
new Button({
icon: "sap-icon://sys-add",
press: this._onIncrease.bind(this),
})
);
this.setAggregation(
"_hBox",
new sap.m.HBox({
items: [
this.getAggregation("_decreaseButton"),
this.getAggregation("_increaseButton"),
],
})
);
},
setEditable: function(sValue) {
debugger;
// aggregations will be null now
// I assume because they are reused in the HBox control
// this.getAggregation("_increaseButton").setEditable(sValue);
// this.getAggregation("_decreaseButton").setEditable(sValue);
// this.getAggregation("input").setEditable(sValue);
},
setWidth: function(sValue) {
this.getAggregation("_hBox").setWidth(sValue);
},
setInput: function(oInput) {
this.setAggregation("input", oInput);
var oHBox = this.getAggregation("_hBox");
oHBox.insertItem(oInput, 1);
},
renderer: function(oRenderManager, oControl) {
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addClass("myStyle");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.renderControl(oControl.getAggregation("_hBox"));
oRenderManager.write("</div>");
}
});
});
It will be rendered but the setEditable is not working.
The buttons (used inside the HBox control again) are not reachable via getAggregation. Also the input field (set from outside) can't be accessed.
Not sure how to do it right. Anyone an idea?
Edit2
This is the latest version but still not working.
I am asking me how to put the externally defined input control into the right place inside the inner Hbox control and be able to access this control in methods like setEditable?
sap.ui.define([
"sap/ui/core/Control",
"sap/m/Button",
"sap/m/Input"
], function(Control, Button, Input) {
"use strict";
return Control.extend("ex.perimental.Input", {
metadata: {
properties: {
width: {
type: "string",
defaultValue: "14em",
},
editable: {
type: "boolean",
defaultValue: false,
},
},
aggregations: {
_hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
},
associations: {
input: { type: "sap.m.Input", multiple: false, singularName: "input" },
},
events: {
increase: {},
decrease: {},
},
},
_onDecrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this._input.getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) - 1;
}
this._input.setValue(newValue);
this.fireEvent("decrease", {
oldValue: oldValue,
newValue: newValue,
});
},
_onIncrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this._input.getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) + 1;
}
this._input.setValue(newValue);
this.fireEvent("increase", {
oldValue: oldValue,
newValue: newValue,
});
},
init: function() {
this._decreaseButton = new Button({
icon: "sap-icon://sys-minus",
press: this._onDecrease.bind(this),
});
this._increaseButton = new Button({
icon: "sap-icon://sys-add",
press: this._onIncrease.bind(this),
});
this.setAggregation(
"_hBox",
new sap.m.HBox({
items: [
this._decreaseButton,
this.getAssociation("input"),
this._increaseButton,
],
})
);
},
setEditable: function(sValue) {
var bEditable = false;
if (sValue === true) {
bEditable = true;
}
this._decreaseButton.setEnabled(bEditable);
this._increaseButton.setEnabled(bEditable);
// seems not always working
this._input.setEditable(bEditable);
},
setWidth: function(sValue) {
this.getAggregation("_hBox").setWidth(sValue);
},
setInput: function(oInput) {
this.setAssociation("input", oInput);
this._input = oInput;
var oHBox = this.getAggregation("_hBox");
oHBox.insertItem(oInput, 1);
},
renderer: function(oRenderManager, oControl) {
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addClass("myStyle");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.renderControl(oControl.getAggregation("_hBox"));
oRenderManager.write("</div>");
}
});
});
I still have problems with the association handling (updated code) I guess handling the association should be done different? Sometimes the input field is still null.
a control can only be aggregated by one control at a time.
This is the difference between associations (control may be at multiple at the same time) and aggregations.
What you can do in your init is:
this._decreaseButton = new Button (...)
Basically you only need one aggregation for your HBox.
If your buttons are then aggregated by the HBox they will know the models of the parent and also be destroyed.
The only thing you need to check if your Root control is a Ancestor of the created controls (use myControl.getParent()).
best regards,
Tobias

Kendo UI Grid create data not making it to controller

I am having difficulty getting data to my controller using the MVVM method as shown in this Kendo Dojo example
I can see in my parameterMap function that the data is in the options.models but when I look for data at the controller, FAC_FuelReceipts is null. I can manually us an ajax call but I want this to work "Out of the Box" first. What am I doing wrong?
Grid:
$("#grid").kendoGrid({
height: 430,
columns: [
{ field: "FuelReceiptID" },
{ field: "ReceiptDate", title: "Receipt Date", width: 110, format: "{0:MM/dd/yyyy}" },
{ field: "FuelType", title: "Fuel Type", width: 110, editor: fuelTypeDropDownEditor },
{ field: "Qty", width: 110 },
{ field: "ReceivedBy", width: 110 }
],
editable: true,
pageable: true,
sortable: true,
filterable: true,
navigatable: true,
toolbar: ["create", "save", "cancel"],
dataSource: viewModel.receipts
});
ViewModel Code:
var viewModel;
$(function () { //On Ready
viewModel = kendo.observable({
receipts: new kendo.data.DataSource({
schema: {
model: {
id: "FuelReceiptID",
fields: {
FuelReceiptID: { editable: false, nullable: true },
ReceiptDate: { type: "date", validation: { required: true } },
FuelType: { type: "string", defaultValue:"Diesel" },
Qty: { type: "number", validation: { required: true } },
ReceivedBy: { type: "string" }
}
}
},
batch:true,
transport: {
read: {
cache:false,
url: "/Fuels/GetFuelReceipts",
dataType: "json"
},
create: {
url: "/Fuels/Create",
dataType: "json",
type: "POST"
},
parameterMap:function(options,operation){
if (operation == "read") {
return{
SiteID: SiteID,
ReceiptMonth: ReceiptMonth,
ReceiptYear: ReceiptYear
}
}
if (operation !== "read" && options.models) {
return { FAC_FuelReceipts: kendo.stringify(options.models) };
}
} //parameterMap fuction
} //transport
})
});
Controller Code:
[HttpPost]
public JsonResult Create(IEnumerable<FAC_FuelReceipts> FAC_FuelReceipts) //**empty here**
{
//Do something with data here
return Json(FAC_FuelReceipts, JsonRequestBehavior.AllowGet);
}
Use String instead of IEnumerable, As your parameter data is in string format.
Once you get data in string format deserialize into your object
[HttpPost]
public JsonResult Create(string FAC_FuelReceipts)
{
IList<FAC_FuelReceipts> Items= new JavaScriptSerializer().Deserialize<IList<FAC_FuelReceipts>>(FAC_FuelReceipts);
/**your code*/
return Json(FAC_FuelReceipts);
}

Extjs Cannot read property 'dom' of null

In short, I have a login panel, which will be shown when onClick event is true, but I get error Cannot read property 'dom' of null. When I click second time - the panel is shown, but some elements of it are not shown. When I click for 3th time, the other elements has show, an last, I ger error "Cannot call method 'bringToFront' of undefined".
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.ns('Site.login');
var globalKeyMap = new Ext.KeyMap(document);
globalKeyMap.accessKey = function(key, handler, scope) {
var h = function(n, e) {
e.preventDefault();
handler.call(scope || this, n, e);
};
this.on(key, h, scope);
};
var trackEnter = function(tf, e) {
if (e.keyCode == 13) {
e.stopPropagation();
doLogin();
}
}
var doLogin = function() {
var f = loginPanel.getForm();
if (f.isValid()) {
f.doAction(new Hypo.form.Action.DwrSubmit(f, {
waitMsg: 'Authentication is in progress',
invoker: function(form, cb) {
Login.login(form.getValues(), cb);
},
success: function(fp, o) {
loginForm.hide();
Ext.getBody().addClass("x-body-masked");
var w = loginForm;
w.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
w.mask.show();
if(o.result.data[0].authorities[0].authority=='ROLE_SUPERVISOR')
{
setTimeout('document.location = "AdminUsers.jsp"');
}
else if(o.result.data[0].authorities[0].authority=='ROLE_ADMIN')
{
setTimeout('document.location = "AdminUsers.jsp"');
}
else
{
setTimeout('document.location = "List.jsp"');
}
}
}));
}
}
var loginPanel = new Ext.FormPanel({
id: 'loginPanel',
labelWidth: 75, // label settings here cascade unless overridden
frame: false,
border: false,
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
autoHeight: true,
items: [{
id: 'idxLogin',
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
}, new Ext.form.TextField({
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
})
]
});
var loginForm = new Ext.Window({
layout : 'fit',
width : 350,
closable : false,
modal: true,
plain : true,
title: 'User Authentication',
items: loginPanel,
autoHeight: true,
buttons: [{
text: 'OK',
handler: doLogin
},{
text: 'Cancel',
handler: function() {
loginForm.hide();
}
}],
listeners: {
'activate': function() {
setTimeout(function() {
Ext.getCmp("idxLogin").focus();
}, 100);
}
}
});
Site.login.window = loginForm;
});
Login
I tryed to add renderTo:'someDiv' and add to body a div with id "someDiv". But I received the same error message.
Please, help with that.