I have looked all over for the correct way to do this and cannot seem to find it. I am trying to call a javascript function inside of a template and I cannot seem to get the syntax correct. I know how to call it within a conditional statement, but how can a javascript function be called inside of the template without being a part of a conditional statement as shown below.
column.Unbound("Download").HeaderText("Download").Width("80").Template("<a href='downloadURL(${DownloadId})' title='Click to download'><img src='/images/" + "downloadIcon(${DownloadId})" + "' /></a>");
Hi Gregory,You cannot call JavaScript function inside template, but you can use formula function of the unbound column to achieve the same effect.Here is an example code:
{ headerText: "Download", key: "download", unbound: true, formula: function(data, grid) { return "<a href='" + downloadURL(data["DownloadId"]) + "' title='Click to download'><img src='/images/" + "downloadIcon(" + data["DownloadId"] +")" + "' /></a>"}}
Hope this helps,Martin PavlovInfragistics, Inc.
can you help me!!
i want to call function from column of gridview to handle process value of column, i am used to FormatterFunction but it can be only 1 paremater, i want to get other column of gridview
my code:
column.For(Function(x) x.Actions).HeaderText("Actions").width(100).Formula("CheckAction")
function CheckAction(data,grid){ return data["CusipID"]; }
it not work
Hello Choung Tran,
Formula function is used in combination with unbound columns so it won't work in your case. Sometime ago we added a second param to the formatter function so you should be able to use it if you have some of the newer versions of the product. What is the version of your product?To check the product version execute the following code in the browser JavaScript console:
$.ui.igGrid.version
You can also check whether the following code works for you:
column.For(Function(x) x.Actions).HeaderText("Actions").width(100).FormatterFunction("CheckAction")
function CheckAction(value, row){ return row["CusipID"]; }
Edit: I misspelled the name of the method. Instead of "Formatter" it should be "FormatterFunction". Sorry for the inconvenience.
i use 14.1 version
thanks for help,
i use Unbound column and .formula function, it done!!
thanks you so much!!
Hello Cuong Tran,
You're probably using a version of Ignite UI in which there is no second param for the formatter function. What is the Ignite UI version that you're using?
To check the version please execute the following code in the browser JavaScript console:
Thanks in advance,Martin PavlovInfragistics, Inc.
thanks for helps,
if i use 'FormatterFunction', how can i get other column of gridview??
because it recieve 1 parameter
It was my mistake. I misspelled the name of the method. It should be "FormatterFunction" instead of "Formatter".
Here is the updated code for the Actions column:
column.For(Function(x) x.Actions).HeaderText("Actions").width(100).FormatterFunction("CheckPermission")
What I can see from the code in your post is that you don't have a definition in JavaScript for the CheckPermission function.
please!
it not working
<div> <h4>Pending Buy Transactions</h4> @(Html.Infragistics() _ .Grid(Of TPG.WebPortfolio.Models.sp_webGetPortfolioOpens_Results)() _ .ID("grdPortfolioOpen" + item.oPortfolio.ctintCustomerSetupID.ToString()) _ .Width("100%") _ .AutoGenerateColumns(False) _ .AutoGenerateLayouts(False) _ .RenderCheckboxes(True) _ .Columns(Sub(column) column.For(Function(x) x.TransNo).Width(80).HeaderText("Transaction ID") column.For(Function(x) x.CusipID).HeaderText("CUSIP").Template("<a href='#' onclick='openCusipDetail(""${CusipID}"", 0, ""${PortfolioID}"")'>${CusipID}</a>").Width(70) column.For(Function(x) x.BuyAmount).HeaderText("Original Face").DataType("number").Format("#,##0.00") column.For(Function(x) x.BuyPrice).HeaderText("Price").DataType("number").Format("#,##0.00") column.For(Function(x) x.SettlementDate).HeaderText("Settlement").DataType("date").Format("MM/dd/yyyy") column.For(Function(x) x.TradeDate).HeaderText("Trade Date").DataType("date").Format("MM/dd/yyyy") column.For(Function(x) x.fsstrDescription).HeaderText("FAS 115") column.For(Function(x) x.amstrDescription).HeaderText("Accounting Method") column.For(Function(x) x.ParValue).HeaderText("Par Value").DataType("number").Format("#,##0.00") column.For(Function(x) x.Principal).HeaderText("Principal").DataType("number").Format("#,##0.00") column.For(Function(x) x.Interest).HeaderText("Interest").DataType("number").Format("#,##0.00") column.For(Function(x) x.NetCostsOrProceeds).HeaderText("Net Costs Or Proceeds").DataType("number").Format("#,##0.00") column.For(Function(x) x.CreatedUser).HeaderText("Created By") column.For(Function(x) x.CreatedDate).HeaderText("Date Created").DataType("date").Format("MM/dd/yyyy") column.For(Function(x) x.Actions).HeaderText("Actions").width(100).Formatter("CheckPermission") column.For(Function(x) x.PortfolioID).hidden(True) End Sub) _ .Features(Sub(features) features.Paging().PageSize(10) End Sub) _ .DataSource(item.oPortfolioOpen) _ .DataBind() _ .Render() ) <script type="text/javascript"> $(function () { var strName = "#grdPortfolioOpen" + @item.oPortfolio.ctintCustomerSetupID.ToString(); $(document).delegate(strName, '@("iggrid" & Infragistics.Web.Mvc.GridClientEvents.HeaderCellRendered.ToLower())', function (evt, ui) { $(ui.th).css("text-align", "center"); $(ui.th).css("text-decoration", "underline"); }); $(document).delegate(strName, '@("iggrid" & Infragistics.Web.Mvc.GridClientEvents.DataRendered.ToLower())', function (evt, ui) { ui.owner.element.find("tr td:nth-child(1)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(2)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(3)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(4)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(5)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(6)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(7)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(8)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(9)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(10)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(11)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(12)").css("text-align", "right"); ui.owner.element.find("tr td:nth-child(13)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(14)").css("text-align", "left"); ui.owner.element.find("tr td:nth-child(15)").css("text-align", "center"); ui.owner.element.find("tr td:nth-child(2)").css("text-decoration", "underline"); ui.owner.element.find("tr td:nth-child(15)").css("text-decoration", "underline"); }); }); function CheckAction(value, row){ return row["CusipID"]; } </script></div>
my error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: BC30456: 'Formatter' is not a member of 'Infragistics.Web.Mvc.GridColumnWrapper(Of TPG.WebPortfolio.Models.sp_webGetPortfolioOpens_Results)'. Source Error:
Line 244: column.For(Function(x) x.CreatedUser).HeaderText("Created By") Line 245: column.For(Function(x) x.CreatedDate).HeaderText("Date Created").DataType("date").Format("MM/dd/yyyy") Line 246: column.For(Function(x) x.Actions).HeaderText("Actions").width(100).Formatter("CheckPermission") Line 247: column.For(Function(x) x.PortfolioID).hidden(True) Line 248: End Sub) _
my data worked fine, but the grid is not working