trouble using updateOrAdd feature

vasilevich commented 7 years ago

Hi, I know you are about to do it anyway, just a reminder, can you please push version 2.12.0 to bower, I'd like to use the new updateOrAdd feature, after checking directly from git, error in console: TypeError: index is undefined tabulator.js (line 1443, col 7) updateOrAdd feature does not work, here is my js file for you to reproduce:

HTML:

<!DOCTYPE html>
<html class="uk-notouch" lang="he" dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="charset" content="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Yosef Langer">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="1 month">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="systemd, generator,tool">
    <meta name="description" content="">
    <title>Trip Guaranty Polisot Control - ניהול פוליסות
    </title>
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"><!--[if lt IE 10]>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <script type="text/javascript" src="bower_components/respond/dest/respond.min.js"></script><![endif]-->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap-rtl-ondemand/dist/css/bootstrap-rtl-ondemand.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="bower_components/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container" id="page">
      <header class="masthead" id="pageHeader">
        <h3 class="text-muted">ממסד פוליסות</h3>
        <nav></nav>
      </header>
      <main>
        <div id="polisotTable" dir="ltr" style="direction:ltr;"></div>
        <script src="bower_components/tabulator/tabulator.js" type="text/javascript"></script>
        <link href="bower_components/tabulator/tabulator.css" rel="stylesheet">
        <link href="bower_components/tabulator/themes/tabulator_modern.css" rel="stylesheet">
        <script src="js/index.js"></script>
      </main>
      <footer>Copyright ©2016 Systemd-gen</footer>
    </div>
  </body>
</html>

JS:

$("#polisotTable").tabulator({
    fitColumns: true, //fit columns to width of table (optional)
    movableCols: true,
    persistentLayout: true,

    pagination: "local",
    paginationSize: 20,
    columns: [ //Define Table Columns
        {title: "תאריך", field: "date", sorter: "date", headerFilter: true,editable:true,editor:"number"},
        {title: "פוליסה", field: "polisa", sorter: "number", headerFilter: true,editable:true,editor:"number"},
        {title: "הזמנה", field: "order", sorter: "number", headerFilter: true,editable:true,editor:"number"},

    ],
    rowClick: function (e, id, data, row) { //trigger an alert message when the row is clicked
        // alert("Row " + id + " Clicked!!!!");
    },
});

//this doesnt work
$("#polisotTable").tabulator("updateOrAddData", [
    {
        "order": "155126",
        "polisa": "1038305",
        "state": "2",
        "date": "21-03-2017",
        "start": "1490167660912",
        "end": "1490167777739"
    }
]);

/*
//this works fine
$("#polisotTable").tabulator("setData", [
    {
        "order": "155126",
        "polisa": "1038305",
        "state": "2",
        "date": "21-03-2017",
        "start": "1490167660912",
        "end": "1490167777739"
    }
]);
*/

var translations = {
    "first": "ראשון",
    "prev": "קודם",
    "next": "הבה",
    "last": "אחרון",

};

$("span.tabulator-paginator").children().each(function (index, element) {
    element = $(element);
    var t = element.text().toLowerCase().trim();
    if (translations[t]) {
        element.text(translations[t]);
    }
});

$("div.tabulator-header-filter input").mousedown(function (e) {
    e.stopPropagation();

});

please also note that the bower version does not have the bootstrap and semantic themes, please add those.

thank you very much!

vasilevich commented 7 years ago

Side notes and feature recommendations:

When you make the colums moveable, make sure the inputs are not moveable, or you won't be able to perform double click selection on the text inside the filters, this is how I did it:
```
$("div.tabulator-header-filter input").mousedown(function (e) {
e.stopPropagation();
```

});


perhaps you have a better way, this makes the column still moveable, by dragging anywhere expect for the input.
2. when the table is editable, you should make it editable after a double click, not a single click(or atleast make it optional), I think some tables are too dangerous to edit with a single click, especially mission critical ones.

3. not really important but a date/hour editor would be an interesting feature.

thank you so much for this amazing table, good work!

olifolkerd commented 7 years ago

Hey,

Thanks for getting in touch. Its always great to hear people are enjoying using Tabulator!

In answer to your questions:

Bower Bower will automatically update itself, every day or so it check GitHub for updated libraries and updates itself.

updateOrAddData The reason you are having issues with your updateOrAddData function is because your data does not contain an index field. To use any of the update functions your data must have a unique index field defined so that Tabulator knows what row you are trying to update. By default this field is set to "id", although you can pick any field you want by setting the index option in your table constructor.

Movable Columns I have intentionally not added any stopProagation functionality throughout Tabulator as i wanted to give users the option to control the flow of events throughout the DOM. If the select all on double click is important for your design then feel free to extend any of the editors with the stopProagation function for the desired effect.

Editable Cells Tabulator is designed to be as intuitive as possible and most people seem to find single click easier to work with. If you want to use a double click for your usage case then I would be happy to put together a demo of how you can achieve this.

Datepicker If you want to add a datepicker editor that is no problem at all, there is already some example code in issue #252

I hope that helps you out.

Cheers

Oli

vasilevich commented 7 years ago

Thank you for your answer!

regarding the Movable Columns

if you notice I already implemented a way to circumvent this, so this is a no issuse to me, just thought it wasn't right, but if it is intended then thats fine with me!

updateOrAddData

Thank you! maybe it should be stated in the documentation right besides this new feature? if it already is and I accidently missed it, sorry about that.

regarding the editable cells

yes I would like for you to show me the right way of implementing the double click functionality as I would prefer not to come up with my own hacks and instead learn from the master of this amazing work, whenever you have the time.

regarding the Datepicker

Thank you very much! apologizes for not checking in advance.

Thank you so much for your continued support and for this great work!

olifolkerd commented 7 years ago

Hey vasilevich,

On further consideration I think you were right about the header filter input click propagation. I have just pushed a change to the repo to make this change.

I also think having the option to set the event binding that triggers the edit would be useful too, so i will have a look at how i can implement this in an accessible way.

Thanks for your suggestions

Oli

olifolkerd commented 7 years ago

Hey,

Just a quick note to let you know that this feature will be available in the upcoming 3.0 release later in May!

Cheers

Oli

olifolkerd commented 7 years ago

Hey,

You will be happy to hear that version 3.0 is now in beta release, the filter and editor and filter systems have had a complete overhaul. and should now meet your needs

Head over to http://olifolkerd.github.io/tabulator/news/ to see the latest features!

Cheers

Oli

olifolkerd / tabulator