Answers

• kthorngren Posts: 21,305Questions: 26Answers: 4,947

  March 2017

  The inline editor basic example doesn't have this behavior. Maybe its a CSS issue?

  A test case showing the issue would help to troubleshoot.

  Kevin
• allan Posts: 63,471Questions: 1Answers: 10,467 Site admin

  March 2017

  I looks like it is probably getting some padding, or something is showing below the checkbox. If you use your browser's development tools to take a look and see what the JSON response from the server is when you click the checkbox, what is it?

  Allan
• nnachi Posts: 6Questions: 2Answers: 0

  March 2017

  Hi
  For now, the application is running on local, I hard coded the JSON response into the html file with 1 or 0 values for the checkboxes

  I inspected the code after clicking on the on the checkbox, and in my <td> element I have the following

  <

  div> generated

  <td class=" dt-body-center">
      <div class="DTE DTE_Inline">
          <div class="DTE_Inline_Field">
              <div class="DTE_Processing_Indicator"><span></span></div>
              <div class="DTE_Field DTE_Field_Type_checkbox DTE_Field_Name_active"><label data-dte-e="label" class="DTE_Label" for="DTE_Field_active">Active<div data-dte-e="msg-label" class="DTE_Label_Info"></div></label>
                  <div data-dte-e="input" class="DTE_Field_Input">
                      <div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;">
                          <div>
                              <div><input id="DTE_Field_active_0" type="checkbox" value="1"><label for="DTE_Field_active_0"></label></div>
                          </div>
                      </div>
                      <div data-dte-e="multi-value" class="multi-value" style="display: none;">Multiple values<span data-dte-e="multi-info" class="multi-info" style="display: none;">The selected items contain different values for this input. To edit and set all items for this input to the same value, click or tap here, otherwise they will retain their individual values.</span></div>
                      <div
                          data-dte-e="msg-multi" class="multi-restore" style="display: none;">Undo changes</div>
                  <div data-dte-e="msg-error" class="DTE_Field_Error" style="display: none;"></div>
                  <div data-dte-e="msg-message" class="DTE_Field_Message" style="display: none;"></div>
                  <div data-dte-e="msg-info" class="DTE_Field_Info"></div>
              </div>
          </div>
          <div data-dte-e="form_error" class="DTE_Form_Error"></div>
      </div>
  

  It seems that the label generated after the checkbox is causing the height increase of the row
  <input id="DTE_Field_active_0" type="checkbox" value="1">
  <label for="DTE_Field_active_0"></label>

  Is it normal ?

  Thx and regards
• nnachi Posts: 6Questions: 2Answers: 0

  March 2017 edited March 2017

  Hi
  I confirm that the label is the value defined on the fields list on the editor (check screenshot)
  I have defined the checkbox field like in the example
  {label: "Active", name: "active", type: "checkbox", separator: "|", options: [{label: 'AAA', value: 1}]},

  Why this label is generated ?

  Capture2.PNG 14.8K
• nnachi Posts: 6Questions: 2Answers: 0

  March 2017

  @kthorngren , thank you for your answer but the example does not have checkbox column with inline editing (the first column has a different behaviour)

  There is an example with checkbox but it doesn't have the inline editor

  Nazim
• kthorngren Posts: 21,305Questions: 26Answers: 4,947

  March 2017 Answer ✓

  I have inline editing with checkboxes and don't see the issue. I make sure to turn off inline editing for that column. For testing I turned it back on and see the same behavior you are seeing. This is my code for the inline edit event:

      $('#edit-table').on( 'click', 'tbody td:not(:first-child, :nth-child(10))', function (e) {
          console.log('click');
          editor.inline( this, {
              onBlur: 'submit'
          } );
      } );
  

  The first column is the row selector column and column 10 is the checkbox column.

  Kevin
• nnachi Posts: 6Questions: 2Answers: 0

  March 2017

  Thank you @kthorngren ! Now it is working correctly
  Indeed, we have to turn out the inline editing for the checkbox columns

  Have a nice day