I am new to ExtJS and I want to add something like a favorite button to each row of a data grid. I have gone through almost all sources after a lot of googling but I have not found anything. If anyone has a clear cut idea about how this can be done, please let me know.
First of all adding ExtJS Component inside grids is not supported by default, and the tutorials I've seen out there are kinda hacky. So this is what I would do.
I assume your grid is bound to a store, and each record in the store is a row in your grid.
I assume you have a field in each record that represents the "fav" status of that record, maybe a boolean value.
if the above assumptions are true, I've done something like this before:
add a column in your grid with id "fav-col" that has the dataIndex pointing to the fav field of your store.
{
id : 'fav-column',
dataIndex : 'fav',
sortable : true,
hideable : false,
menuDisabled : true,
fixed : true,
width : 20,
renderer : renderFav
}
add a renderer to that column that render different HTML depending if the row is fav'ed.
function renderFav(favAdded, metaData, record){
if (favAdded === true){
return 'fav added'; //something to represent already added to favourite ;
}else{
return 'fav not added'; //something to represent non-fav'ed row;
}
}
add a listener to 'cellclick' event on the grid, check if the cell being clicked on is a fav cell and toggle the fav value of the record, the grid will re-render automatically once the data in the store is changed
cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
if (this.columns[cellIdx].getId() === 'fav-col'){
record.set('fav', !record.get('fav')); //toggle the fav state
grid.getStore().sync(); //if the store is a REST store, update backend
record.commit(); //commit the record so the red triangle doesn't show
this.doLayout(); //might not need this.
}
}
Related
I am using free jqgrid 4.14 and I need to have a custom image (some kind of mail icon) in my grid and when the image is clicked it should open a modal window having a form and which has the data of clicked row in the message field of form and also has other couple of field like sender mail id, receiver mail id and also a subject.
So, I was able to have a custom image in my grid. Now, we have onSelectRow property by which we can get the id of the clicked row and we have getRowData which will give the data of the columns.
So, I made changed onSelectRow a bit like this
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
var rowId = $(this).getRowData(lastSel);
}
jQuery(this).editRow(id, true);
}
Now, this will give the data of each row when it is clicked. But how will I get same functionality when my custom image is clicked?
EDIT: I need something like this-
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
But here I am not able to find the image like here it finding
There are many ways to implement the requirement. One from the easiest one I described in the answer. You can add the column with formatter: "actions"
{
name: "act", template: "actions", width: 25,
formatoptions: { editbutton: false, delbutton: false }
}
and the jqGrid option, which specify additional custom buttons
actionsNavOptions: {
mailicon: "fa-envelope-o",
custom: [
{
action: "mail",
position: "first",
onClick: function (options) {
alert("Mail for rowid=" + options.rowid);
}
}
]
}
See https://jsfiddle.net/OlegKi/3tuxg71z/
I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks
The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn
I want to set viewrecords property of jqgrid dynamically. By default this property is set as false. I want to set this to true or false (sometimes to show and at times not to show the recordText at the table footer) depending upon the data that I am populating in the grid dynamicaly. I tried with the following but with no avail-
jQuery("#gridID").jqGrid({viewrecords : true});
jQuery("#gridID").setGridParam({viewrecords : true});
I recommend you to use viewrecords: true and just hide the div.ui-paging-info inside of loadComplete depend from the current number of records. For example
loadComplete: function (data) {
if (parseInt(data.records, 10) > 10) {
$("#pager div.ui-paging-info").show();
} else {
$("#pager div.ui-paging-info").hide();
}
}
The demo demonstrate the approach. If you open on the demo the searching dialog and filter for the client data equal to test you will see only one record and the viewrecords field will be not visible:
Clicking on the "Reload Grid" navigator button will follow to show the viewrecords field back.
Portion of my code
xtype: 'grid',
width: 500,
store: store6,
columns:[{
text:'Market',
sortable: false,
width:145,
dataIndex: 'market
}]
I've tried using listeners(which I think i didn't do correctly) and I don't know if click will work here due to each cell not having an id tag.
USE CASE
1. User clicks cell
2. Code turns cell green
3. User clicks the same cell
4. Code turns cell white
The color to each cell depends solely from the user.
This is all client side development which I haven't started any server side (PHP) development yet. I've searched on Stack for a bit and I haven't found a solution that works. Any help or comments would really help.
This is exactly what I'm looking for. Thank InnerJL for directing me in the right direction. I needed it to work for click. Alternating between white and green. Solution is posted below
function(value, metaData, record, rowIndex, colIndex, store)
{
var test = Ext.get(metaData.id).getStyle("background-color");
if(test == "green")
{
Ext.get(metaData.id).setStyle("background-color", "white");
}
else
{
Ext.get(metaData.id).setStyle("background-color", "green");
}
return value;
}
I did similar things and we used custom column renderer.
Here it's code for example:
statusRenderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (rowIndex == undefined) {
return;
}
metaData.css = getCss(value);
return formatValue(value);
}
Note that you could modify the css property in metadata - you could setup color of the cell. For example on each click you increment some internal counter of your record. Then you renderer depending on this counter adds different css classes on the cell.
Hope this helps!
I've tried the statusRenederer and nothing happens but I"m getting some response from the code below.
fn:function(value, metaData, record, rowIndex, colIndex, store)
{
alert(metaData.id);
metaData.trattr = 'style="background-color: red;"';
alert(metaData.css);
return value;
}
The thing is that I can actually get the id. Also getCSS also had some problems. Unless there is an ExtJS class that I can't look up on sencha.com. I can get the ID just fine but no way to change the CSS.
SUCCESS!!!!
fn:function(value, metaData, record, rowIndex, colIndex, store)
{
document.getElementById(metaData.id).style.background = "green";
return value;
}
I went to DOM programming instead of looking through ExtJS which is what I really would have preferred but this gets the job done. All I have to do is toggle between green and white.
This leads on from my previous question.
I initialize a grid with a CheckBox Selection Model, however when I reconfigure the grid the Check Box Selection Model visaully dissapears.
What I want to do is dynamically add a CheckBox Selection Model to a grid after reconfiguring the grids columns, and visually display it.
I have tried something like this:
var sm = new Ext.selection.CheckboxModel();
grid.selModel = sm;
grid.doLayout();
This worked for me. SelectionModel dynamic flag
//dynamically change, true or false, as the case
selectionModel = true
var sm = {} // Selection Model
if (selectionModel){
sm = Ext.create('Ext.selection.CheckboxModel')
}
var grid = Ext.create('Ext.grid.Panel', {
selModel: sm,
frame: true,
store: store,
columns: columns,
// more code ....
})
If you are using ExtJS4, just do a grid.getSelectionModel() after your reconfiguration and see if it works. You don't have to do anything with the returned value. (if it doesn't work, debug to see what is returned by this method. is it an instance of CheckboxModel?)
Note that this was a bug that has recently been patched:
http://www.sencha.com/forum/showthread.php?238825-Checkbox-disappears-after-reconfigure-call-on-locked-grid-with-checkbox-selection-mod