Search Panes - customize the label rendering (dynamic labels)

BartoszJarmuz

Hello,
I saw SearchPanes extension which looks absolutely awesome - however, I am struggling with an issue to make it work properly in my ASP NET Core MVC App.

I have a datatable that is rendered from a model by razor (i.e. without ajax). Some of the cells of the datatable contain a content like that:

<span class="badge badge-primary">SomeText</span>

These are bootstrap badges. Unfortunately, this does not render properly as an option in the search pane label. I wonder whether it is possible to dynamically render the labels (e.g. extract only text from the span etc).

So far I only see a way to predefine label text which is not optimal...

Kind regards

BartoszJarmuz

This is what gets rendered from a cell which contains a span with badge class:
<span class="badge badge-prima...</span><span class=" pill="" badge="" badge-pill="" badge-secondary"="">2</span>

Actually, this seems to be caused by the data lengthLimit option default value. It seems to be counting markup as part of the data, so it trims it. WHen increased the number, it renders ok...

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

BartoszJarmuz

Hi Colin - thanks
There you go:
http://live.datatables.net/toraqudo/3/edit?html,js,output

If you increase the data length, the searchpanes will show labels properly.
Thanks
Bartosz

colin

Thanks for test case. I'm not sure what I'm looking for. When you say increase the data length, do you mean adding more rows to the table?

Colin

BartoszJarmuz

No no, I mean the dataLength property of search panes. Notice that the labels in the search pane are not rendered properly (it should be EXE and DLL). I believe this is because the data length includes the HTML markup - see my post right under the question:)

sandy

Hi @BartoszJarmuz

Yes you are right - the searchPanes.dataLength property is including the HTML markup.

I will make an issue for this and see what we can come up with. In the mean time the cleanest fix for you is probably to set the searchPanes.dataLength property to false. Then it won't cut anything down. See the changes I made to your example

Hope this helps, and will update back here on that issue.

Cheers,
Sandy

allan

Hi,

Sandy and I have just been triaging bugs for SearchPanes 1.1 and looking at this one. The trouble with the ellipsis excluding the HTML is that it would be really easy to just truncate the string, but we need to consider how to make the mark up still valid. For example, you wouldn't want to chop the closing tag off an a tag.

The way to address that would be to parse the HTML, but that would be really slow and also potentially quite complicated.

The best solution I can think of at the moment would be to use table-layout: fixed and then use the browser's ability to do text-overflow: ellipsis. Thinking abou it, we might even look at making that built into SearchPanes.

Allan