Is it possible to set the background color for a row in slickgrid (based on data values) AND use pagination? For angular-slickgrid package.
I used getItemMetadata as suggested multiple other (old) posts - example SlickGrid: How to loop through each row and set color based on the condition?.
This code:
metadata(old_metadata_provider) {
return function(row) {
var item = this.getItem(row);
var ret = (old_metadata_provider(row) || {});
if (item) {
ret.cssClasses = (ret.cssClasses || '');
if ("attribute" in item) {
return { cssClasses: 'redRow' }; //redRow is in styles.css
}
}
return ret;
}
}
and the call is:
this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);
It works correctly. However, when I turn pagination on, the color does not work as expected. I read that SlickGrid re-uses the same row elements when scrolling or paginating and will overwrite the styles associated with them. Is there another way to do it? Thanks for any help on this.
I tried adding the following code, after reading suggestion from ghiscoding, but the colors are still not working when pagination is enabled.
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.dataViewObj = angularGrid.dataView;
this.gridObj = angularGrid.slickGrid;
this.checkRowBackgroundColor(); //where I call the metadata function from my previous post, if the dataView object is defined.
//I added this code:
var self = this;
this.dataViewObj.onPagingInfoChanged.subscribe(function (e, dataView, grid) {
self.gridObj.invalidate();
self.gridObj.render();
});
}
Try this approach:
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.dataViewObj = angularGrid.dataView;
this.gridObj = angularGrid.slickGrid;
// check color change logic for the first time page load
this.checkRowBackgroundColor();
// use arrow function so that 'this' works properly
this.dataViewObj.onPagingInfoChanged.subscribe((e, dataView, grid) => {
// check your color change logic every time Paging Info Changed
this.checkRowBackgroundColor();
});
}
Inside your checkRowBackgroundColor:
checkRowBackgroundColor() {
// ... any of your logic
// get metadata
this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);
// rerender the grid after getting new metadata
this.gridObj.invalidate();
this.gridObj.render();
}
Your problem should be solved now. As I have not tested on my local machine, I can not give guarantee. You can checkout original documentation of angular-slickgrid about this specific topic here: Dynamically Add CSS Classes to Item Rows
I'm trying to filter my results based on a css class and can't seem to think of the easiest/best way to do that.
Here's my plunker example
Essentially by clicking on a link, I would like my filtered results to only show items where the "in_red" class is used.
Instead of filtering by class, filter by the actual property of the object. After all the class is set based on the name property.
One solution would be to use a custom filter function:
ng-repeat="friend in friends | filter:filterFriends"
Where filterFriends would be something like:
function(friend) {
if ($scope.filterOnRed === true) {
return friend.name.substring(0,1) == 'J';
} else {
return friend.name.indexOf($scope.searchText) != -1;
}
}
I have an ASP.NET website with a C# back-end that uses Jqgrid.
I want users to be able to select an item in the grid to edit. One of the fields that can be edited will be presented to users as a drop-down selection list with only valid options for that user.
For example, let's say I have a grid displaying persons. If "person1" is edited, the user may be able to choose "blue" or "red" from the selection list for this item, but if "person2" is edited the user may only choose "yellow" or "green" from the selection list.
I want to dynamically populate the selection list based on what person/row is selected.
I have editoptions and dataurl set on the specific field as follows:
editoptions: { dataUrl: 'FetchData.aspx' }
Yet, I somehow need some kind of parameter to pass to the FetchData.aspx page so that it can do its background-checking on the specific person and create the correct list for the specific "person".
I was hoping I could pass the rowid or itemname or something as follows to identify the specific row/item that is selected:
editoptions: { dataUrl: 'FetchData.aspx?selecteditem=' + Id }
How can I pass a parameter so that I can create the correct list of items for the specific item? There are countless similar questions on the web, but I haven't been able to find a conclusive answer...
I have solved the problem by adding the following onSelectRow function (note that 'Id' in the below code represents the name of a column I want to pass as parameter. It can be any column name in your grid) :
onSelectRow: function (id) {
var temp = $("#list").getRowData(id)['Id']
$("#list").setColProp('mySelectListColumnName', { editoptions: { dataUrl:'FetchData.aspx?selecteditem=' + temp });
}
The above helps to pass the parameter. However, this alone is not sufficient - it allows FetchData.aspx to receive a parameter and customize the html response accordingly, but it only fetches the values once from the dataUrl - so it doesn't refresh when I select different rows.
To solve this, I have also added the following statement:
jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });
This ensures that the edit form will be recreated every time that edit is clicked, which is what I want since the edit form will be slightly different for each row. Works perfectly. Hope this helps someone out there - there is a maze of options out there and this is the simplest I've seen. And it works.
Add this to your defaults:
jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });
and this to your grid parameters:
ajaxSelectOptions: {
data: {
selecteditem: function() { return $('#list').jqGrid('getGridParam', 'selrow'); } }
}
I have a grid panel containing store displayed on many pages (using PagingToolbar).
On the tbar, I put the button to have a query for all data in store according record.get("criterion"). I've tried using queryBy, but it's returning none. So, I use filterBy in button handler, as coded below:
new Ext.Button(
{
text: 'Query',
icon: 'img/icon_search.gif',
scope: this,
handler:function(){
my_store.filterBy(
function(record, id) {
return record.get('field_name') == 'The Content of Field Name';
});
}
}
),
Unfortunately, the query (filter) above only search on current page of grid. How to get all filtered (queried) data from other pages that doesn't displayed?
Look at using remoteFilter on your store, or using the GridFilter plugin.
store.filterBy(function(record)
{
return lines.indexOf(record.get("line_code")code)>0?true:false;
},store.getAllRange()
Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!