type column url(link) appendgrid row

[machity]

Hello could help me as I can show a column type url or link inside the grid.

[hkalbertl]

Hi machity,

I guess you are looking for a way to show an anchor for users. You need to define a customType column and set the URL to it. For example,

$('#tblAppendGrid').appendGrid({
  ...
  columns: [{
    name: 'url',
    display: 'URL',
    type: 'custom',
    customBuilder: function(parent, idPrefix, name, uniqueIndex) {
      // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
      var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
      // Create a hidden input for storing URL
      var $ctrl = $('<input>', {
        type: 'hidden',
        id: ctrlId,
        name: ctrlId
      }).appendTo(parent);
      // Create an anchor for user
      $('<a></a>').attr({
        id: ctrlId + '_Link',
        target: '_blank'
      }).text('Your anchor text here').appendTo(parent);
      // Finally, return the hidden control
      return $ctrl.get(0);
    },
    customGetter: function(idPrefix, name, uniqueIndex) {
      // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
      var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
      return $('#' + ctrlId).val();
    },
    customSetter: function(idPrefix, name, uniqueIndex, value) {
      // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
      var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
      // Set the value to hidden
      $('#' + ctrlId).val(value);
      // Set the URL to anchor
      $('#' + ctrlId + '_Link').attr('href', value);
    }
  }],
  initData: [{
    'foo': 'Yahoo!',
    'url': 'https://www.yahoo.com/'
  }, {
    'foo': 'Google',
    'url': 'https://www.google.com/'
  }, {
    'foo': 'Bing',
    'url': 'https://www.bing.com/'
  }]
});