Line break in cell jquery-bootgrid

Question

There is a way to make visible a <br> inside a cell using jquery-bootgrid? Because the render of <br> is not visible.

score 2 · Accepted Answer · answered May 05 '16 at 14:56

What I understand is that you want to add a line break in your data, something like this,

In the features column I am passing an array and it displays each Item in a separate row using <br>

For this you can create a custom converter,

http://www.jquery-bootgrid.com/Documentation#converters

You can create the converter when initializing the BootGrid Table

var dt = $('#myTable').bootgrid({
  //.......... Other Options
  converters: {
    listDisplay: {
      from: function(value) {
        return value;
      },
      to: function(value) {

     // Here you can customise value - I have an Array which I join using <br>

        value.sort();
        value = value.join("<br/>");
        return value;
      }
    }
  }
});

Then all you have to do in the Table HTML is set the data-type on the Column heading

    <table  id="myTable">
      <thead>
        <tr>
          <th data-column-id="Id" data-visible="false" data-identifier="true" data-type="numeric">Id</th>

          <th data-column-id="SelectedFeaturesNames" data-type="listDisplay">Features</th>

<!-- Note the data-type on the Features <th> is listDisplay -->

        </tr>
      </thead>
      <tbody></tbody>
    </table>

Where do you send the array to the function? inside the `` tag? Thanks a lot for the answer — Jeremias Araujo, May 09 '16 at 13:29
@JeremiasAraujo are you using Ajax to load the data? I am loading the data via Ajax and the Array is inside the Json Object — Dawood Awan, May 09 '16 at 13:35
I did it! Not, im not using Ajax. The data is loaded using PHP (laravel blade). I added `value = JSON.parse(value);` before `value.sort();` to convert json received to js array. — Jeremias Araujo, May 09 '16 at 14:56

score 0 · Answer 2 · answered May 09 '16 at 16:06

Did it work using that method?

Yes @Dawood Awan ! It worked for me

PHP:

<td>
    <?php
        $test = ['b', 'a', 'c'];
        echo json_encode($test);
    ?>
</td>

JS:

to: function(value) {
    value = JSON.parse(value); //convert received json to js array.
    value.sort();
    value = value.join("<br/>");
    return value;
}

Line break in cell jquery-bootgrid

2 Answers2