InlineCreate after inline edit a cell

InlineCreate after inline edit a cell

GoinsideGoinside Posts: 11Questions: 3Answers: 0

I have a datatables with this Options:

formOptions: {
            inline: {
                drawType: "none"
            }
        }

If I click at a cell (lets call cellA), it converts to an input and I can change the content. Next I press enter key and I call "editor.submit()". The row seams like the edition mode was ended. After this I have a button that adds a new line, calling this:

editor.inlineCreate("start");

It draw the new row with all cells in edition mode, but when I start to write at one of these cells, the row disapears and the focus of the editor goes to the cell that I was editing before, cellA. It seams that the first edition its not finished correctly. Otherwise, If I add the new row after the refresh of datatable, I can write all fields and the new row is submitted to the server. So my problem is adding new now after edit an existing one.
Thank you.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Can you give me a link to the page showing the issue please? This sounds like it is going to need a little debugging and also so I can see what the server is returning (it might contain an error message?).

    Allan

  • GoinsideGoinside Posts: 11Questions: 3Answers: 0

    In my Editor configuration I don't have an ajax url configured. For update existent row I do an ajax call at "submitcomplete" event:

    // update existent row
    window.editor_AlinhamentoLms.on('submitComplete', function (e, json, data, action) {
    
        SetNewValuesToHtmlCells();
    
        $.ajax({
            type: 'POST',
            url: url,
            contentType: 'application/json',
            data: JSON.stringify(dataToSend),
            success: function (data) {    
                if (data === null) {
                    return;
                }
    
                myDatatable.row(editedRowIndex).data(data);
             },
             error: function (error) {
             }
        });
         
        editor.close();
    });
    

    At "presubmit" event I did manually an ajax call to the server and I change manually the datatable data.

    // create new now
    window.editor_AlinhamentoLms.on('preSubmit', function (e, json, data) {
        var dataToSend = GetDataFromHtml();
    
        $.ajax({
            type: 'POST',
            url: url,
            contentType: 'application/json',
            data: JSON.stringify(dataToSend),
            success: function (data) {
                if (data === null) {
                    return;
                }
    
                var resultElement = CreateHtmlTr();
                var result = myDatatable.row.add(resultElement);
                myDatatable.row(result[0]).data(data);
            },
            error: function (error) {
            }
        });
    });
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Could you give me a link to the page please? I'm not sure why the inline create row would disappear under these conditions, and I'll need to debug it to understand what is going on.

    myDatatable.row.add(resultElement);

    I don't thik that is the issue, but it is going to pass with Editor's own row insertion. Do you not end up with a duplicate row in the table, given that Editor will also be creating a new row? Or indeed on edit.

    Allan

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Thanks for the PM with the link. The issue was the inline creation plus KeyTable - they weren't playing nicely together, particularly with the keys.editOnFocus option enabled.

    I've committed a fix to address this. It will be in the nightly build in the next 5 minutes if you want to try it from there.

    Also, in your CreateNewRow function, just before you call inlineCreate() I would suggest calling cell.blur() to remove the KeyTable focus. It shouldn't cause an issue keeping it from a Javascript point of view (any more), but it might confuse the user.

    Allan

  • GoinsideGoinside Posts: 11Questions: 3Answers: 0

    Many thanks for your help. Your fix solved our problem. Unfortunately we are facing another problem after insert the new row. After the server save and the row.add of the new row, all cells of the type Select2 doesn't open options anymore. Even if we cancel the new row adding, with editor.close(), the Select2 elements doesn't open the option list.
    Thank you.

  • GoinsideGoinside Posts: 11Questions: 3Answers: 0

    The problem with Select2 is solved. We have something that make this bug. We are waithing for your answer about FixedColumns. Many thanks.

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    We are waithing for your answer about FixedColumns.

    Are you referring to this thread?

    Allan asked for a test case showing the issue to see if your code is triggering the calls to _addStyles().

    Kevin

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    I've got a test case via PM. However, I was out of the office yesterday and didn't get a chance to look into this. I will do so later today.

    Allan

Sign In or Register to comment.