Adding HTML Links and Grabbing Checked Order IDs

[Chris Arndt]

Using syncfusion version 20.2.45

I have an example here https://stackblitz.com/edit/tbgsjf-tmwmpf?file=index.js,index.html

I have 2 questions.

1. I've added an Edit column and wish to display HTML links where the link includes a value from another cell. How do I display the HTML link? Right now the HTML code is displaying.
2. I have added checkbox column. I would like to grab the checked Order IDs. How do I go about that?

Thank you,

Chris

[Rajapandi Ravi]

Hi Chris,

Greetings from Syncfusion support

We have checked your shared information and we could see that you like to display the URL links. You can achieve your requirement by using our columnTemplate feature. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

Index.js

 

var grid = new ej.grids.Grid({

  dataSource: window.orderData.splice(0, 11),

  allowPaging: true,

  pageSettings: { pageSize: 6 },

  columns: [

    { type: 'checkbox', width: 50 },

    .  .  .  .  .  .  .  .  .

    .  .  .  .  .  .  .  .  .

    {

      field: 'editLink',

      headerText: 'Edit',

      width: 350,

      template: '#template'

    },

  ],

});

grid.appendTo('#Grid');

 

index.html

 

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

            <div class="image">

              <a rel='nofollow' href="https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template/">Edit</a>

            </div>

        </script>

Sample: https://stackblitz.com/edit/tbgsjf-s8qgwj?file=index.js,index.html

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template/

Screenshot:

And in your query, you like to get the selected records OrderID, you can get the selected records by invoking the getSelectedRecords() method of Grid. Please refer the below code example and sample for more information.

Index.js

 

function getPersIds(e) {

  var selectedrecords = grid.getSelectedRecords();

  var arr = [];

  selectedrecords.filter(function (e) {

    return arr.push(e.OrderID)

  });

  console.log(arr);

}

Sample: https://stackblitz.com/edit/tbgsjf-hexcbd?file=index.js,index.html

Regards,

Rajapandi R

[Chris Arndt]

Hi Rajapandi,

Thank you for the link to document (columnTemplate). I have added another column called "Delete" and updated the code in stackblitz example (https://stackblitz.com/edit/tbgsjf-yzu9zp?file=index.js,index.html). Is there a way to add the Order ID to each Delete link?

Thank you for your code in grabbing the selected Order IDs. I have added the code example to my Rails application and it works!!! Thank you.

Chris

[Rajapandi Ravi]

Hi Chris,

Query#: Thank you for your code in grabbing the selected Order IDs

We are happy to hear that you provided solution was helpful to resolve the problem.

Query#: Is there a way to add the Order ID to each Delete link?

We have checked your query and we could see that you like to display the OrderID value in the anchor tag link. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

Index.js

var grid = new ej.grids.Grid({

  dataSource: window.orderData.splice(0, 11),

  allowPaging: true,

  pageSettings: { pageSize: 6 },

  columns: [

    {

      headerText: 'Delete',

      width: 150,

      template: '#deletetemplate',

    },

  ],

});

Index.html

 

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

          <div class="image">

            <a rel='nofollow' href="https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template/">${OrderID}</a>

          </div>

      </script>

Sample: https://stackblitz.com/edit/tbgsjf-vz2nsh?file=index.js,index.html

Screenshot:

Regards,

Rajapandi R