I have a grid with a column type of “link”. For that column I have a “#text_filter”. The text filter searches everything. I think it should only search what the user sees.
Example:
If I inspect a row this is what I see for one of the link columns…
If I type “503” into the text filter this row appears. It shouldn’t. The user only sees “REC-990002-00001”. The user has no idea what the inner-workings or the ID for the record are. So I’m not sure why this would be the default behavior. How do I make it only search what the user sees?
It’s understandable why dhtmlx does what it does. Even if you were to write a custom search function, it would be complex to strip out the html tags and it would be slow.
One way to solve this to populate the cell with only the data you want to user to see and then use a onclick handler to detect when the cell is clicked.
dhtmlXGridObject.prototype.onClick = function(cb){
var that=this;
dhtmlxEvent(that['obj'],"click",function(e){
var el = that.getFirstParentOfType(_isIE?event.srcElement:e.target,"TD");
var rId = el.parentNode.idd;
var cId = el._cellIndex;
var v = that.cells(rId, cId).getValue()
cb.apply(that, [rId, cId, v]);
})
}
One problem is that the cell content will no longer look a link. So you might want to put an image or some indication in the column header to help the users understand the cell is clickable.
Thanks guys. That function above looks like what I need. So how would I go about creating a prototype based off the type “link”, but alter just that function, and call it something like “link_mod_1”? Thanks!
Here’s a very clean way to do this, I was just dealing with a similar situation and solved it this way:
First create a custom column type as:
function eXcell_hyper(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){ }
this.isDisabled = function(){ return true; }
this.getValue = function(){return this.cell._original_value}
this.setValue=function(val){
console.log(val) // parse the incoming val to extract the parts of href
this.cell._original_value=val; // set this to the plain text value of the cell
this.setCValue("<a href=''></a>",val); // create your href from the parsed incoming val
}
}
(you’ll need to write the code to parse the hyperlink)
Then use it as:
grid.setColTypes(hyper,ro,ro)
Then when loading the grid with data, pass in the hyperlink in whatever format you like. If you want to use dhtmlx’s formatting you can:
click here^javascript:doIt()^_self
This will make getCellValue() return whatever “_original_value” was set.
Thank you! I’m sure this will be useful to others. Don’t forget you have to do this right after creating the eXcell_hyper() function…
eXcell_hyper.prototype = new eXcell;// nests all other methods from the base class
Here is my final result…
function eXcell_hyper(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){ }
this.isDisabled = function(){ return true; }
this.getValue = function(){return this.cell._original_value}
this.setValue = function(val){
//console.log(val); // parse the incoming val to extract the parts of href
var res = val.split("^");
this.cell._original_value=res[0]; // set this to the plain text value of the cell
this.setCValue("<a href='"+res[1]+"'>"+res[0]+"</a>",val); // create your href from the parsed incoming val
}
}
eXcell_hyper.prototype = new eXcell;// nests all other methods from the base class
NOTE: I discovered if you have a caret ^ symbol anywhere within your column value it screws up the display of “link” (and this new “hyper”) coltypes. This is because that is the character DHTMLX is keying off of. So for whichever programming language you are using to generate your xml/json you will want to replace ^ with ^ so that the column value will display the ^ symbol properly. This works for me. However, searching on just the ^ symbol doesn’t yield any results (doubt anyone would search on that though).
