How to render fontawesome on Editor Select Field

vincmeister

Hi Allan,
I want to create rating using fontawesome fa-star

I'm using render on php field option, but not working

Field::inst( 'kpi_tdkpidetaildata.rating1' )
            ->options( function () {
                return array(
                    array( 'value' => 1, 'label' => '<i class="fa fa-star"><i/>' ),
                    array( 'value' => 2, 'label' => '<i class="fa fa-star"><i/><i class="fa fa-star"><i/>' ),
                    array( 'value' => 3, 'label' => <i class="fa fa-star"><i/><i class="fa fa-star"><i/><i class="fa fa-star"><i/>)
                );
            } ),

and also put

entityDecode: false 

on the script

but the icon won't rendered
Please advise, thank you

kthorngren

I'm not familiar with PHP but it looks like you might be missing a set of single quotes around the i tag for option 3.

Kevin

vincmeister

@kthorngren
sorry typo when i post here,
real code not

Field::inst( 'kpi_tdkpidetaildata.rating1' )
            ->options( function () {
                return array(
                    array( 'value' => 1, 'label' => '<i class="fa fa-star"><i/>' ),
                    array( 'value' => 2, 'label' => '<i class="fa fa-star"><i/><i class="fa fa-star"><i/>' ),
                    array( 'value' => 3, 'label' => '<i class="fa fa-star"><i/><i class="fa fa-star"><i/><i class="fa fa-star"><i/>')
                );
            } ),

allan

Does that work in a normal select list? I've just very quickly tried a simple i here and it doesn't make any difference to the output.

I'm not sure if you can have CSS background images for an option? Have you used that else where?

Allan

vincmeister

Hi Allan,
Thanks for the response. I tried something like this, but not working

<select class="form-control select2" id="" name="select" style="width: 100%;">
   <option><i class="fa fa-star"></i></option>
</select>

Plan B, custom plugins,

// rating_star
        (function ($, DataTable) {
 
            if (!DataTable.ext.editorFields) {
                DataTable.ext.editorFields = {};
            }
 
            var Editor = DataTable.Editor;
            var _fieldTypes = DataTable.ext.editorFields;
 
            _fieldTypes.rating_star = {
                create: function (conf) {
                    var that = this;
                    conf._enabled = true;
                    conf._input = $(
                        '<select id="select_rating">' +
                            '<option value="1" > &#xf005; </option>' +
                            '<option value="2"> &#xf005; &#xf005;</option>' +
                            '<option value="3"> &#xf005; &#xf005; &#xf005;</option>' +
                            '<option value="4"> &#xf005; &#xf005; &#xf005; &#xf005;</option>' +
                            '<option value="5"> &#xf005; &#xf005; &#xf005; &#xf005; &#xf005;</option>' +
                        '</select>'
                    );
                return conf._input;
                },
 
                get: function (conf) {
                    var val = conf._input.val();
                    return val === null ?
                        0 :
                        val;
                },
 
                set: function (conf, val) {
                    console.log(val);
                    conf._input.val( val ).trigger( 'change', {editor: true} );
                },
                
                enable: function ( conf ) {
                    $(conf._input).removeAttr( 'disabled' );
                },

                disable: function ( conf ) {
                    $(conf._input).attr( 'disabled', 'disabled' );
                },
            };
        })(jQuery, jQuery.fn.dataTable);

it works
thank you

Danny