I am creating columntemplate in telerik MVC grid with below code-
columns.Bound(a => a.Id).ClientTemplate("<a onclick='viewDetails('" + "'<#= Id #>'" + "');' href='javascript:'>View</a>").Title("View");
and this is my function in javascript -
function viewDetails(activityId) {
//....Do stuff here...
}
Now the issue that i am facing is, the javascript function viewDetails is not getting called and on page load i am getting javascript error and the description says "syntax error: expected ("
When i remove the method parameter and instead use rel attribute like -
columns.Bound(a => a.Id).ClientTemplate("<a onclick='viewDetails();' rel='<#= Id #>' href='javascript:'>View</a>").Title("View");
and write my method like -
function viewDetails() {
var activityId = $(this).attr('rel'); //----- activityId is always null
//....Do stuff here...
}
The method gets called but activityId is always null in the method
Can anyone please let me know how can i pass my row id from grid column template to the javascript method?
Thanks
Alpesh
6 Answers, 1 is accepted
Try this, this may help
columns.Bound(
Function
(o) o.accept).Title(
"IsAccepted"
).ClientTemplate(
"<input type='button' class='t-button t-state-default' value='Accept' onclick=\""
OnAcceptedButtonClick(<#= id#>)\
""
/>")
Javascript
function
OnAcceptedButtonClick(id){
alert(id);
}
Regards,
Jigar.
Thanks for the quick response.
But i am really not able to understand what you are trying to say.
i copied the exact code that you gave me -
columns.Bound(function(a) a.Id).Title(
"IsAccepted").ClientTemplate("<input type='button' class='t-button t-state-default' value='Accept' onclick=\""OnAcceptedButtonClick(<#= Id #>)\""/>")
but first of all, it is not able to understand "function(a)" (while implementing my code marks it as error saying - the name function doesnot exist in current context. Still i tried to execute the code and it threw run time error saying - error CS1040: Preprocessor directives must appear as the first non-whitespace character on a line)
I am not exactly sure what you are trying to do here. For more information here is my complete code for the grid.
<%
= Html.Telerik().Grid<Activity>().Name("Task").DataKeys(keys =>{keys.Add(p => p.Id);})
.Columns(columns =>
{
columns.Bound(a => a.Type).Width(100);
columns.Bound(a => a.Category);
columns.Bound(a => a.Name).Width(100);
columns.Bound(a => a.Location);
columns.Bound(a => a.Due).Format(
"{0:MM/dd/yyyy}").Width(120);
columns.Bound(a => a.Notes);
columns.Bound(a => a.Repeats);
columns.Bound(a => a.Id).ClientTemplate(
"<a href='Complete/<#= Id #>'>Complete</a>").Title("Complete");
columns.Bound(a => a.Id).ClientTemplate(
"<a class='more' rel='<#= Id #>'>More</a>").Title("More");
columns.Bound(a => a.Id).ClientTemplate(
"<a class='edit' rel='<#= Id #>'>Edit</a>").Title("Edit");
columns.Bound(function(a) a.Id).Title(
"IsAccepted").ClientTemplate("<input type='button' class='t-button t-state-default' value='Accept' onclick=\""openAddEditFieldDialog(<#= Id #>)\""/>")
//columns.Bound(a => a.Id).ClientTemplate("<a onclick=viewDetails(<#= a.Id %>);' href='javascript:'>View</a>").Title("View");
}).DataBinding(dataBinding => dataBinding.Ajax().Select("_Details", "Task"))
.Scrollable()
.Sortable()
.Pageable()
.Filterable()
.Groupable() %>
the commented line is the one i am trying to make it work. And the line above that is the one that you gave me.
Any help from your side will be much appreciated.
Thanks
Alpesh
That works for me absolutely fine. I suggest please use only the statement i sent you in grid, and then try it. Please define the function which you are going to use for input button onclick.
Regards,
Jigar
columns.Bound(a => a.Id).Title(
"Edit").ClientTemplate("<a href='javascript:' onclick=\"OnAcceptedButtonClick('<#= Id#>')\" >Edit</a>");
The problem was with the escape sequence. Thanks for your help
Saved my lot of efforts..Kudos.