Editor: Inline editing not using correct input control

raka86

Hi,

I have to use different fields.typeinside a column depending on the current data type of the row. This works fine with button triggered editing and bubble editing by using clear() and add() in initEdit.

However, I want to use inline editing. But here the proper input control is displayed with a one-click delay. Meaning that the correct input control is only displayed when using the inline editing a second time (no matter if editing the same row again or even another row).

Example here: live.datatables.net/dukefubu/1/

How can I get the expected behavior?

Kind regards

colin

Hi @raka86 ,

You can move all that logic into the click event before you initiate the inline edit, so the field will be ready when the editing begins - see here.

Hope that does the trick for you,

Cheers,

Colin

rf1234

What also worked for me is to put it into a select event and it looks like you are using the select extension too.

Here is an example from my own coding using two field types: "regular" field and date/time.

filtrTable
    .on('select', function () {        
        var selected = filtrTable.row({selected: true});        
        var that = valueRangeEditor;
        if (selected.any()) {
            var fieldType = selected.data().filtr.field_type;
            that.clear("value_range.value");
            if (fieldType != 7) { // 7 is date
                that.add( {
                    label: lang === 'de' ? 'Wert:' : 'Value:',
                    name:  "value_range.value"
                } );
            } else {
                that.add( {
                    label: lang === 'de' ? 'Wert:' : 'Value:',
                    name:  "value_range.value",
                    type: "datetime",
                    format: 'L',
                    opts: {
                        showWeekNumber: true,
                        yearRange: 40,
                        momentLocale: momentLocale
                    }
                } );
            }
        }
    });

raka86

Hi @colin,

thanks for the prompt answer. However, I think it is not solved yet.

1. Clicking on a dropdown list instantly closes it again instead of remaining open.
2. Your solution with the click event only seems to work with the nightly build but not with the current release 1.10.18. With 1.10.18 table.row(this).data(); returns undefined. See here: live.datatables.net/conuboco/1/

Kind regards

allan

1) The issue was calling clear() on every click, even in the select dropdown (which is a child and the event bubbles up). Add a check to see if its in editing mode already:

    if ( $('div.DTE', this).length ) {
      return;
    }

2)

table.row(this).data();

where this is a td not working in .18 is a regression. Use table.row(this.parentNode).data(); as a workaround until the next release.

http://live.datatables.net/conuboco/3/edit

Allan

raka86

Thanks a lot @allan. Now it is working perfectly fine!