Okay
  Public Ticket #2997418
Ability to customise the look and feel of the filter boxes
Closed

Comments

  •  1
    Justin Weldon started the conversation

    Good day,

    I trust you are well. I have recently purchased a table rendering solution from Ninja Tables, but am experiencing performance and rendering problems, so am looking for alternative solutions.

    I see that WPDataTables can handle larger volume of information. My Excel file has 6 columns, and around 30,000 rows, which shouldn't be a problem for WPDataTables, from what I can tell.

    My primary requirement, after the data has rendered, is filtering of rows based on columns, and for this data to be influenced by all other filters already in place (cascading filters?). From what I can tell, your plugin is very capable of achieving this. Am I able to search within a filter so that I don't have to scroll to find the items I'm looking to filter?

    My next concern is look and feel, and I would like to know how flexible the filter boxes are regarding positioning, borders, width, height, etc. Please may you confirm that these are able to be modified according to my requirements?

    I was wondering if you also had a Sandbox for me to play around with beforehand, so that I can see how intuitive the solution is for me to manage without having to see additional support.

    Many thanks


  •  1,499
    Uroš replied

    Hi, Justin, 

    Thank you for expressing interest in purchasing the wpDataTables plugin.

    1. Regarding the usage if you link a table to Excel file - Here is a useful documentation section about this.

    Some important things to note if you link the table to Excel source :

    They generally work slower than CSV-files, or even Google Spreadsheets; so if your table is larger than 2000 > 3000 rows, it is much better to port it to a different format, or – even better – to MySQL table ( or you can use “Create a table by importing data from data source” to import your Excel file to MySQL).

    Our plugin can handle very large data, if a proper setup is made - Here is an example we made with SQL based table that has more than 2 million rows.


    2. Regarding the filters, everything you described can be done without issues.

    With our add-on Powerful Filters, you can set up Cascading filters, and also, any filter can have a "search" as well as a dropdown to select available filter values.

    3. You can change the positioning to a certain degree, for the filter boxes, using custom CSS, but it will be limited.

    For example, you can't completely swap positions between all HTML DIVs holding the filters,

    but we can assist as much as we can, with some basic CSS adjustments, such as height, width, color, different fonts, borders, positioning to a certain extent and similar modifications.

    Any custom styles you need can be added using the Customization Tab, on the table setup, if you want just to target a specific table, or you can place custom CSS to all tables in the main plugin settings "Custom JS and CSS".

    Here are some pages from our Documentation on this :

    Coloring and styling columns;

    Customize table feature.

    4. Absolutely, you can try wpDataTables add-ons before purchase on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

    And, just wanted to point out that we have a 15-day money-back guarantee period. So if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all our products and add-ons).

    Please reach out to us if you have any other questions.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Justin Weldon replied

    Hi Uroš,

    Many thanks for your detailed response and attention to my requirements, it is greatly appreciated. I have actioned upon your recommendations and have purchased the Advanced Filter Add-On, and am happy with the speed, especially as I am now connected to my MySQL Database - thank you for making that so easy :-)

    Having gone through the technical side of things, I now find myself working through the look and feel requirements, and would appreciate your assistance with the following, from the following URL:

    https://dev.valvetech.co.za/cmct/

    1. When I select a filter and start typing in the Search Field, I'm only able to get through 1 letter before the dropdown disappears and I can no longer view any results. Is this a bug as the Sandbox sites work perfectly
    2. How do I change the colour and layout of the Clear Filters button?
    3. I see the Sandbox sites have really nice looking Table Tools (Print, Excel, CVS etc). How do I change the look and feel of these items to make them look like buttons (i.e. borders, colours, background colours etc)?
    4. I have quite a bit of white-space between the filters and the Table Tools. How do I reduce / remove this?
    5. Is there any way I can place the Show Entries field (top right of the table) next to the Pagination text at the bottom right?
    6. I'm assuming if I wanted to put a background colour into the area above the table, I can do this, as well as a border?
    7. Is there a way that I can change the filter-title colours?

    That's it from a Look & Feel Perspective. Two last questions from a technical perspective..

    1. How would I hyperlink contents within particular cell? i.e. if I wanted a product compatibility value to be hyperlinked to a page within my site, would I be able to do this?
    2. When I'm editing the table properties via the Create a Table Tab, the screen keeps on freezing every time I make a change and I have to stop the page, then exit, then reload and then go back in. The change is already applied, but the page keeps freezing.

    That'a about it. Thank you again for your time and I'm very happy with the speed and functionality, this is great and I am very excited about my next steps with your plugin.

    Many tanks

    Justin

  •  1,499
    Uroš replied

    Hello Justin,

    Apologies for the delayed response.

    Glad to be able to assist you.

    1. It is possible that it is a bug that we previously encountered. I will pass this detail to our 2nd level Team, and as soon as they advise, I will come back to you regarding that. 2. To style the "Clear filters" button, you can use this CSS selector, and for example, I added some red borders ( you can add any styling properties you need):

    .wpDataTablesFilter .wpDataTableFilterSection#wdt-clear-filters-button-block button {   border: 2px solid red; }

    3. You can change the Base skin from the Customize Section, and if you set it to Aqua or Purple, you will get the same looking Table Tools as on the Sandbox. Or if you want to customize them, and use the same skin you already set, you can add this custom CSS, and edit the styles :

    /* DIV holding all the Table Tools buttons */.wpDataTablesWrapper div.dt-buttons { margin-bottom: 20px; margin-left: 20px; margin-right: -10px; float: right; border: 5px solid purple;}
    /* for each individual Table Tool button */
    .wpdt-c.wdt-skin-light .wpDataTablesWrapper a.DTTT_button, .wpdt-c.wdt-skin-light .wpDataTablesWrapper a.DTTT_button:hover { border-color: transparent; border-style: solid;}

    4. To reduce the white space between the filters and Table Tools, try this custom CSS, add it to the Customize Tab, and let me know how it looks:

    .wpDataTablesWrapper { margin-bottom: 0px;
    }
    .wpDataTablesFilter .wpDataTableFilterSection:not(#wdt-clear-filters-button-block):not(#wdt-pf-search-filters-button-block) {  margin-bottom: 0px;   }
    

    5. At this time, we don't have a way to change where the "Edit entries" section is placed. For the time being it has to be at the top right. We might add this in the future, but I can't say an ETA on it. 

    6. This is a bit trickier, to select only the area above the table. If you could give me a bit more time to work on that one, please, and we will see what we can do? 

     7. For filter - Title colors, use this CSS please : 

    .wpDataTablesFilter label { background: blue; color: brown; }

    ________________

    1. To place hyperlinks in the cell, you can either use an URL column - if you only need one hyperlink per cell, but if you need multiple hyperlinks in the same cell, you have to use a multi-string column type and wrap the links in anchor HTML tags.

    2. Regarding that freezing of the screen on editing, but the edit saves, it is quite odd. We can take a look from the WP Admin end, if you'd like please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.

    Along with that, please provide us with the table ID so we can check the right one.

    Looking forward to your reply.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Justin Weldon replied

    Ahhhh you see - this is how you do service!! :-D Thank you Uroš, I really appreciate your time and effort. I have made some great inroads with my requirement and am very happy with having made the commitment to WPDataTables - great work, thank you!

    I have started putting the CSS into place and have made important changes. I am still struggling with the white space, but that is not a crucial component that needs resolution now. What I would like to find out is if I can get all my filters onto one level row, either by reducing the size of the text, or reducing the space between each element. The following URL refers:

    https://dev.valvetech.co.za/products/tools/composite-media-compatibility-table/

    You'll notice how the filters are on two lines, and the one heading is spread onto two lines. I understand that length and characters plays a part, but I was wondering if I have any influence over these options? In my backend "Preview and Columns Setup" the fonts are definitely smaller and they all fit onto one row, but on the front-end the font is bigger.

    Then just two other questions:

    1. How do I change the filter content that says "Nothing Selected" to have some examples? I did change the placeholder for the filter, but this changed both the filter title and the placeholder content. I'm not looking to change the Filter Title, only the placeholder content to some text of my own, without putting in pre-selected content
    2. How do I refresh the data from my local CSV file without having to recreate the table and go through and redo all the table configurations? I've had to update the data a couple of times, but I don't know how to refresh it on the MySQL table side without having to recreate the entire table with all its individual settings. I'm sure there is a way, I'm just not sure what it is...

    Besides that, this is an excellent product and I'm very happy with the service and support, the price, and the final result. This is working very well for me thank you! Interestingly the plugin hasn't frozen for a while, so maybe there was a WordPress update that resolved the issue. Should it happen again, I will let you know.

    Hope all is well on your side.

    Cheers

    Justin

  •  1,499
    Uroš replied

    Hello Justin,

    Sorry about the delayed response time

    Thank you for the kind words. I am glad to be able to help :)

    Regarding white space, yes, sometimes that can happen when we start adding custom CSS and changing the styles, especially if a theme is adding its own CSS additionally. 

    We can try to help and advise, as much as we can. Our support goes to a certain extent, depending on how much custom work is needed for a solution.

    I am looking at the page, but not sure which white space you are referring to. Can you perhaps highlight or describe that in more detail, and we will try to think of a solution for you?

    Regarding the font size is different on the back-end and the front, that usually happens when the active theme overrides something.

    wpDataTables is a WYSIWYG (What You See Is What You Get) concept-based plugin. This means that the table should look the same both in the back-end and in the front-end. If your front-end table looks and behaves differently than in the back-end, this usually implies that there is another plugin (or the current theme) that's changing the behavior of our plugin.

    You can try to switch to Twenty Twenty Two WP theme and test if the fonts and layout look different, and we can take it from there, but at least to isolate what is changing the fonts/layot to start with.

    1. Changing the filter label can be done in column settings, as I will show you on this screenshot :

    5668161194.png

    2. As for refreshing the data using CSV, for example, if you had only 2000, 3000 rows, that would be easy, you would simply link the CSV file to the table and it would pick up the data from the source,

    but because it is larger data set, we have to use the database/SQL, and server-side processing to limit the rows displayed at a time in order to keep your page stable, otherwise, it would become too slow or even crash.

    - The best way you can keep updating this through CSV, can be if you add new rows to the CSV, then delete the headers, and only keep the new rows you added/delete the rows which already exist in wpDataTables,

    and use PhPMyAdmin or other methods to import the new data into the database table.

    Let us know how that sounds and if you need further assistance, I apologize if we didn't cover everything you asked for.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Justin Weldon replied privately
  •  1,499
    Uroš replied

    Hi, Justin

    Really glad to be able to assist you.

    Good to see that you were able to sort out the data refresh by installing the "WP Data Access", that is awesome.

    Yes, messing with CSS can sometimes consume a lot of time, but we will do the best we can, and to the maximum extent we can that our support can cover.

    I added some new custom styles to your table, check it out, I think it looks closer to what you need to achieve:

    7474969975.png

    -

    Regarding the bug that inputting anything in that Media column filter search, freezes after couple of seconds, we've seen this before, and our developers, as I recall, managed to debug it, if I am not mistaken.

    I believe it was caused by some kind of Bootstrap/JS conflict with a page builder or another plugin, but I'm not quite sure.

    When I tried to replicate the issue by creating a new test table on your WP Admin, just a clean new table did not behave like this, so there must be something specific on that Table ID 6.

    We will escalate this to our 2nd level Team, and I will keep you posted on our progress. As soon as they investigate, I will give you more information on that.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1,499
    Uroš replied

    Hello Justin,

    It took some time for our developers to test everything thoroughly - regarding the search filter bug.

    A particular combination of the settings you use together is causing this in our plugin.

    Basically, with our Powerful Filters add-on, if you enable the search option for a selectbox/multi-selectbox while having Cascacing Filters at the same time, causes this bug.

    At this time, a temporary solution is if you can disable the search option for the columns that have selectbox/multi-selectbox when you use Cascading Filters.

    We know this is not ideal; because when you disable the search option,

     a user who views the dropdown for the filters, they have to either manually scroll and find the filter value they need, or they can use "CTRL+F" when the dropdown opens if using a browser such as Google Chrome. Sorry for the inconvenience.

    Our developers are still working on this and will implement a more permanent solution in one of the next updates for the plugin.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Justin Weldon replied

    Hiya Uroš,

    Hope you're having a good start to the week.

    My development with the table is going very well and I'm very happy with the result, all is looking great, thank you for your support and with the guidance with the CSS.

    I'm just following up on the query regarding the drop-down and filtering. I see that there have been a few updates to the plug-in, but I'm not sure if a fix my query has been dealt with yet.

    Please may you let me know if there is an expected ETA around this as I would like to release the page to Live but can't do so yet if there is still a bug in it.

    Many thanks

    Justin

  •  1,499
    Uroš replied

    Hello Justin,

    Thank you for reaching back to us.

    Which fix exactly are you referring to?

    Looking forward to your reply.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Justin Weldon replied

    Hi Uroš, hope you and your team are well.

    I'm referring to the bug where I start to search for an item in the multi-selectbox dropdown and the items suddenly disappear. Your comment at the time was:

    "Basically, with our Powerful Filters add-on, if you enable the search option for a selectbox/multi-selectbox while having Cascacing Filters at the same time, causes this bug."

    "Our developers are still working on this and will implement a more permanent solution in one of the next updates for the plugin."

    You suggested that we use CTRL+F but this picks up all instances of the characters on the entire webpage and it isn't ideal, so I haven't yet implemented the change. Once this bug is resolved, I will be able to go live with the solution.

    Many thanks

    Justin 

  •  1,819
    Miloš replied

    Hi, Justin

    We are happy to say, our developers advised us we have a temporary fix.

    Can you please edit this JS file in any text/code editor, it is located here:

    ../wp-content/plugins/wdt-powerful-filters/assets/js/wdt.pf.frontend.js   around line 581 

    ; of you can use Ctrl+F to search for :

    return $filter.find('select.wdt-multiselect-filter').selectpicker('val') !== null;
    
    9781973320.png

    then change it to this :

    var multiSelectSelected = $filter.find('select.wdt-multiselect-filter').selectpicker('val');
    if (Array.isArray(multiSelectSelected)) {
        return multiSelectSelected.length;
    }
    return multiSelectSelected != null;
    

    Let me know how it goes. 

    They are still in the testing phase, but as soon as they finish testing everything, they will implement the fix into the plugin's core. 

     I still can't say a definite ETA yet, unfortunately, so, if they don't finish in time for the next update - you would have to repeat this process - but we are getting closer.

    Looking forward to your reply.smile.png

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Justin Weldon replied

    Hi Miloš,

    Thanks for your response, I appreciate you and your teams effort and look forward to using more and more of your product.

    Unfortunately the fix didn't achieve the desired effect, and I have demonstrated this via the link below:

    https://www.loom.com/share/0d740de50e1c44819da2ddfa1859ff1c

    What I know about coding is dangerous so please have a look at what I did to confirm that all is in order?

    I do look forward to having this resolved and am using your product in other parts of my website. Reagrding this, how do I modify the borders and border-lines in a simple table? The following URL refers:

    https://dev.valvetech.co.za/products/butterfly-valves/butterfly-valve-cast-iron-wafer-type-trigger-lever-npdi-disc/

    I'm trying to get my Dimension table to display according to my expectations but am just missing the mark.

    Please may you assist?

    Many thanks

    Justin


  •  1
    Justin Weldon replied

    Happy Holidays by the way!! :-D

  •   Miloš replied privately
  •  1
    Justin Weldon replied

    Hi Miloš,

    Thank you for your help again, it is always appreciated.

    I'm really sorry to bother you, but I'm struggling to find where to modify/insert the Custom CSS for a Simple Table (not a Manual one) that you mention below. Once I know where to place it, I'll try and figure out the rest.

    I'm happy to wait on the multiselect fix until your team has fixed it. I'm working on look and feel at the moment so am preoccupied.

    Thank you!

  •  1,819
    Miloš replied

    Hey, Justin

    Sorry about that  - i forgot to mention, for Simple tables, since we don't have the Customize option;

    You will have to implement custom CSS in the main plugin settings > Custom JS and CSS tab :

    5296032136.png

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1,819
    Miloš replied

    Hi, Justin


    Sorry that it took me so long to re-check everything.

    I have to apologise, somehow i have mixed up this bug with another one, to be completely honest with you...

    We had something similar in the past where certain filter functionality was not working.

    The developers already made a fix for that - it is still in the testing phase before it gets fully implemented into the core, but that is for some users that have an issue that the multiselectbox filter does not work in Cascading filters in certain situations...

    -

    But regarding the search option in the selectbox/multi-selectbox when you use Cascading Filters;

    the developers realised this is something that we will have to disable for the time being, until they perhaps improve the functionality, I'm afraid.

    So, in the next update, they will remove this option to be used in combination with Cascading Filters.

    You will still be able to use selectbox and multiselectbox in Cascading filters, but not with the search option.

    8977858876.png

    Sorry for the inconvenience.

    -

    I hope i explained this correctly, please let me know if anything was not clear.

    We will also add this into our Documentation, and perhaps as tooltips in the plugin itself to avoid confusion.


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables