Hi,
I need to add hyperlinks on the data that I am displaying in iggrid.
I have this code and it's not working.
@(Html.Infragistics().Grid(Model).ID("grid3") .Columns(column => { column.For(x => x.Id).DataType("string").Template("${Id}").HeaderText("Customer ID"); column.For(x => x.ProductName).DataType("string").HeaderText("Name"); column.For(x => x.CategoryID).DataType("string").HeaderText("Cat"); column.For(x => x.SupplierID).DataType("string").HeaderText("sup"); }) .Features(features => { features.Paging().VisiblePageCount(5).ShowPageSizeDropDown(true).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Id").AllowSorting(true); }); }) .Width("100%") .Height("350px") .DataBind() .Render() )
What am I doing wrong?
Thanks.
Hello Jessica,
Thank you for posting in our forums.
Are you trying to add hyperlinks in "ID" column?
You are on the right way using the template.
Just need to add the hyperlink :
{ headerText: "Product Name", key: "Name", dataType: "string", template:"<a href='www.google.com/search > ${Name} </a>" }
OR in the chaining as is your case :
column.For(x => x.Id).DataType("string").Template("<a href='www.google.com/search ${Id} </a>" ).HeaderText("Customer ID");
You can take a look at the help documentation and samples:
https://www.igniteui.com/help/iggrid-column-template
https://www.igniteui.com/grid/column-template
Hope this helps.
Thanks for answering!
I tried to use that code
@(Html.Infragistics().Grid(Model).ID("grid3") .Columns(column => { column.For(x => x.Id).DataType("string").Template("<a href='http://www.google.com/search?q=${Id}'> ${Id} </a>").HeaderText("Customer ID"); column.For(x => x.ProductName).DataType("string").HeaderText("Name"); column.For(x => x.CategoryID).DataType("string").HeaderText("Cat"); column.For(x => x.SupplierID).DataType("string").HeaderText("sup"); }) .Features(features => { features.Paging().VisiblePageCount(5).ShowPageSizeDropDown(true).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Id").AllowSorting(true); }); }) .Width("100%") .Height("350px") .DataBind() .Render() )
But it still won't put hyperlinks on my data id's
I want the Id's to be links to another page.
Which version/build of our Jquery components do you use?
Which browser version did you encounter the issue with?
On my side after clicking on the cell text the page is redirected to the set link.
What do you mean by "it still won't put hyperlinks on my data id's" ?
What value do you pass as Id and where do you expect to be redirected after clicking the cell?
Hope hearing from you.
Thank you for the code snippet.
If I trust on the naming convention introduced in v12.1, you are using v11.2 or previous because of the usage of the ig.ui.min.js file ( and other css files)
Since v12.1 we have new names of JS and CSS files
https://www.igniteui.com/help/deployment-guide-javascript-files
Also I see that you are using Jquery template. Since v12.1 we have our own Templating engine
https://www.igniteui.com/help/igtemplating-overview
You can use the Loader for easier loading of the JS and CSS resources.
https://www.igniteui.com/help/using-infragistics-loader
I strongly recommend you upgrading to v12.1 or later.
Let me know about the results.
Sorry, I realized I did not answer all your questions.
I'm using IE and I'm basically passing [1,2,3,4] as Id's. I set the link to google so I expected to be directed to google when I click on 1, 2, 3, or 4 but they do not display as links.
I believe it's 2012.1
I basically want links inside my grid. So instead of having the customer ID column display 1,2,3,4 just as text, I want 1,2,3,4 to be links. But with my code, it only displays as plain text, not links.
I have these in my _Layout.cshtml. I dont know if it matters. Thanks!
<link href="@Url.Content("~/Content/IG/ig/jquery.ui.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IG/base/ig.ui.grid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IG/base/ig.ui.shared.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IG/base/ig.ui.editors.css")" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>