3

I'm using Flexigrid to display paginated data and it works very well. Now I need to add links to all the rows ("edit", "view", "delete") and honestly I have no idea how to proceed with it. Is there something that I could use right out of the box?

The basic idea is to have an additional column with small icons for those 3 links and not to have the toolbar at the top.

Any ideas?

Matthias Hryniszak
  • 3,099
  • 3
  • 36
  • 51

3 Answers3

5

I've got it figured out :)

The trick is to simply put the link directly in the data returned by script. For example this will create a row with the first column containing the links in question:

List<Object> rows = new List<Object>();
foreach (var item in results) {
rows.Add(new { 
    id = item.ID,
    cell = new string[] { 
        String.Format("<a href='/Account/View/{0}'>view</a>&nbsp;<a href='/Account/Edit/{0}'>edit</a>", item.ID), 
        item.Name, 
        item.Phone 
    }
}
var result = new { page = page, total = rowcount, rows = rows };
return Json(result);
Matthias Hryniszak
  • 3,099
  • 3
  • 36
  • 51
2

I did not like the fact that the "presenter" which builds the grid's data injects markup. I added this little extension which is run on the "onSuccess" event. It transforms the default column representation into a link.

(function ($) {
    $.fn.flexLinkColumn = function (colIndex, url) {
        if (colIndex === undefined || url === undefined)
            throw "flexLinkColumn requires colIndex and url";

        if ($(this).closest('div.flexigrid').length === 0)
            throw "flexiLinkColumn only operates on flexilink grids.";

        $(this).find('tr').each(function (index, tr) {
            var rowId = $(tr).attr('id');
            var itemId = rowId.substring(3);
            var itemUrl = url + (itemId ? "/" + itemId : "");

            var div = $(tr).find('td').eq(colIndex).find('div');
            var text = $(div).text();
            $(div).html('<a href="' + itemUrl + '">' + text + '</a>');
        });
    }
})(jQuery);
Martin.
  • 10,494
  • 3
  • 42
  • 68
-1

For Rails:

Add like below

return_data[:rows] = @countries.collect{|l| { :id => l.id, :cell=>[ 
'%a :href=>'javascript:void(0);'#{l.client_cont_person}', // normal html link

l.completed_on,l.created_by,l.project_id,l.status
]}}
animuson
  • 53,861
  • 28
  • 137
  • 147
SaraVanaN
  • 319
  • 1
  • 12