x-editable alternatives

[minsis]

Description
Since x-editable has been abandon for quite some time now, there's zero support for it and no bootstrap 4 support. I just wanted to kick around some ideas there could be for being able to make inline type edits similar to x-editable. Or other ideas on being able to make server side post requests to make changes to the table.

[djhvscf]

Do you have any special repo that we could use for this?

[UtechtDustin]

Should we use a other repo/library or should we create it ourself ? If we use a other lib, we maybe have the same issues someday. Also we have a still a dependency.

[djhvscf]

I prefer to create an extension from scratch but we don't have enough time to create them. If you have it, please don't hesitate to create one!

[minsis]

@djhvscf I've searched around trying to find an alternatives to x-editable and oddly there isn't any. Honestly its bizarre that no one has picked up the project as it seems very useful and widely used. Some people have forked it and made minor changes, and there are some work arounds to get it work in bootstrap 4, but its extremely limited; not to mention that using x-editable in BS4 breaks popovers.

If I knew anything about javascript and jquery I wouldn't hesitate to contribute something to this project. Unfortunately most of my development is done in python. I do plan on learning js with jquery at some point so if I'm ever good enough I'll be happy to do it.

I guess this thread is now turning more into a feature request for a new extension than a help wanted.

[minsis]

So @wenzhixin has as blog post that was shared from a different thread as a bootstrap4 work around from a PR branch. This is something I've already tried earlier today and does not work. Maybe it worked back in 2019 when the post was created, but has the same JS errors that I got in 2020. https://blog.bootstrap-table.com/2019/10/06/use-editable-in-bootstrap-v4.

I confirm that the issue with the blog post is that bootstrap versions have changed. Bootstrap 4.3.1 released in Feb 2019. However, the roll back to BS 4.3.1 still breaks editable extension itself which I guess was probably a different version at the time as well.

Since most of the work might already be done this PR maybe its possible to modify the package and include it with the editable extension.

[minsis]

I should also mention that the issue with datepicker for filter extension is broken even with this "work around". Its probably because the x-editable library overrides popper functions inside bootstrap. https://live.bootstrap-table.com/code/minsis/4930

[sipi41]

v1.5.3 of x-editable is available at their repository and it seems to work fine with bootstrap 4.x... here are the files: https://github.com/vitalets/x-editable/tree/develop/dist/bootstrap-editable/js

[typo3ua]

in my case "x-editable" with "bootstrap 4" works well... my online example works only on my local PC (localhost) but online for some reason it does not work

[minsis]

https://gist.github.com/minsis/7706aba675e95172b404bac9ec394133

I wrote this sort of hack of a plugin for bootstrap-table. Its extremely specific to my use case. I'm not a javascript developer so its probably pretty crude but it works. Hopefully someone here can use it for ideas to make a full featured editable extension.

Requires:

• Popover.js
• Font awesome or your choice of icons. You can add to the custom icons dict used to initialize your table. However I use friconx which requires a reload of icons so its hard coded into this script instead of creating an event listener.

  icons = {
  editValueOk: 'fa-check',
  editValueCancel: 'fa-times'
  }

Limitations:

• it only allows for types input and number boxes
• No event triggers
• Only works with post URL expecting a response of {"status": 0, "field": "<column_name>", "value": "<new value">
• No flexibility for custom templates (formatter)
• Only does popover (no inline)
• The popover box doesn't go away if you focus somewhere else, have to manually click the close button. This is some kind of limitation to the popper library where you lose focus of the popover box if you click inside the form field, even though its inside the popover. Not exactly sure how to get around this.
• I have a special alert box on my page that gets a new alert inserted which is hard coded instead of using event listener.

column options are: "editvalue": { "type": "number", "url": "some post url" }

[typo3ua]

thanks buddy... it is good job

[Bjego]

@wenzhixin or @djhvscf is there any documentation how to write a plugin for bootstrap table? As time of writing (18th February 2021) the BS4 workaround doesn't work anymore. Maybe it's worth to give it a shot to extend BS table with an new edit plugin. Which will handle BS4 , BS5 and newer then.

[UtechtDustin]

@Bjego There is no documentation for that. But its quiet easy, just check the sourcecode of the other extensions. A extension basicly hooks the internal functions, overwrite them or add functions to it and call the super method.

[djhvscf]

Exactly as @UtechtDustin said. @Bjego please let us know if you have any question. Your contribution is more than welcome.

[albfan]

Although official repo has some support for bootstrap4, this fork mostly works:

<link href="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/js/bootstrap-editable.js"></script>

https://github.com/Talv/x-editable

[tomasvts]

I'm using @skycyclone forked version of @Talv https://github.com/skycyclone/x-editable/tree/develop/dist for bootstrap 5 and so far it works

[Rusliam]

I'm using @skycyclone forked version of @Talv https://github.com/skycyclone/x-editable/tree/develop/dist for bootstrap 5 and so far it works

i have an issue, getOrCreateInstance not a function, what im doing wrong ?