This is a migrated thread and some comments may be shown as answers.

Calling javascript method with parameters in clienttemplate not working

6 Answers 261 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Alpesh
Top achievements
Rank 1
Alpesh asked on 20 Sep 2010, 08:10 PM
Hi,

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

Sort by
0
Jigar
Top achievements
Rank 1
answered on 20 Sep 2010, 08:29 PM
Hi Alpesh,

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.
0
Alpesh
Top achievements
Rank 1
answered on 20 Sep 2010, 09:33 PM
Hi 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
0
Jigar
Top achievements
Rank 1
answered on 21 Sep 2010, 07:56 AM
Hi 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
0
Alpesh
Top achievements
Rank 1
answered on 21 Sep 2010, 03:43 PM
I wrote it this way and it worked -

 

 

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
0
Murali
Top achievements
Rank 1
answered on 08 Nov 2011, 01:08 PM
:-)
0
NELLAIKUMAR
Top achievements
Rank 1
answered on 24 Aug 2012, 01:25 PM
Thanks Alpesh, it works as you mentioned.

Saved my lot of efforts..Kudos.
Tags
Grid
Asked by
Alpesh
Top achievements
Rank 1
Answers by
Jigar
Top achievements
Rank 1
Alpesh
Top achievements
Rank 1
Murali
Top achievements
Rank 1
NELLAIKUMAR
Top achievements
Rank 1
Share this question
or