Call javascript in Grid Template

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 Pavlov
Infragistics, Inc.

Thanks for the response.  This seems to be what I am looking for. I am using the grid in a MVC application.  Can you tell me how this should be written in that scenario?

For instance, I have the following just to test that the javascript function testIG gets called.  But it does not and I am not sure of the correct syntax as I would think it would be correct following the example you provided above.

column.Unbound("Download").HeaderText("Download").Formula("function(data,grid){return testIG(true)}");

I actually figured out after further investigation using your answer by doing the following.

Thanks for your help,

column.Unbound("Download").Formula("testIG");

<script>

function testIG(data,grid)

{

return data["DocumentId"];

}

</script>

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.

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

please!

it not working

my code:

 <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

Hello Cuong Tran,

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.

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

thanks for helps,

if i use 'FormatterFunction', how can i get other column of gridview??

because it recieve 1 parameter

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:

$.ui.igGrid.version

Thanks in advance,
Martin Pavlov
Infragistics, Inc. 

i use 14.1 version

thanks for help,

i use Unbound column and .formula function, it done!!

thanks you so much!!