So in my grid, I have this key column called entityName. And below, inside my TEMPLATE definition, I define an Html button with an onClick() event.
However, it does NOT fire my onClick() event for column entityName (string type) - yet it does indeed fire when I change it to column Margin (number type).
And btw, it renders the ${entityName} value inside the value attribute in my Html <input> markup...however I can't pass it to my onClick() event.
Could someone please tell me what I'm missing here ? This is really a strange one.
Thank you everybody in advance....Bob
ex/
$("#accountsGrid").igGrid({ autoGenerateColumns: false, width: null, // will stretch to fit data caption: "Accounts for: " + member, dataSource: jsonData, primaryKey: "entityName", columns: [ { headerText: "Account", key: "entityName" , dataType: "string" }, { headerText: "Margin", key: "Margin", dataType: "number", format: "double" }, { headerText: "Liquidity Interval (Days)", key: "LookbackInterval", dataType: "number", format: "number" }, { headerText: "Confidence Level", key: "ConfidenceInterval", dataType: "number", format: "percent" }, { headerText: "Trades", unbound: false, key: "tradesBtn", template: "<input type='button' value='View trades for ${entityName}' onClick='buttonTest(event, ${entityName});' /> " } ], rowTemplate:null
cellClick: function (evt, ui) { GetTradesByAccount(evt, ui); } });
function buttonTest(e, buttonId) { alert("BUTTON CLICKED for " + buttonId); e.cancelBubble = true; }
Hello Rocky,
The test function is defined inside an anonymous function, so it's not seen in the global space (the onclick event will search for window.test function). You should define your test function outside of the .ready() function.
Best regards,Martin PavlovInfragistics, Inc.
Hi Rocky,
First of all, please confirm that your variable "Id" is a string type. If it's an Integer type, then no quotes are needed.
Second thing, it appears that your test function is located within the grid definition. Try moving your test function outside $(document).ready, for example :
$(document).ready(function () {
{ headerText: "Action", key: "Id", dataType: "string", template: "<input type=\"submit\" id=\"btn\" value=\"submit\" onclick=\"test('${Id}')\" />" }
});
function test(id) { console.log("hi-"+id); }
Or just for testing, use an alert : onclick=\"alert('${Id}')\"
good luck,
Bob
I facing similar kind of issue. I have template column which contains button and on click i want to call a test function in jquery passing the id that row. but error comes for the same as no test function found.
please the sample code below:
function test(id) { console.log("hi-"+id); }});
please let me as earliest. its urgent..
Hey Bob,
Yeah I meant quotes. I can explain why:
template: "<input type='button' value='View trades for ${entityName}' onClick='buttonTest(event, ${entityName});' /> "
The template above with the value of entityName being "foo bar" like this { entityName: "foo bar" } will result in the following populated template:
template: "<input type='button' value='View trades for 'foo bar' onClick='buttonTest(event, foo bar);' /> "
which would yield a javascript error. If the value however is a number, for example { entityName: 25 } then we would get the following result:
template: "<input type='button' value='View trades for '25' onClick='buttonTest(event, 25);' /> "
which wouldn't yield and error as 25 is treated as a value.
So surrounding the templating token with quotes would yield the result that you expect.
When embedding a string-type column key into a column template, it must be surrounded by quotes as in this example of an Html <input> button.
My onClick() button event should pass the entityName column value to my buttonTest() js function. So I needed to embed double quotes cause it's a string type.
ex/ onClick='buttonTest(event," + '"' + "${entityName}" + '"' + ");'
$("#grid1").igGrid({ dataSource: jsonData, primaryKey: "entityName", columns: [ { headerText: "Account", key: "entityName" , dataType: "string" },
{ headerText: "Trades", unbound: false, key: "tradesBtn", template: "<input type='button' value='View' onClick='buttonTest(event," + '"' + "${entityName}" + '"' + ");' /> " }