As in examples a new row is added when you type something into one of the cells of last row. How is it possible to add new row only after all cells in this new row are valid to the validator rules of columns ?
Here's a working snippet. It doesn't stop row from being added but it runs all validations on a new row and forces user to enter all missing values.
First define validateRow function (ideally it should be put in SlickGrid namespace):
function validateRow(grid, rowIdx) {
$.each(grid.getColumns(), function(colIdx, column) {
// iterate through editable cells
var item = grid.getDataItem(rowIdx);
if (column.editor && column.validator) {
var validationResults = column.validator(item[column.field]);
if (!validationResults.valid) {
// show editor
grid.gotoCell(rowIdx, colIdx, true);
// validate (it will fail)
grid.getEditorLock().commitCurrentEdit();
// stop iteration
return false;
}
}
});
}
Then invoke it in onAddNewRow binding func (or after adding a item to Array if you're not using DataView):
grid.onAddNewRow.subscribe(function (e, args) {
dataView.addItem($.extend({
id: dataView.getLength()
}, args.item));
validateRow(args.grid, args.grid.getActiveCell().row);
});
SlickGrid doesn't support that.
Related
I am trying to build an SAPUI5 application using TreeTable and I'm facing some problems to use its methods.
In my app, I have a button which triggers this method.
onChangeViewContext: function(oEvent) {
.........
.........
var aViewContext = oContext.oModel.getProperty(sPath + "/ViewContext");
var aDataModel = oContext.oModel.getProperty("/ApplicationCollection/" + sAppId + "/DataModel");
var oStructure = this._createParentChildStructure(aDataModel);
var oTreeModel = this.getView().getModel("treeModel");
oTreeModel.setData(oStructure);
this._oViewDetailLine = oSource.getParent().getParent().getParent();
this._oViewDetailLine.setVisible(false);
this.byId("idSelectElementsPanel").setVisible(true);
this._setSelectedItems(aViewContext, oTree);
}
What I'm trying to do here is only bind the rows with my treeModel, get tree table object and send it to my _setSelectedItems method which below.
_setSelectedItems: function(aViewContext, oTree) {
oTree.clearSelection();
var sElementName;
var aSelectedIndices = [];
var aElements = [];
var aRows = oTree.getRows();
aRows.forEach(function(row) {
if (row._oNodeState !== undefined) {
aElements.push(row.getCells()[0].getText());
}
});
I need to get rows array here because I will use it for setting selected items of tree table. The problem is when "onChangeViewContext" triggered, oTable.getRows() returns an empty array. But when I click cancel button (which just hides my tree table, nothing more) and then trigger "onChangeViewContext" function again, I can get the rows array completely.
Even on the first call when I try to get table's model, I can get the treeModel and its data correctly.
I've tried to refresh bindings, aggregations etc. But no luck.
By the way, I'm using row binding in my xml view like this :
<t:TreeTable id="idSelectElementsTree" rows="{path: 'treeModel>/'}" selectionMode="MultiToggle" enableSelectAll="false"
rowSelectionChange="onSelectElement">
I'm really drowning here so any any help would be appreciated.
Edit : rest of the setSelectedIndexes function :
aViewContext.forEach(function(name) {
sElementName = name;
if (aElements.indexOf(sElementName) !== -1) {
aSelectedIndices.push(aElements.indexOf(sElementName));
}
});
aSelectedIndices.forEach(function(idx) {
if (oTree.getRows()[idx]._bHasChildren) {
oTree.expand(idx);
}
oTree.addSelectionInterval(idx, idx);
});
What could help here is to add an event rowsUpdated="onRowsUpdated" to the table in the XML view. This event is triggered after the table has been loaded and will hence provide you with the data via;
this.getView().byId("sTableId").getRows();
The difference to your approach is that the event would not be triggered by the press of a button but automatically, as the table is rendered. You can then also use this function to trigger another one as per your use case.
I have created a Handsontable and added conditional formatting to the table by assigning a specific cell renderer to each cell based off the value in the table column 'MIN_REMAINING_LIFE'. As per the instructions on the Handsontable website.
https://docs.handsontable.com/0.31.2/demo-conditional-formatting.html
And this works fine. My table rows change color depending on the value in the 'MIN_REMAINING_LIFE' column. However, when I go to overwrite another css property (making the row bold in this case) in any of these rows with a renderer already assigned. Nothing happens. The renderer will not update its value. I have provided my code which attempts to update the renderer on double click below.
var addDblClick = function (tableName, hot) {
hot.view.wt.update('onCellDblClick', function (row, cell) {
var selectedRow = hot.getSelected()[0];
addHighlightRow(hot, selectedRow);
});
}
var addHighlightRow = function (hot, selectedRow) {
if (selectedRow != null) {
var columnTotal = hot.countCols();
for (var i=0;i<columnTotal;i++) {
hot.getCellMeta(selectedRow, i).renderer = selectedRowCellRenderer
}
hot.render();
}
}
var selectedRowCellRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.color = 'black';
td.style.fontWeight = '800';
}
I have also created a fiddle of this particular issue. See link below.
https://jsfiddle.net/JoshAdams/w8amwLvb/
You can replicate the issue by following the screenshots below.
So my question is. How can I update the "Bold" property (or any css property for that matter) of the row but still maintain the current conditional formatting renderer applied to the cell?
I want to add new Row in Kendo Grid which is having Default value in First Cell.
How can I set the Default Value in that added Row of Kendo Grid
I am adding New Row in Kendo Grid as::
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
grid.addRow(tempVal);
});
But we can't do it in that Manner.
So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.
Now I am able to Add New Row in Kendo Grid as,
$("#AddSingleSupplement").click( function(){
var tempSupplement = $(this).val();
//alert(tempSupplement);
grid.addRow(tempSupplement);
grid.dataSource._data[0].Description = $(this).text().trim();
});
But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element.
Please Suggest me wether this one is the Correct way to do this or there is any other way than this.
For dynamic defaults you can wire up your logic on Edit event, something like:
<script>
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
function onEdit(e)
{
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>
As per Kendo team , Default value cannot be changed dynamically.
However, we can make use the Grid edit event to pre-populate the edit form:
edit: function(e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=ProductName]") // get the input element for the field
.val("MyCustomValue") // set the value
.change(); // trigger change in order to notify the model binding
}
}
I am building a pretty combobox with checkboxes and conditional entries. Everything works out alright, except for two features that I cannot figure out how to implement.
1) I would like to move the label inside the combobox, make it shift the values to the right, and appear in a slightly gray color.
2) I would like the value to ignore certain entries (group headers) selected. Those entries are there for functionality only - to select/unselect groups of other entries.
The entire project is in the zip file. You don't need a server, it's a client base app. Just download the archive, unpack, and launch app.html in your browser.
http://filesave.me/file/30586/project-zip.html
And here's a snapshot of what I would like to achieve.
Regarding your second issue, the best way I see is to override combobox onListSelectionChange to filter the values you don't want:
onListSelectionChange: function(list, selectedRecords) {
//Add the following line
selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
return rec.data.parent!=0;
});
//Original code unchanged from here
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
// Only react to selection if it is not called from setValue, and if our list is
// expanded (ignores changes to the selection model triggered elsewhere)
if (!me.ignoreSelection && me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* Only set the value here if we're in multi selection mode or we have
* a selection. Otherwise setValue will be called with an empty value
* which will cause the change event to fire twice.
*/
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
},
And change your onBoundlistItemClick to only select and deselect items in the boundlist not to setValue of the combo:
onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;
if ( ! record.data.parent) {
var d = dataview.dataSource.data.items;
for (var i in d) {
var s = d[i].data;
if (s.parent == record.data.id) {
if (chk) { // select
dataview.getSelectionModel().select(d[i],true);
} else { // deselect
dataview.getSelectionModel().deselect(d[i]);
}
}
}
}
},
Regarding your first issue, it is easy to add the label using the displayTpl config option. But this will only add the text you need, without any style (grey color, etc). The combo is using a text input, which does not accept html tags. If you don't need the user to type text, than you may want to change the combo basic behavior and use another element instead of the text input.
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?