Pass string parameter to Column Template

[CHOO WAI PAN]

I have a column template looks like this:

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

    ${if (validToDate)}

    <button id="activatePrice" class="btn btn-secondary w-50 text-success bg-white">Activate</button>

    ${else}

    <button id="cancelPrice" class="btn btn-danger w-50 text-danger bg-white" onclick="cancelPrice('${protectedPriceId}')"

>Cancel</button>

    ${/if}

</script>

The ${protectedPriceId} is a string that need to pass to the cancelPrice function, but if i wrap it in single quote, it will show javascript error Unexpected end of input, if i dont wrap it then another javascript error saying the param 

[Rajapandi Ravi]

Hi Choo,

Greetings from Syncfusion support

After validating your query, we could see that you like to pass the field value to the button click function. Based on your query we have prepared a sample and we have passed the field value to the button click function it was passed successfully, and it was working fine at our end. Please refer the below code example and sample for more information.

 

<div class="control-section">

    <br />

    <br />

    <br />

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar=toolbarItems allowPaging="true">

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

        <e-grid-columns>

           .  .  .  .  .  .  .

           .  .  .  .  .  .  .

        </e-grid-columns>

    </ejs-grid>

</div>

 

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

    @*//passing the EmployeeID value to the button click function*@

    <button id="cancelPrice" class="btn btn-danger w-50 text-danger bg-white" onclick="cancelPrice(${EmployeeID})">Cancel</button>

</script>

 

<script>

    function cancelPrice(args) {

        console.log(args);

    }

</script>

 

Sample:

Screenshot:

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample.

Regards,

Rajapandi R

Attachment: 186047sample_d567303f.zip

[Glenn Hansen]

Hi Syncfusion, the solution provided in your reply does not work for the problem that was actually reported. Why? Because their parameter passed to the onclick function is a string and not an integer. Their code: onclick="cancelPrice('${protectedPriceId}')"

The root cause of the problem is in the EJ2 grid template processor/parser.

We know this, because it worked in the EJ1 version of the grid template processor/parser, i.e. in an EJ1 grid, the single quotes around a string parameter, inside of a double-quoted onclick function, worked correctly.

EJ1 Example works correctly:

template code: onclick="cancelPrice('{{:protectedPriceId}}')"

generated code: onclick="cancelPrice('P-01378')"

EJ2 Example does NOT work correctly:

template code: onclick="cancelPrice('${protectedPriceId}')"

generated code: onclick="cancelPrice(" P-01378')'

NOTE about the EJ2 generated code: The single quotes are at the end. 

The EJ2 grid template processor/parser is changing the first single-quote, within the double-quote, to a double-quote, but it should not. 

It is also changing the last double-quote to a single-quote, but it should not. 

It should be a simple fix.

[Kishore Muthukrishnan]

Hi Glenn Hansen,

We understand that you like to pass the field value to the button click function and facing error Unexpected end of input. To resolve this, wrap it inside the Backtick(` `). Backticks create a template literal, which safely handles values with quotes or special characters.

 

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

                

                <button id="cancelPrice" class="btn btn-danger w-50 text-danger bg-white" 

onclick="cancelPrice(`${CustomerName}`)">Cancel</button>

                

                </script>

Regards,

Kishore Muthukrishnan