Preserve links about jquery-bootgrid HOT 16 CLOSED

Not sure how well this works yet, but I ran into the same issue as mentioned above. I am transitioning my pages from using datatables to bootgrid, and did not want to use the formatter options for my hrefs. I took a look at the source code and was able to change the loadRows function line:285 from.text() to .html() and the contents rendered as it should.

original: row[column.id] = column.converter.from(cells.eq(i).text());
new: row[column.id] = column.converter.from(cells.eq(i).html());

from jquery-bootgrid.

I added new data-... attribute that named isitemtemplate and changed the code like this :

$.each(that.columns, function (i, column) {
    if(column.isitemtemplate){ 
        row[column.id] = column.converter.from(cells.eq(i).html());
    } else {
        row[column.id] = column.converter.from(cells.eq(i).text());
    }
});

from jquery-bootgrid.

Currently not, but formatters are a alternative way. I will consider it for a future release.

<table id="selector">
    <tr>
        <th data-column-id="id" data-identifier="true">ID</th>
        <th data-column-id="title" data-formatter="title">Title</th>
        ...
    </tr>
    ...
</table>

<script>
    $(function ()
    {
        $("#selector").bootgrid({
            formatters: {
                "title": function (column, row)
                {
                    return "<a href=\"http://test.com/customer/" + row["id"] + "\">" + row[column.id] + "</a>";
                }
            }
        });
    });
</script>

from jquery-bootgrid.

Thanks for the quick reply. Yes, I know of the formatters from the documentation but it doesn't quit fit my needs or maybe i'm not creative enough.

Does the column / row objects hold the original information so that could be accessed?

from jquery-bootgrid.

If you mean can you do something like...

Notice how I'm using the ID information for the link and then another element contained in the JSON to format the link text. The "row" object contains all the data for that row. Is that what you're after?

<script type="text/javascript">

$("#grid-data").bootgrid({
    ajax: true,

    url: "/model/index.json",
    formatters: {
    "link": function(column, row)
    {
        return '<a href="/model/' + row.id + '">' + row.other_parameter + '</a>';
        }
    }
});

</script>

from jquery-bootgrid.

What i'm aiming for is to have several links in a row, ex:

<tr>
    <td><a href="http://wp-regionh-rpr.dev/gruppe/referencegruppe-for-forebyggelse-i-almen-praksis/">Referencegruppe for forebyggelse i almen praksis</a></td>
    <td><a href="http://wp-regionh-rpr.dev/groupType/raad-udvalg-og-arbejdsgrupper/">Råd, udvalg og arbejdsgrupper</a></td>
</tr>

I couldn't quit figure out how to parse an id on each cell (or if it's even possible), so I went ahead and added a little check to the loadRows() function.

On line 242 in the jquery.bootgrid.js, I modfied the function.

From:

$.each(that.columns, function (i, column) {
    row[column.id] = column.converter.from(cells.eq(i).text());
});

To:

$.each(that.columns, function (i, column) {
    if(cells.eq(i).has('a')){ 
        row[column.id] = column.converter.from(cells.eq(i).html());
    } else {
        row[column.id] = column.converter.from(cells.eq(i).text());
    }
});

I haven't been through all the code, so I'm unaware of potential issues but for now it works like a charm.

Thanks for all your help and for a really great plugin.

from jquery-bootgrid.

+1 :-/

from jquery-bootgrid.

+1

Since the links weren't appearing in the table cell, I tried adding the links to the <tr> tag and I get it's attributes through the formatter, but I couldn't figure it out how.

I needed something like:

<table>
  <thead>
    <tr>
      <th data-column-id="commands" data-formatters="commands">Comandos</th>
    </tr>
  </thead>
  <tbody>
    <tr data-update-url="/update/1/" data-delete-url="/delete/1/">
      <td></td>
    </tr>
  </tbody>
</table>

$('#table').bootgrid({
  formatters: {
    "commands": function (column, row) {
      return "<a href='" + $(some_magic_way_of_getting_tr_element_here).data('update-url') + "'>Editar</a><a href='...'>Remover</a>"
    }
  }
});

Is that possible?

from jquery-bootgrid.

+1
I would also love to be able to preserve links without having to create formatters for each or edit the source code.

from jquery-bootgrid.

+1
I would also love to be able to preserve links. Would we be seeing this feature in the next release?

from jquery-bootgrid.

Any chance of adding this in? Seems like odd functionality to alter the content of the cell in such a drastic manner?

from jquery-bootgrid.

If this cannot be done I'll have to change bootgrid for another, this is not even planned?

from jquery-bootgrid.

For my 2 cents...
add data-formater on your head colomn

<th data-column-id="show" data-formatter="link">Show</th>

Then in the table element

<td><a href="#">{"url":"<url_goes_here>","text":"<text_to_display>"}</a></td>

add formarter in the bootgrid

$(document).ready(function(){
    $("#data-table-basic").bootgrid({
        formatters: {
            "link": function(column, row) {
                var json_data = JSON.parse(row.show);
                return "<a href=\"" + json_data.url + "\">" + json_data.text + "</a>";
            }
        }
    });         
});

from jquery-bootgrid.

Great joannarom, your suggestion was fantatisc, works for me!!

from jquery-bootgrid.

+1 to this, it seems that it's been nearly a year that this request has been in the pipeline and there isn't much additional information about it...it's a bit disheartening that I have to manually edit a common library just to keep it from messing up my existing table HTML so severely.

from jquery-bootgrid.

<thead>
    <tr>
        <th data-column-id="doc" data-formatter="doc" data-column-id="doc">Document</th>
    </tr>
</thead>

<tbody>
<tr>
<td>

<?php echo $someName; ?>###<?php echo $someUrl; ?>

</td>
</tr>
</tbody>

<script type="text/javascript">
  $("#grid-basic").bootgrid({
    formatters: {
      "doc": function (column, row){
        for (var doc in row) {
            if (row.hasOwnProperty(doc)) {
                var str = row.doc.split("###");
                return "<a href=\" "+ str[1] +" \">" + str[0] + "</a>";
            }
        }
      }
    }
  });
</script>

from jquery-bootgrid.