mapping database value to more convenient display/edit value and viceversa

javismiles

Say I have a database field that can be 0 or 1. But I want to display it in table as No or Yes. that's easy doing:

"columnDefs": [
{
"targets": 13,
"data": "easych.imp",
"render": function ( data, type, row, meta ) {
if (data==0) {return "No";} else {return "Yes";}
}
},

Now I want to do the inverse, when people inline edit the field, instead of putting 0 or 1 I want to allow them to put No or Yes and I then convert it to 0 or 1 and send to editor,
how can I do that?

thank u

kthorngren

Maybe use radio buttons or select as depicted in this example:
https://editor.datatables.net/examples/simple/fieldTypes.html

Kevin

javismiles

hey Kthorngren thank u very much, thats a great idea and i just implemented it following your link:

  $.map(obj.fields, function(obj, index) {
        if (index==14){
            fieldobj[index]  = {
            label: obj.d,
            name:  obj.i,
            type:  "radio",
            options: [
                { label: "No", value: 0 },
                { label: "Yes",  value: 1 }
            ],
            def: 0
        };

the only problem is that the design, aligment of the No, Yes and radio buttons is really... bad.... the css is not really good...

javismiles

culprit seems to be this 100%

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input, div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input {
width: 100%;
}

which in inline editing makes the radio button push the labels to the line below

javismiles

yes, for others interested, adding this css will fix that

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input, div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input {
width: 30%;
}

change 100% to 30% or anything that allows labels enough space on same line

javismiles

actually that works for radio buttons but causes problems in text fields,
so how can I change width 100 to 30% or less ONLY for radio buttons but not for other kinds of fields?
div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input, div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input {
width: 100% !important;
}

javismiles

ok possibly this:

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input, div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input {
width: 100% !important;
}

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type="radio"], div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type="radio"]
{
width: 30% !important;
}

allan

What styling framework are you using please?

Allan

javismiles

bootstrap 4 and the very latest versions of all your stuff Allan,
changing this helped me, but again its tricky, it works for the radio buttons but then u gotta take care that it doesnt affect other input fields etc

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input, div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input {
width: 100% !important;
}

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type="radio"], div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type="radio"]
{
width: 30% !important;
}

allan

Thanks. My working directory is a little bit of a mess at the moment, I'll tidy that up and let you know how I get on.

Allan

javismiles

thank you Allan

allan

Got it now. This wasn't just effecting Bootstrap 4, but any styling framework where the radio buttons were used inline. I've added suitable code for that now and it will be fixed in the next release. Many thanks!

Allan

javismiles

thank you very much Allan, and very welcome!

javismiles

(just to add to it, a different but similar issue, in responsive compact mode, the input field when editing inline have also 100% width and problems happen as well, its similar but in a different situation, responsive compact mode, you know, where the classes styling etc dont appear but inline editing works and in that case the input fields take 100% width and move down from their labels)

allan

It sounds like there are a few issues with Bootstrap 4's compact mode when used with Responsive. I'll check into that - thanks.

Allan

javismiles

thank you Allan, sounds great