I am trying to style rows of an ExtJS grid with ExtJs v5.1.0 and I am wondering if it is possible to style a row and have that style remain bound to the <tr> element or the record even when I scroll away and scroll back to my row.
An easier way to say it: scrolling away from a styled row removes the custom styles of that row. is there anyway to prevent this? possibly a BufferedStore session? Thank you in advance.
Don't directly style your rows. Instead, configure your grid's view to have a custom getRowClass method.
Ext.create('grid', {
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("valid") ? "row-valid" : "row-error";
}
}
})
You would have to keep book about the state of your columns somewhere. I already answered a similar question about checkbox column state with paging, you would have to do similarly for your row styles, and possibly also save/restore state in the beforeprefetch and prefetch events.
Related
I have a grid with a checkbox selection model and tall cells due to custom html renderers. The problem is when any cell is clicked the grid jerks because the selected cell is scrolled into the focus.
Here is a fiddle with the problem, try scrolling the table manually halfway first and then clicking on the cells to see the grid jumping (it's not consistent, might need to try a few times): https://fiddle.sencha.com/#view/editor&fiddle/1vma
Is there a way to disable row focusing on click, or disable row selection on click if thats the root cause (so you would have to use checkboxes to select rows).
If your grid row contains text that needs to be editable/selectable you can use:
viewConfig: {
navigationModel: {}
}
I have found that returning false from the "beforecellmousedown" event listener function prevents the behavior you are trying to avoid.
listeners: {
beforecellmousedown: function () {
return false;
}
}
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vq3
Suggested earlier answers work for Modern Toolkit only.
For Classic this code helps:
listeners: {
cellclick: function () {
this.blur();
}
}
I am using a UI grid of angular. I want to customize the CSS style of one particular cell for all rows in the grid based on some check.
I am trying:
$scope.gridOpts.columnDefs[2].cellTemplate='something'
if some condition is met, else use some other cellTemplate
While debugging the issue, its going inside that condition and evaluating the cellTemplate for the first time but second time its taking the same value of cellTemplate even when the condition is changed until page is refreshed again.
Please help on this.
From the description of your problem, it looks like using cellClass will be better suited for your requirement.
You could use something like -
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
if (colRenderIndex == 2) {
return 'blue';
}
You should refer to this tutorial here - UI Grid Cell Class
Here is another example by the makers of UI grid.
I am using Kendo UI grid for AngularJS. The scenario is; I have expanded one master row which contains another grid in its detail template. When I insert new item in the detail template grid, the master row automatically collapsed. what I want is when I making changes to detail template grid than there must be no affect on master row(I mean should not be collapsed). any help will be appreciated.
I know the question is old but I have faced the same scenario and come up with this, when you rebind/refresh grid by any mean, the grid get re rendered and thus you got collapse your row. apparently this behavior is of kendo ui. the only thing you can do is take that expanded row id and then rebind grid, after rebind expand that row again
Try adding a dataBinding function to the grid to cancel the default action on the item Change event.
Example Below:
$("#grid").kendoGrid({
navigatable: true,
sortable: true,
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
I have a GridPanel with a CheckColumn. I need to disable the entire row if the checkbox is unchecked when data loads, preventing data modification entirely. I tried using the getRowClass method in the viewConfig as follows:
viewConfig: {
getRowClass: function (record, rowIndex, rowPrms, ds) {
//If the Sign-Off checkbox is unchecked, disable entire row.
if (record.get('signOff') == 0) return 'disabled-row';
}
}
This does not work. Any pointers?
To reflect your change. you need to include one config which is disableSelection : true in the grid.
I discovered that the checkColumn does not have a checkBox object in it. It only plays with various images of checkboxes checked/unchecked using css. I created my own disabled versions of checkbox images, added some custom css, and loaded them conditionally in the renderer of the checkColumn.Prototype. Problem solved!
I have generated grid panel based on my results in PHP. Here is a grid panel: myGridPanel.
Now I need to create third row in grid panel and place Ext.form.ComboBox inside this third row. There should be a Ext.form.ComboBox for every column.
NB! Not one combobox, but a number of them for every column, but only in third row.
I thought about applying editor to this grid panel columns like here, but as you can see this means, that all rows will have Ext.form.ComboBox, but I need them only in third row. Third row shouldn't have any content except those Ext.form.ComboBox with their data.
I think you should add a renderer for that column (in ColumnModel) and try to give the column value (which can probably be everything) depending on which line you are rendering. E.g.:
function renderTestColumn(value, p, record, store) {
return value;
}
Here you can find all params passed to renderer function:
http://dev.sencha.com/deploy/dev/docs/source/ColumnModel.html#method-Ext.grid.ColumnModel-setRenderer
I solved the problem by adding a PropertyGrid to the layout. So now it's
Parent - layout : 'border'
| - 'center' : GridPanel
| - 'east' : PropertyGrid
Now I have same ComboBoxes in this property grid and parent is xtype : 'form'. So now sending setup data from suggestions about GridPanel which were set in PropertyGrid is not a problem.
Adding separate row to GridPanel is to difficult for me yet.