We Keep Coding

Input field in Table "keeps" edited number in same row while scrolling (JSView)

I've got a sap.ui.table.Table with Input fields and the table gets the data via JSON which works well. However, if I edit the value in the first row for example, and try to scroll down, the value "stays" in the first row until a different value hits this field. So it basically updates every cell except the edited one while scrolling. After that, I scroll up again to see the value I changed, but this value now has the old value from the load at the beginning again.
I think something with my binding isn't correct at all, because I haven't seen anything like this yet. I know that tables only update the row contexts but I can't figure out how to do this.
Here is a example: https://jsbin.com/yuvujozide/6/edit?html,console,output
Edit the right "Gates" and scroll, to see how it disappears and edit the left value and scroll to see how the value scrolls with the table.
I tried to remove/set the VisibleRowCount and logged to see if the data gets loaded multiple times but that's not the case.
var oModel = new sap.ui.model.json.JSONModel();
var oTable = new sap.ui.table.Table({
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
editable: true
});
oModel.setData({ rows: tableRows.value, columns: columnArray });
oTable.setModel(oModel);
var counter = 0;
oTable.bindColumns("/columns", function (sId, oContext) {
var columnName = columnArray[counter];
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
}).bindProperty("value", columnName, function (cellValue) {
return returnRange(this, oTable, cellValue, columnName, counter, dic);
});
counter++;
return new sap.ui.table.Column({
label: columnName,
template: defaultTemplate,
flexible: true,
autoResizable: true,
width: 'auto',
multiLabels: [
new sap.ui.commons.Label({ text: columnName }),
new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })
]
});
});
oTable.bindRows("/rows");
As you can see I separated the rowData and columnNames in two arrays:
tableRows and columnArray
The returnRange function checks some values and just returns the cellValue
I would expect that the Input fields keeps the changed values (which is probably normal), so I can change several Input fields and then I can Update the table via Ajax-Call.

The problem is that sap.ui.table.Table has a custom scrolling behaviour that is different from the default browser scrolling. Instead of creating a row for each record, it will create a fixed number of rows and re-bind these rows after each scroll.
If the table is editable and bound to a JSONModel, it will usually create a two-way-binding and update the model values upon user input, hence scrolling works fine. But since you have provided a custom formatter function for the binding (returnRange), a two-way-binding is not possible anymore. This means that any user input is lost after scrolling.
If you remove the formatter function like this
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
});
it will work fine.
In case you want to validate the user input, you should listen to the input's change event and use InputBase#setValue to set it to a different value. This will also reflect your changes in the JSONModel.

Custom plugin with DOM manipulation CKEditor 4.x

I am developing one custom plugin for the CKEditor 4.7 which do a simple think take in case user select some stuff it will put it in a div with specific class, else it will put a div with same class just with text like 'Add content here'
I try to use some functions according to CKEditor docs but have something really wrong.
here is the code for the plugin folder name=> customdiv, file=> plugin.js
CKEDITOR.plugins.add('customdiv', {
icons: 'smile',
init: function (editor) {
editor.addCommand( 'customdiv',{
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
}else{
selection='<div class="desktop">Add your text here </div>';
}
return {
selection
};
}
});
editor.ui.addButton( 'Customdiv',
{
label : 'Custom div',
command : 'customdiv',
toolbar: 'customdiv',
icon : this.path + 'smile.png'
});
if (editor.contextMenu) {
editor.addMenuGroup('divGroup');
editor.addMenuItem('customdiv', {
label: 'Customdiv',
icon: this.path + 'icons/smile.png',
command: 'customdiv',
group: 'divGroup'
});
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('customdiv', true)) {
}
});
}
}
});
According to some docs it have to return the result good.
Also this is how I call them in my config.js file
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'templates,customdiv';
config.allowedContent = true;
config.toolbar = 'Custom';
config.toolbar_Custom = [
{ name: 'divGroup', items: [ 'Customdiv' ] },
{name: 'document', items: ['Source', '-', 'Save', 'Preview', '-', 'Newplugin']},
/* MOre plugins options here */
];
};
Note: the official forum was close and moved here :(
UPDATE
I have change the function like this
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}else{
selection='<div class="desktop">Add your text here </div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}
}
This makes it work for the else part, but still can't get the selected one.
UPDATE 2
After change of the if I can get data if is selected, but when I do insert selected between <div> I face a problem.
var selection = editor.getSelection();
give like result an object, and I funded out a more complex function and I get collected data like this
var selection = editor.getSelection().getNative();
alert(selection);
from this in alert I see the proper selection and not just object,but when I insert it like
CKEDITOR.instances.editor1.insertHtml('<div class="desktop">' + selection + '</div>');
it just put all selected in one line and not adding the div, new div for else case working with this syntax.
UPDATE 3
The problem now is this function
CKEDITOR.instances.editor1.insertHtml('<div>' + selection + '<div>');
it delete all existing HTML tags even if I add just selection without <div> I am not sure if this is because of the way I insert data or way I collect data, just in alert when I collect data I see correct space like in the editor.

user select some stuff it will put it in a div with specific class
If you want to check if selection is not empty, please instead of selection.length>0 try using !selection().getRanges()[0].collapsed.
If you need something more advanced you could also try using
!!CKEDITOR.instances.editor1.getSelection().getSelectedText() to see if any text was selected and !!CKEDITOR.instances.editor1.getSelection().getSelectedElement() to see if any element like e.g. image, tabl,e widget or anchor was selected.
EDIT:
If you need selected HTML please use CKEDITOR.instances.editor1.getSelectedHtml().getHtml();
Please also have a look at CKEditor documentation:
https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_documentFragment.html#method-getHtml
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedText
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement

Dojo Checkbox Label

Hi i have to create an Checkbox which is set up in JavaScript Code. For that we are using DOJO in our project. This Checkbox should just be visible for one project so i can't insert on html side. To realise the Checkbox wasn't a problem and also the visability. But i can't set a label which should be next to the Checkbox.
HTML Code:
JavaScript Code:
if (this.createCheckInput)
{
this.checkInput = new CheckBox({
name: "checkBox",
id: "checkId",
value: "agreed",
innerHTML: "Publish", //Label i wan't to create
onChange: lang.hitch(this, function (p)
{
if (p == true) {
this.checkboxChecked = p;
}
})
}, this.publishCheckbox);
}
I Also tried it with another JavaScript Element but there is no DOJO Library I can use i just find the Textarea but the user should not be able to change the text.
JavaScript Code 2:
//create title for checkbox
if (this.createInputLabel)
{
this.showInputLabel = new Textarea ({
value : 'Publish after upload'
},this.publishCheckboxLabel);
}
Thanks for helping :)

Why not simply creating a label element ? why going so complex ?
Using dojo/dom-construct:
domConstruct('label', {innerHTML: 'Publish after upload'}, this.publishCheckboxLabel);

Reloading w2ui's grid.columns.editable.items if the field is a combo box

I'm trying to alter the "items" array attached to a combo box inside an editable field of w2ui's grid after the grid has been initially rendered.
To demonstrate my issue I've set up a jsfiddle taken from the "grid inline editing" demo here:
http://jsfiddle.net/8dkdoc4p/5/
and since some box appeared saying I must include code (why?) here's conceptually what I am trying to do. Note that this won't make too much sense unless you've seen this grid demo: http://w2ui.com/web/demos/#!grid/grid-21
function alterComboBox() {
people.push({ id: myid, text: "ID " + myid});
myid++;
w2ui['grid'].refresh();
}
The idea is to add another item for the combo box at run time and have the grid actually display the new item as another option.
Thanks in advance!

You have to re-assign the global record "people" to the w2ui grid columns after altering the record.
In case of your "select" field, you also have to call the render() method.
http://jsfiddle.net/8dkdoc4p/8/
var myid = 22;
function alterComboBox() {
people.push({ id: myid, text: "ID " + myid});
myid++;
w2ui['grid'].getColumn('list').editable.items = people;
w2ui['grid'].getColumn('combo').editable.items = people;
w2ui['grid'].getColumn('select').editable.items = people;
w2ui['grid'].getColumn('select').render();
//w2ui['grid'].refresh(); // no need!
}

Element not being updated with new HTML, with element onMouseEnter, React.JS

Really simple problem where when I hover over the navigation bar of my page (in a unordered list), the tab is supposed to update with a new value. The value updates, but the attributing HTML markup does not render along with it (such as when I tried to make the 'why' value bold. I tried even storing both of the values in two variables and concat together, but still no luck. Any help would be appreciated.
Screenshot of Nav Bar (Vertical):
My Default Props:
getDefaultProps: function(){
var text = '<i className="fa fa-laptop"></i>';
var text2 = '<b>why<b>';
return{why: text + text2};
},
Line needing to be changed:
<li value = '3' className = "nav-content" style = {ulTop} onMouseEnter = {this.change} onMouseLeave = {this.out} ref = 'whyTab'><Link to = '/Why'><i className="fa fa-code"></i>{this.props.why}</Link></li>