How to include Quotation marks around template column value.

[Satheesh Kuamar]

Hello Team

I am trying to have template column where i have icon and on click i would like to call a dialog window. by calling opendialog function. and i want to pass a primay key value as parameter to the function which is an string. i am trying to use column template with expression but its not taking it properly.

My code as bellow 

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

       <div onclick='ShowOrderDetails("${OrderNumber}")'>

           <span><i style="font-size: 15px;color: #0b56b2;cursor:pointer" class="fa fa-file-text" aria-hidden="true" title="view"></i></span>

       </div>

</script>

but out put comes as bellow. i want to render the value as "ShowOrderDetails('cm1037830')" how to make it using template with expression.

[Rajapandi Ravi]

Hi Satheesh,

Greetings from Syncfusion support

We have checked your query and we could see on clicking the Div element you like to pass the value as a parameter. Based on your query we have prepared a sample and achieved your requirement by binding the click event in the dataBound event of Grid. So, we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

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

 

    <div id="columntemplate">

 

        <span><i style="font-size: 15px;color: #0b56b2;cursor:pointer" class="fas fa-plus-square" aria-hidden="true" title="view"></i></span>

 

    </div>

 

   

 

</script>

 

<script>

    function dataBound(args) { //dataBound event of Grid

        var divelement = document.querySelectorAll('#columntemplate'); //Get the Div tag elements

        for (var i = 0; i < divelement.length; i++) {  //bind the click event for Div elements

            divelement[i].addEventListener('click', function (args) {

                var grid = document.getElementById('Grid').ej2_instances[0];

                var rowDetails = grid.getRowInfo(args.currentTarget.closest('tr'));   //get the targeted row details using getRowInfo method of Grid

                console.log(rowDetails);    //using the rowdetails you can access the all field values for the respected row. You can pass the primarykey value from here to perform your actions as you want

            });

        }

 

    }

</script>

 

Sample:

API: https://ej2.syncfusion.com/documentation/api/grid/#databound

Regards,

Rajapandi R

Attachment: 184129_c2f4a9b8.zip