Column Template using JavaScript function with string parameter

[Rodrigo]

Hi, i'm using Grid widget with a column template, on such template i'm using a JavaScript function to make a call. When using an Integer parameter works fine, but fails when using a string parameter.

Column Template:

Rendered HTML:

Wich when clicked, shows error.

Thank you.

[Joseph Christ Nithin Issack]

Hi Rodrigo,

  Greetings from Syncfusion support.

  Before proceeding to the solution, we would like you to share the below details.

• Complete grid rendering code along with the value you are passing in the parameter and the details of the click event handler
• Simple sample to reproduce the issue.
• Video demo of the issue you are facing.
• Syncfusion package version.

Regards,

Joseph I.

[Rodrigo]

Hi, i'm attaching code. 

Added two columns: green one working fine with an integer parameter, yellow one not working with a string parameter:

Here's the error:

Specific lines of code to check:

Package version: 24.2.3

Thank you.

Attachment: SyncfusionMvcApplication2_fb944189.zip

[Joseph Christ Nithin Issack]

Hi Rodrigo,

   Based on your query, you want to send string parameters to the click event of the button in a template column. We have achieved your requirement using the below method.

  Please refer the below code example:

 

<script id="OrderIDTemplate" type="text/x-template">

    <button class="btn btn-sm btn-success" onclick="WorkingFunction(${ OrderID });" >${OrderID}</button>

</script>

 

<script id="CustomerIDTemplate" type="text/x-template">

    <button class="btn btn-sm btn-warning" onclick="NotWorkingFunction(${getArgs(CustomerID)});">${CustomerID}</button>

</script>

 

<script type="text/javascript" >

    function WorkingFunction(id) {

        alert(id);

    }

 

    function getArgs(args) {

        return JSON.stringify(args);

    }

 

    function NotWorkingFunction(id) {

        alert(id);

    }

</script>

 

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.