Checkbox accepting the css style

klermann

Why is not the checkbox accepting the css style I'm trying to arrow it for?

{
    data: "pagamento",
    render: function(data, type, row){
        if ( type === 'display' ) {
         return '<input type="checkbox" id="inputUnchecked" name="pagamento"' +
            'data-plugin="iCheck" class="editor-active icheckbox"/>';
         }
         return data;
    },
    className: "icheckbox"
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I don't know, as I don't know what CSS you are attempting to use. Perhaps you can link to an example page showing the issue.

Allan

klermann

Hello Allan, I am sending you the lik of the application because I need to solve some problems, which I will disclose below:
1 - The first is that to edit an item in the table list when I use the datetime2 plugin the edit option of the editor does not open, but when I use datetime it normally opens, this to the date field as follows:
{ name: "dataReceita", type: "datetime2", opts: { minDate: new Date('2009-01-01'), maxDate: new Date('2031-12-31'), format: 'DD/MM/YYYY' } },

passing, with datetime2 plugin does not open and with the datetime plugin normally opens. I need it to open only with the datetime2 plugin. As it is presently.

ec2-54-86-12-163.compute-1.amazonaws.com:8080/financeiro/receitas

klermann

2 - The second point would be the fields that do not appear enabled when I will edit an item, as it usually happens when editing an item in which the fields related to the edited item appear enabled

klermann

3 - The third point would be the styling of the checkbox with css that can see an example running inside the page above the table. How can I use this field with css correctly!

allan

If I click the edit button on your page there is a Javascript error:

Uncaught TypeError: date() parameter must be one of [null, string, moment or Date]

Inspecting it in the console shows that the value being passed to it is:

{
    "year": 2017,
    "month": "AUGUST",
    "monthValue": 8,
    "dayOfMonth": 29,
    "dayOfWeek": "TUESDAY",
    "era": "CE",
    "dayOfYear": 241,
    "leapYear": false,
    "chronology": {
        "calendarType": "iso8601",
        "id": "ISO"
    }
}

which is why the bootstrap date picker library is rejecting it.

Allan

klermann

Do you have any tips on how to solve it?

klermann

The problem here is the plugin:
`set: function (conf, val) {
var picker = conf._input.data ("DateTimePicker");

console.log (selector);

(picker.setDate) {
picker.setDate (val);
}
other {
picker.date (val);
}
},`
How can I solve this?

allan

You'd need to convert that object into something that the third party library supports - an ISO8601 string for example.

Allan

klermann

ec2-54-86-12-163.compute-1.amazonaws.com:8080/financeiro/receitas

I changed the field to receive the Bootstrap DateTimePicker (1) and I have another problem, which is the fields are not receiving the values ​​for editing, including the data field, currency and selects, how can I get these fields to receive the data by clicking the edit button of the editor?

allan

Your currency field type plug-in has the set function as:

        set: function ( conf, val ) {
        },

which explains why the value isn't being set.

You need to actually set the value for the field in that function.

Allan

klermann

//I Tried:
$ ('# valorReceita', conf._input) .val ();
//and:
conf._input.val (val);
//and:
$ ('# valorReceita', conf._input) .val ('val')
and nothing, continuos empty return.

allan

$ ('input', conf._input) .val( val );

should be all that is needed. i.e. select the input element and then set its value.

klermann

Hi Allan, the value field of
recipe I could solve, Now I'm trying the same configuration $ ('input', conf._input) .val (); to the field "receitaCor" and why when I try to edit the value coming from the table it returns me the value of the field and not what I need that comes from the database

allan

The DataTable.ext.editorFields.receitasCor field type has its set function as:

set: function ( conf, val ) {}

which is exactly the same issue as we discussed above.

In this case there are two input elements in your conf._input variable, so you might need to be a little more careful about the code you write for the set function.

Allan

klermann

Hello Allan, even isolating one of the fields and following his guidance still failed to show the value to be edited in the field. Do you have any suggestions?
conf._input = $( '<div class="input-group" id="' + conf.id + '">' + '<span class="input-group-addon">' + //'<input type="color" id="cor" style="border:none;padding:0;margin:-8px;height:25px;width:30px;" value="#00bcd4"/>'+ '</span><input type="text" id="receitaCor" class="form-control receitaCor" value="#00bcd4" disabled />' + '</div>' );
set: function ( conf, val ) { $('input', conf._input).val(); },

kthorngren

I haven't been following this thread closely so my comment maybe out of context but it looks like Allan recommended using this:

$ ('input', conf._input) .val( val );

But you have this:

$('input', conf._input).val();

The difference is the first one sets the value while the second gets the value.

Kevin

klermann

Why does my check box not accept the css style?
ec2-54-86-12-163.compute-1.amazonaws.com:8080/financeiro/receitas

allan

It doesn't appear to have any styles attached to it:

So I'm guessing is a selector issue.

Allan

klermann

Update the field by setting the css value I want in it, but there was not an expected change

ec2-54-86-12-163.compute-1.amazonaws.com:8080/financeiro/receitas

allan

I don't see what CSS selector or rules you have applied to it?

klermann

Solved here, the label was missing!
<div class="checkbox-custom checkbox-info">' + '<input type="checkbox" class="icheckbox-info" data-plugin="iCheck" data-checkbox-class="icheckbox_flat-cyan"/>' + '<label></label></div>