Add a class name to editor control.

davykiash

Hello,

I would like to add class name to my field type. For example when it comes to my "buttons" in the datatable property this works well

"buttons": [
    { extend: "create"  , editor: editor ,"className": "btn btn-primary"},
    { extend: "edit"    , editor: editor ,"className": "btn btn-info"},
    { extend: "remove"  , editor: editor }
]

I would like to achieve the same effect with my editor controls something almost similar to this.

fields: [ 
{
    label: "My Label:",
    name: "My Name",
    type: "select",
    options: [{ label: "home", value: 500},{label: "test2", value: 501}],
    className: "My-CSS-Class-Name",
},                          
]

However for some reason the CSS class name is not being effected. Anything I may be missing?

allan

The fields.className option sets the class name for the field's container div. If that isn't working for you, could you give me a link to the page showing the issue please?

Thanks,
Allan

davykiash

I have just inspected the dom and you are right. The class is being added to the
-div Tag.

What I wanted to achieve was to have the styling added to the -select Tag.

Is this possible?

allan

Yes - use field().input() to get the select element and then use $().addClass() to add a class to it.

Allan

davykiash

@allan Am still getting my head around using the datatables. A code sample showing how to achieve the above answer would be very help full.

allan

editor.field('myField').input().addClass('myClass');

should do it.

Regrads,
Allan

davykiash

Hello Allan

Is this how I should implement it?

var editor;

$(document).ready(function() 
{

    editor = new $.fn.dataTable.Editor( {
    "ajax": {
            "url": "../actions/process.php",
            "type": "POST",
            "data": function ( d ) {
                 return $.extend( {}, d, {
                   "action_id": "12",
                 } );
              },
          },
    table: "#example",
    fields: [ 
                {
                    label: "Item Code:",
                    name: "item_code"
                },
                {
                    label: "Item Category:",
                    name: "item_cat",                   
                    type: "select",
                    options: [{ label: "home", value: 500},{label: "test2", value: 501}],                                                           
                    
                },
                {
                    label: "Item Description:",
                    name: "item_desc"
                }
        ]
    });
    
    editor.field('item_cat').input().addClass('custom-class');

});

allan

Yes, that should do it.

Allan