Code

Discussion on ezEditTable - Enhance HTML Tables

Discussion on ezEditTable - Enhance HTML Tables

Cart 455 sales

koalyptus supports this item

Supported

101 comments found.

If your code does not adapt, what is the cost of customization. Waiting for your comment.??

Hi there, I purchased your code. Looks amazing. I spent most of the day trying to get the Ajax sample to work on my server. I don’t have the icons for the months and year and when I try to select a date the picker won’t go away. When I click elseware the cell has an ‘undefined’ message in it…

help please :)

My name is Neil and My purchase code is 96dceb93-7471-4b0d-953c-37b1dc0fb1c5.

Thanks for your help.

Hi Neil, First of all thanks for purchasing this code.

Hard to tell from here, but make sure the script understands where to import the dependencies from. If you have placed the ezEditTable folder in a custom location on your server file system, make sure you define the base_path option which holds the relative path to the script’s folder from the HTML page, ie:
var etConfig = {
  base_path: 'path/to/ezEditTable/`, // relative to this HTML page
  ....
};

Let me know if this helps you.

Cheers

Hi there, I don’t have the icons for the months and year and when I try to select a date the picker won’t go away. When I click else ware the cell has an ‘undefined’ message in it… Can I get all the supporting files please?

Also, the samples in the download don’t include any of the PHP AJAX demos. Can I get access to that as well please. Thanks for your help.

Hi. I’m looking an easy online editor for small MySQL database, this script can do the job? Best regards.

Hi there,

The pre-requisite for this script is to provide a HTML table. Given a HTML table no matter how this is generated, the script will work on it.

Cheers

Hello, I have downloaded two folders codecanyon-DD5wBSBq-ezedittable-enhance-html-tables codecanyon-SOrCA0Ta-ezedittable-enhance-html-tables for me it confused which one to use in my app and even each folder has two CSS & JS so which one has to reference, also i have used the ‘select’ editor but it is not working on html table could you advise please

I am unable to integrate ezEditTable with tablefilter.js. I have a database that, when searched, shows the results in a table. If I reference the script sources seperately, and instantiate tf.init() and et.Init() separately, things work OK on my first “search” click: I am able to sort the results alphabetically (via the tablefilter,js ‘sort’ module), and also able to edit individual cells (via the ezEditTable script). However, upon subsequent “search” clicks, the ezEditTable functionality disappears, while the tablefilter.js sort functionality still remains. I thought maybe integrating ezEditTable with tablefilter.js via placing my ezEditTable folder inside my tablefilter folder would allow me to reference ezEditTable via tablefilter extensions: [{ name: ‘sort’, name: ‘ezEditTable’, }]

However, when I try it this way, I get the following error:

Error: Cannot find module ”./extensions/ezEditTable/ezEditTable”. at webpackContextResolve (index.js:3) at webpackContext (index.js:3) at tablefilter.js:1348

I am confused as to how webpack is involved here.

My ezEditTable files appear to be in the proper location (\public\tablefilter\src\extensions\ezEditTable), which is the folder where my sort module is found (\public\tablefilter\src\extensions\sort)

Yet, even if I name the ‘sort.js’ file something else on my server (i.e. ‘sort-foo.js’) without changing tablefilter extensions: [{ name: ‘sort’, }] , the sorting still works.

It appears webpack is able to find ’./extensions/sort/sort’, but not ’./extensions/ezEditTable/ezEditTable’, although they are in the same ‘extensions’ folder.

I can’t figure out where webpack is referencing these files from, or how it is serving them up. Very confusing! Any help is appreciated.

Maybe all of this could be avoided by installing tablefilter.js as a module, since my database is in a node/express environment. I originally tried to do it that way, but kept getting a

ReferenceError: window is not defined at Object.<anonymous> (...\node_modules\tablefilter\dist\tablefilter\tablefilter.js:1:319) at Module._compile (module.js:653:30) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Module.require (module.js:597:17) at require (internal/module.js:11:18) at Object.<anonymous> (...\node_modules\tablefilter\index.js:3:18) at Module._compile (module.js:653:30)

So if you could provide some assistance on how to get tablefilter.js working modularly, that would probably be a better solution. Thanks!

hi @tsalm0n, could you please raise 2 tickets on TableFilter’s github project as those are TableFilter issues. TableFilter integrates with ezEditTable, ezEditTable is unaware of TableFilters existence.

cheers

Hello: I am trying to enhance ezedittable with wysiwyg editor capabilities. As a test, i am using tinymce. I have been able to use the type:custom, target:tinymce – where target is a and. This brings up the TinyMCE editor; but i am unable to figure out a way to pass the editor contents to ezedittable for further insert/update operations.

Do you have any Demos/Examples that i can use ? Your response and help is much appreciated.

BR Peter.

Hi Peter,

You simply need to hook into custom editor callbacks. Most of the demos feature a third party date picker, if you check this demo for example, you are interested in the following callbacks:

- open_custom_editor => implement your custom logic to initialise or open third party component when ezedittable cell turns into editable component

- close_custom_editor => implement your custom logic to manage third party component when ezedittable cell turns into non-editable component

- get_custom_editor_value => implement your custom logic to retrieve third party component contents and return it as string to ezedittable (when cell becomes non-editable)

- set_custom_editor_value => implement your custom logic to set ezedittable’s cell value to third party component when cell becomes editable.

The arguments passed to those callbacks should be clear enough apart from o which is the ezEditTable instance.

In the cell_editors section of the config, don’t forget to define custom editor type.

I hope this will help you and btw that’s a nice utilization of this plugin.

Cheers

Could you tell me how to insert a hidden field which will not be visible when inserting a new row via button click?

Hi @Atrilas,

please search comments with ’’hidden field” term. Find johartma question which seems to be relevant and look at my reply.

Cheers

Hello, a question … uploaded an image with the uploader editors in the table, how can I delete it?

@sergio57,

please note the polyfill messages you are seeing are part of TableFilter, a completely different component.

The messages simply suggest to import the mentionned packages in your page, if you intend to support older browsers like IE. Refer to this codepen: https://codepen.io/koalyptus/pen/XYeMVW and inspect the imported packages in Settings > Javascript tab .

Any further discussion on TableFilter functionality please use: https://github.com/koalyptus/TableFilter repo.

Cheers

Thanks for the reply, I was aware that TabFilter is another component … but I do not have an account in GitHub to insert an issue in this regard. However it was just to indicate that it is not on my page where the messages appear but on this page: http://www.tablefilter.com/0-configuration.html, and where the additional javascript components are present

sure, that page and many others on the TableFilter’s website are telling you that since you are using IE you should add the aforementioned polyfills in your page when using TableFilter. Modern browsers like Chrome or Edge are not prompted with above message. It is a friendly reminder for the developer. It is not an issue. Maybe the message is not clear enough.

Hey there, if I am implementing a table with up to 5 columns plus 1 action column everything works fine. If I am trying to implement a table with more data columns the icons and actions in the action column disappear. Any suggestions how to solve this? Thanks in advance!

Hi @Antrilas,

there is no limitation on the number of columns a table can have, whether there is a actions column or not. Something else may come into play…

- make sure your HTML table structure is valid

- double check any CSS rule that may interfere with the columns display.

For the moment those are my suggestions.

Cheers

Do you have a really simple example of the ezEditTable configuration object that includes the action for the Save button that you can share with me? Based on your samples, I was able to quickly use ezEditTable to edit my table. I can’t figure out to tie the Save button to invoke the PHP code to save the changes. I am looking for something like Table 8 and Table 9 on the Samples page. It looks like Table 9 includes a Save button, but I don’t see it on the actual page. Your demos are very good, but I am not that familiar with Javascript so I am having a hard time trying to simplify them for what I need to do. You have a good product and I appreciate your help.

Hi @dmilleville,

Happy to see you worked it through up to this point. What do you mean by what to check to get the PHP code to display? You probably want to have a look to those demos: http://edittable.free.fr/demos.php, pick the Simple demo. There are some php snippets that should give you an idea on how to setup the endoints the js plugin submits to (ie insert and update).

I based my solution on the simple demo. My PHP endpoint uses the CodeIgniter framework. I can see that the PHP endpoint receives the data from the JS plugin submit. That PHP endpoint then uses echo to provide feedback to the user. I can see the results of the PHP echo in the Chrome debugger console but the PHP echo does not display the text in the existing table window or in a new window. I tried having the PHP endpoint open a new window but it will not display the text. I thought this might be a caching or buffering problem, so I tried a few recommendations that I found while searching but nothing helped. Again, I realize your plugin is not oriented to a PHP endpoint but any guidance (or pointing me in a direction) is greatly appreciated. I have tried searching but I’m not even sure what terms to search for.

ok from what I understand you’d like to achieve something similar to this demo: http://edittable.free.fr/custom-actions-ajax.php

However, I advise to not follow that particular demo as it focuses on how to implement a custom delegate function for insert and update operations.

The same result in terms of UI could be achieved by:

1. basing your solution on the AJAX demo: http://edittable.free.fr/ajax.php . Once the AJAX based solution works for you, at least, the insert and update operations with no user feedback UI then:

2. leveraging the process_response callback (refer documentation ‘Actions callback events’) to implement a feedback UI similar to what you see in http://edittable.free.fr/custom-actions-ajax.php

Tell me how it goes.

hello, there is a way to change the && operator to another character, for example “y”

You are probably referring to the TableFilter plugin, please use appropriate channel: https://github.com/koalyptus/TableFilter/issues

Hello: i would like to use a Readonly/ Edit button to enable / disable ezedittable. How can i do this ?

Thanks and Best regards

Hi,

depending on whether you want selection capabilities to be turned on or not this is an example of your readonly button code, assuming et is an instance of EditTable:
et.Selection.Remove(); // up to you
et.Editable.Remove();
and this is the code for enabling selection and editing capabilities:
et.Selection.Set();
et.Editable.Set();

Refer to the documentation EditTable Class > Selection Public Methods and Editable Public Methods sections.

Cheers

That worked. Thanks!

When I try to create two ezEditTable objects on a single page, the second object’s ._ezEditTable property is null. This prevents the second table from being editable, and from the Add New Row button from being able to add new editable rows.

I’ve ensured unique table ID’s, and if I swap the order of the .init() calls, it’s always the second table that fails to be editable.

Any suggestions?

Just tried that, no change in the behavior

Ok, in that case I advise to manually import the ezEditTableTable plugin in your page. I just published this working example you can refer to: http://www.tablefilter.com/advanced-grid-editable-x2.html.

Note there is no longer need for filename and vendor_path settings as the plugin is already loaded.

That did it, it’s working! Thank you!!

Hi ! It is great ! Thanks a lot, but could you tell me how i can calculate column C = A+B for example, and this, ONEXIT of column A or B ??? Is it possible ?? I mean, with automatic showing results, not on refreshing the page ?? Thanks a lot

Is there a downloadable working script of this where you just add your database connection settings? I cannot for the life of me to get this to work. Your descriptions don’t make any sense.

Please note this is not a server-side solution, as stated in the product description this is a pure javascript library therefore does not come with any DB connection details or PHP files:

Important note

The aim of this code is to enhance the HTML tables capabilities, and provide a generic or custom way to send data to server for DB operations no matter what server technology you use. The examples featured on the script’s website use PHP and MySql and are meant to show how to configure the script in order to send data to the server. This is not a PHP / MySql based solution, you could use this script with other server side technologies. “

Cheers

Hello, have You a step by step manual to installation ajax version?

Hi, please refer to this demo: http://edittable.free.fr/ajax.php

Cheers

Pre-sales question: Does is come with a login system? If not, is there a workaround so only my client can edit the tables? Thank you

Hi @PaulVerbeek, this is purely a javascript solution, there is no authentication/authorization around it. You will need to implement the authorization layer and instantiate ezEditTable with or without editing capabilities based on your user permissions. Cheers

Hello there,

I need you advice & help on the issue below: 1. how can i refresh/reload the data table(Table only, not refresh whole page.) after record added. pls refer to this video for detail : https://www.screencast.com/t/q8jOF84f7N 2. Pls refer to the screen shoot below, may i know how can i filter the “Table No” (currently i am using TEXT which is not what i want. I want to use Dropdown) when “Venue” is selected? https://www.screencast.com/t/sWebbKyEkmNy

Many Thanks Ant

Dear koalyptus,

It is still not working.

Thanks

Dear koalyptus,

Do you have a working example for “process_response” feature for me to refer?

Thanks

There are no examples/demos featuring the “process_response” callback. However the http://edittable.free.fr/ajax.php demo and the examples in the documentation should give you an idea on how to set it up. Please provide more context… what is not working? Have you managed to activate the ajax mode?

Hi Max!

I have a question regarding the selectable values in cell_editors. When adding a new line, the dropdown option will only show the existing values of the current list. if a value is not present, it won’t show.

I fixed that for an column which is boolean by adding : custom_slc_options: [‘true’,’false’]

That makes the trick as boolean only has 2 possible options, but my question is : how to handle a column that have entries which can have dynamic values from a DB table. For example, I want to be able to select a name from a DB table. how can I set this up, so the list of names takes the name from the DB table, and not only the one that are already present in the current list? otherwise, when adding a name on the DB table, I will never have to ability to select it on the current list..

I don’t know if I’m clear enought… let me know if you need more information. Thanks in advance! Loïc.

Hi Loïc,

My advice is to use your server to query the DB to get the `dynamic` list of values and then inject them into the client-side. You would then use custom_slc_options to populate the inline drop-down cell editor as you are doing for the boolean.

The implementation of your server-side logic to query the DB is outside the scope of this plugin, I remind this is a pure javascript solution with no server-side dependency. You are completely free to implement your way to pass the DB values to the client, as long the result is a javascript array. If you are using PHP , I can point you to stackoverflow: https://stackoverflow.com/questions/4885737/pass-a-php-array-to-a-javascript-function

Cheers

Is there any way of adding an Add button outside of the table? I can only see the add button appear in the controls column when I have 1+ record. If I have 0 records, there’s no way to add a new row. Had a look at the examples but can’t see any example. Thank you

Hi, most of the online demos feature a plus button adding a new row, eg: http://edittable.free.fr/demo1.php

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey