Server-side scenario > Select2 dataArray > templateResult/-Selection icon

[Orca11]

Hi Daniel,
first, thanks for providing and supporting this plugin!
This is less an issue, than a feature request.

Background:
1.) I´am in server-side paged scenario using the 0.8.9.beta.21 version.
2.) I am disaplaying a bunch of records that got an status icon (red, blue, green ball).
3.) In order to save column width I decided to choose a Select2 filterdropdown reflecting 4 icons to filter from for the users (grey = all records, green = records in status green, red... and so forth)

To solve that, I had to do small changes to source. It could also be, that I missed something in usage. But for now, it solves my problem, but doesn´t propably play with all usages of the plugin.

1. In Line 2338 I commentet the injected default option with value=-1 out. The grey icon is for that purpose.
2. In front of Line 2370 I rescued the 'column_data' in another variable in order to append the server given 'original' data array for the select2 to the 'columnObj.select_type_options' => columnObj.select_type_options.data = rescued_column_data; before the initializeSelectPlugin() functio is called at line 2400. This triggers the select2 templateResult function of the select2 (see Tempalting example https://select2.github.io/examples.html) where I then be able to return a span/img html snippet for the text value shown and everything works fine.

In summary: This is perhaps a feature request to support Selet2´s static data Array using templating.

Best wishes
Orca11

[vedmack]

Hi,

So eventualy you are asking for a way to feed yadcf select filter with your own string containing the list of <option></option> tags?

[Orca11]

Hi,
this would be sufficient too, if Html is rendered in the select dropdown and the default option is configurable.

I used select2 instead the normal select because HTML images weren´t shown respectively rendered.

At this time my code for the adapted yadcf select2 ColumnDef looks like this:

function getColumnImageDropDownDef(columnNumber) {
    return {
        column_number: columnNumber,
        select_type: 'select2',
        filter_default_label: '',
        sort_as: 'numerically',
        sort_order: 'asc',
        select_type_options: {
            width: '28px',
            multiple: false,
            escapeMarkup: function(m) {                
                return m; 
            },
            createTag: function() { return null; },
            allowClear: false,
            templateResult: formatState,
            templateSelection: formatState,
            minimumResultsForSearch: -1
        }
    }
};

function formatState(state) {
    if (!state.id) { return state.id; }
    var path = window.rootUrl + 'res/images/status_' + state.id + '.png';
    var $state = $('<span><img src="'+ path +'" style="width: 8px;" class="img-flag" /></span>');
    return $state;
};

I tried to pass the static data array to the yadcf colDef and to the select_type_options, but that didn´t worked since the static data array of course came from server. They were rendered double or yadcf took its fallback to get the html from current datatable page only in server-side scenario (what is not sufficient) and the current selected option was always overruled by the default option value -1 injected by yadcf... Perhaps I overlooked something...

Initial Result (no filter applied):

Filter applied result:

[vedmack]

Added data_as_is attribute (in 0.8.9.beta.24) to use when you want to define your own for the filter,
use it like this:

{
    column_number : 0, 
    data: '<option>One</option><option>Two</option>',
    data_as_is: true
}