How to render fontawesome on Editor Select Field

How to render fontawesome on Editor Select Field

vincmeistervincmeister Posts: 136Questions: 36Answers: 4

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4
    edited May 2019

    @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/>')
                    );
                } ),
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4

    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

This discussion has been closed.