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.

Non editable kendo grid ID

I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code :
schema: {
id: 'ID',
fields: {
id: { editable: false }
}
}
This default schema, makes by default non editable id column, and i can't even create a new row with id .
I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).
Any ideas ?
Edit :
PS : the proprety is not related to only id, it can be on every column (can't update but can create)

The editable required a function instead of a value.
columns: [
{ field: 'value', editable: function () { return false; } }
],
Checkout here:
https://dojo.telerik.com/oROJayAd

I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:
edit: function(e) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
Demo
Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:
edit: function(e) {
let currentColumn = this.options.columns[e.container.index()].field,
model = this.dataSource.options.schema.model.fields[currentColumn];
if (model.editable === false) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
}
Demo
You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.

This is how I just did it, though there are other ways.
In columns option if you remove the field option from a column it doesn't know from where to bind it.
Then use the template option to show(bind) the id. Thus making it readonly
columns: [
{
title: 'Id', width: "40px",
template: "#= id #",
},
...]

Single check box selection with jquery datatable

In jquery datatable, single check box should be selected.
This link is working fine.
But above link is using jquery.dataTables 1.10.16 version. And I am using jquery.dataTables 1.9.4.
Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?

In the same page which you give the link, there are many explanation about to using "single check" oparetion.
At the end of the listed attachment, you can see the referanced .js file is
https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js
In your page, you should add this file referance after dataTable.js.
I think, the version of jquery is not important. The important file is "dataTables.select.js"!
Secondly, you must update your dataTable maker codes like the sample below;
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child' // this line is the most importan!
},
order: [[ 1, 'asc' ]]
} );
} );
UPDATES :
Why dont you try to write your own selector function?
for example;
$(document).ready(function() {
$('#example').DataTable( {
/// put your options here...
} );
$('#example').find("tr").click(function(){ CheckTheRow(this); });
} );
function CheckTheRow(tr){
if($(tr).find("td:first").hasClass("selected")) return;
// get the pagination row count
var activePaginationSelected = $("#example_length").find("select").val();
// show all rows
$("#example_length").find("select").val(-1).trigger("change");
// remove the previous selection mark
$("#example").find("tr").each(function(i,a){
$(a).find("td:first").removeClass("selected");
$(a).find("td:first").html("");
});
// mark the picked row
$(tr).find("td:first").addClass("selected");
$(tr).find("td:first").html("<i class='fa fa-check'></i>");
// re turn the pagination to first stuation
$("#example_length").find("select")
.val(activePaginationSelected).trigger("change");
}

Unfortunately, legacy data table does not support or have that select extension.
Workaround:
Create checkbox element inside 'mRender' callback.
Bind action to the checkbox. (This can be done inside the fnRowCallback or outside as in my example in below fiddle
https://jsfiddle.net/Rohith_KP/dwcatt9n/1/
$(document).ready(function() {
var userData = [
["1", "Email", "Full Name", "Member"],
["2", "Email", "Full Name", "Member"]
];
var table = $('#example').DataTable({
'data': userData,
'columnDefs': [{
'targets': 0,
'className': 'dt-body-center',
'mRender': function(data, type, full, meta) {
return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
}
}],
'order': [1, 'asc']
});
$('#example tr').click(function() {
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
});
Also, I suggest you to upgrade your datatable version. Then you can use that select extension.

Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?
Yes.
But, not using the Select Extension since it requires at least version 1.10.7.
For 1.9.4, a possible solution would be:
$(document).ready(function() {
$('#example').find("td input[type='checkbox']").click(function() {
selectRow(this);
});
var table = $('#example').DataTable();
function selectRow(clickedCheckBox) {
var currentPage = table.fnPagingInfo().iPage;
// Being unchecked
if (!$(clickedCheckBox).is(':checked')) {
$(clickedCheckBox).removeAttr('checked');
getRow(clickedCheckBox).removeClass('selected');
return;
}
var selectEntries = $("#example_length").find("select");
var showEntriesCount = selectEntries.val();
var totalRows = table.fnGetData().length;
// If show entries != totalRows append total rows opiton that can be selected
if (totalRows != showEntriesCount)
selectEntries.append($('<option>', {
value: totalRows,
text: totalRows
}));
// Display all rows
selectEntries.val(totalRows).trigger("change");
// Removes all checked attribute from all the rows
$("#example").find("td input[type='checkbox']").each(function(value, key) {
getRow(key).removeClass('selected');
$(key).removeAttr('checked');
});
// Check the clicked checkBox
$(clickedCheckBox).prop('checked', true);
getRow(clickedCheckBox).addClass('selected');
// Re set the show entries count
selectEntries.val(showEntriesCount).trigger("change");
// If added, Remove the additional option added to Show Entries
if (totalRows != showEntriesCount)
selectEntries.find("[value='" + totalRows + "']").remove();
// Go to the page on which the checkbox was clicked
table.fnPageChange(currentPage);
}
function getRow(element) {
return $(element).parent().parent();
}
});
The above will require fnPagingInfo to take the user back to initial page. I haven't tested the solution on large dataset, tested it on a table with 150 rows, but should work fine on larger datasets too.
JSFiddle

Have you tried below code and I checked and it is working fine, you need to update styles and scripts:
You havr to update the latest styles and scripts to achieve latest functionality.
Single check box selection with jquery datatable

Problem with ExtJs editor grid panel

I've an extjs editor grid panel(3.3.1) that is binded to a store. New records are added to the grid by an empty row at the top. On the load of the store I'm adding an empty row at the top of the grids. When the user adds a new value and the focus loses out I'm adding another empty row.
AV.ClassifiedCategories = Ext.extend(Ext.grid.EditorGridPanel, {
....
initComponent: function(){
this.store = this.initialConfig.store;
//add an empty row at top
this.store.on('load', this.addCategory, this);
Ext.apply(this,
{
clicksToEdit: 1,
listeners:
{
afteredit : function(e){
this.addCategory();
},
scope: this
}
});
},
//adds an empty row and insert a record to store
addCategory: function(){
var Category = this.getStore().recordType;
var cat = new Category({ cat_id: null, cat_name: "" });
this.stopEditing();
this.store.insert(0, cat);
this.startEditing(0, 0);
return cat;
},
...
});
The problem is facing here is once the afteredit event is fired and an empty row is added the focus is not moving to the first row i.e. the second row is still in edit mode. How I can solve that?

I've taken your code and have created this demo. As you can see everything works as expected. Are you sure you have provided us with non-working code?

jqGrid setCell function 5th parameter and edit mode

I have a jqGrid where I want all the rows to be in edit mode. Under certain conditions, however, I want a cell in that row to be readonly based on some condition of the row data, but I can't seem to get the grid to bend to my will (yet).
This is what I currently have.
$(grid).addRowData(...); // omitted for clarity
$(grid).jqGrid('editRow',rowid);
if (someCondition){
$(grid).setCell(rowid, 'col1', '', '', {editable: false});
}
The row is added and put into edit mode just as I want, but when it gets to the call to setCell(), it doesn't seem to affect the cell.
Any ideas what I'm doing wrong here?

The grid was already using column formatters for other columns so I decided to go that route. I couldn't get it to not change the entire column to readonly/editable using the method described by Oleg. I also decided to store readonly state as part of the grid cell value.
colModel:
{ name: 'ARNumber', width: 70, editable: false, sortable: false, formatter: 'optionalReadonlyInputCellFormatter'},
setup of my formatter/unformatter:
$.extend($.fn.fmatter, {
optionalReadonlyInputCellFormatter: formatOptionalReadonlyInputCell
});
$.extend($.fn.fmatter.optionalReadonlyInputCellFormatter, {
unformat: unformatOptionalReadonlyInputCell
});
formatter/unformatter functions:
function formatOptionalReadonlyInputCell(cellvalue, options, rowdata) {
var readonly = cellvalue === undefined;
if (readonly)
return displayARNumberInput('');
vals = cellvalue.split(",");
var cellValue = vals[0];
var readonly = !(vals[1] === undefined) || vals[1] == 1;
if (readonly) {
return displayARNumberSpan(cellValue);
}
else {
return displayARNumberInput(cellValue);
}
}
function unformatOptionalReadonlyInputCell(cellvalue, options, cellobject) {
var readonly = (cellvalue == "") ? "0" : "1";
if (readonly == "1") {
return cellvalue + "," + readonly;
}
else {
return $(cellobject).children().val() + "," + readonly;
}
}
function displayARNumberInput(value) {
var element = document.createElement("input");
element.type = "text";
element.value = value;
return element.outerHTML;
}
function displayARNumberSpan(value) {
var element = document.createElement("span");
element.innerText = value;
return element.outerHTML;
}

You should try to modify the property of the cell before you call the editRow method.
Moreover I know only editable attribute for the row which can be "1" or "0" and class "not-editable-row" also for the class. Does the editable attribute for the cell exist?
There is one way which can work. You can modify the editable attribute for the column in the colModel before the call of the editRow method and reset this to the original state after the editRow call. See jqGrid: Enable paging while converting HTML table to grid for an example how to make a dynamic modification in the colModel.
UPDATED: If you already use custom formatter, you can also include that in your code custom editing. An example you will find here Add multiple input elements in a custom edit type field. Custom formatter will be used only to display the data in the grid, but custom_element and custom_value if the row is in the editing mode.