How to pass string value to javascript function on grid using ClientTemplate? (MVC)

8 posts, 1 answers
  1. koa
    koa avatar
    2 posts
    Member since:
    Apr 2011

    Posted 06 Dec 2012 Link to this post

    I am attempting to use the code below to call a javascript function for each grid element, but i am having trouble rendering the required quotes to deal with the function parameters:

    This code:
    columns.Bound(p => p.OrderName).ClientTemplate(
        "<a onclick='showOrderDetail('#= OrderName #')' href='\\#'>#= OrderName #</a>"
    ).Title("Order Name").Width(150);
                                                    


    renders incorrectly as shown below with a mix of a double quote and single quote on the parameter

    <a onclick="showOrderDetail(" OrderXYZ')'="" href="#">OrderXYZ</a>


    Any ideas on how to get the proper single quotes around this variable?
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Dec 2012 Link to this post

    Hi,

     Try using escaped double quotes instead:

    "<a onclick=\"showOrderDetail('#= OrderName #')\" href='\\#'>#= OrderName #</a>"

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 18 Nov 2014 Link to this post

    Hi

    This works perfectly fine when the string does not have any special characters.
    Say for instance, the OrderName = D'Sample OrderName, it fails. How do we escape the special characters in this case so that it passes the actual values to the jQuery Function.

    Thanks.
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Nov 2014 Link to this post

    Hello,

    In that case you will need a helper function to escape single and double quotes. Here is a demo: http://dojo.telerik.com/@korchev/oDIH

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 20 Nov 2014 in reply to Atanas Korchev Link to this post

    Thanks Atanas. That works.

  6. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 20 Nov 2014 in reply to Atanas Korchev Link to this post

    Thanks Atanas. That works.

  7. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 17 Aug 2017 Link to this post

    Hello, I have a similar situation and I'm using the code below:

    columns.Bound(p => p.websiteUrl).Title("Website URL").ClientTemplate("<a onclick=\"Products_Read('#= websiteUrl #')\" href='\\#'>#= websiteUrl #</a>").;

    But the link doesn't work. Can someone please tell me how to get a working url when clicked on it?  

    It displays a hyperlink work which doesn't.

    Thanks in advance! 

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 21 Aug 2017 Link to this post

    Hi Veda,

    Please check out the article below that illustrates how you can add action link to the Grid ClientTemplate. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top