Tab-switching between header-filter-inputs

[cschnelting]

Hi, i have an error with tab-switching between the header-input-fields. At first, i can switch between the input-fields by pressing the tab-key. But after I've selected any table-row of my table-data, it's not possible to switch the input-fields by tab. Also wehn I deselect the table-row. Do you have an idea why?

[olifolkerd]

Could you post a copy of your tables constructor object so i have something to test againse.

Cheers

Oli

[olifolkerd]

I Cant seem to replicate the issue you are having.

Do you have any details of the version of Tabulator you are using, and on which browser you are having issues?

[cschnelting]

Hi Oli,

I've tested on the following browsers:

• Mozilla Firefox 54.0 64bit for Ubuntu
• Chromium Version 59.0.3071.109 (Entwickler-Build) Built on Ubuntu , running on Ubuntu 17.04 (64-Bit)

My Tabulator-Version is 3.1 from 26.06.17 and this is my table constructor:

$(function() {
    $("#grid").tabulator({
        height:"85vh",
        fitColumns:true,
        movableColumns: true,
        persistentLayout:"cookie",
        persistentLayoutID:"myGrid",
        selectable:1,
        selectablePersistence:false,
        pagination:"remote",
        paginationSize:25,
        ajaxURL:"../query?relation=myGrid",
        columns:[
            {title:i18n('id'), field:"id", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
            {title:i18n('typ'), field:"typ", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
            {title:i18n('status'), field:"status", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
            {title:i18n('datum'), field:"datum", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
        ],
    });
    setAjaxFilterOnEnter();
});

var ajaxFilterInput = function input(cell, onRendered, success, cancel, editorParams) {
      //create and style input
      var input = $("<input type='text' class='ajax-filter'/>");

      input.css({
        "padding": "4px",
        "width": "100%",
        "box-sizing": "border-box"
      });

      //filter Table on ENTER
      input.keypress(function(e){
          if(e.which == 13) {
              var tabulator = $('#' + $(this).closest(".tabulator")[0].id);
              var params = {};
              var columns = tabulator.tabulator("getColumns");
              // generate parameter's list
              var tabulatorId = "#" + tabulator.attr('id');
              var fields = $(tabulatorId + " .tabulator-header-filter .ajax-filter");
              for(i = 0; i < fields.length; i++) {
                  var element = $(fields[i]);
                  var key = columns[i].getField();

                  if(element.val() !== ""){
                      params[key] = element.val();
                  } else {
                      delete params[key];
                  }
              }
              // get the original ajaxURL
              var ajaxURL = tabulator.tabulator("option").ajaxURL;

              // perform the ajax call
              tabulator.tabulator("setData", ajaxURL, params);
          }
      });

      return input;
};

function setAjaxFilterOnEnter() {
    //all header-filter input fields
    var fields = $(" .tabulator-header-filter .ajax-filter");
    for(i = 0; i < fields.length; i++) {
        // for each input-field diasble automatic-filtering
        // only allow filter on ENTER-Key
        var element = $(fields[i]);
        element.off("keyup search");
    }
}

[cschnelting]

Hi Oli, did you find a solution for this issue?

[olifolkerd]

Hey sorry, i mistakenly closed this issue.

is the ajaxFilterInput just for use in the header filter or is that used as an editor as well?

[cschnelting]

Hi, yes the ajaxFilterInput is just for header-filter Input. Because of this, I have set each column to editable:notEditable.

[olifolkerd]

you can pass that editor directly into the headerFilter option

[olifolkerd]

Based on your code i have a couple of questions for you.

Is there a reason you have chosen to force the persistentLayout option to cookie rather than using true which lets it choose the most appropriate option for the browser

You appear to be running a localization function on your column titles. Did you know that Tabulator has localization built in and can handle this for you. checkout the Localization Documentation for more information

With regards to the Tabbing issues you have been experiencing, I dont seem to have any issue on any browsers, i cam tab between the header filters without any issue, this seems to suggest that it is caused by something else on the page. I would suggest that you try setting up your tabulator in a blank page and see if the issue is still there, to isolate where it is coming from.

The only issue i did notice was that as you tab between header filters the selection is lost, this is because leaving a header filter element triggers a filter and because you have set selectablePersistence:false the selection gets cleared.

Are you using the latest 3.1.5 version of Tabulator?

Cheers

Oli

[cschnelting]

Hi, I have updatet tabulator v 3.1 to v 3.1.5 and changed my column-definitions to: headerFilter:true, editor:ajaxFilterInput, editable:notEditable --> headerFilter:ajaxFilterInput

This seems to solve my issue! Thank you!