Okay
  Public Ticket #3095571
Mark Complete In Line?
Closed

Comments

  • Tonya McClelland started the conversation

    Hello;

    Does it have the ability to Mark Complete in-line in the table?  This would be for a to-do list type thing and we do not want users to have to click into the row to mark it complete?

    Thank you.

  •  1,559
    Uroš replied

    Hello Tonya,

    Thank you for reaching out to us.

    Currently, we don't have a built-in solution to create a "to-do" checklist / "mark as complete" without having to edit the table.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    The closest we can get to a "to do check list", is to make an editable column, that will have two possible values, with a one value selectbox for editing.

    In this example, we will call values "to do", and "complete".

    We will additionally add custom CSS, to change the look, depending on the value.

    Here is how the table will look :

    4771064961.png

    First, we will set available values manually, for the column, in the Data Tab:

    5877158066.png

    Then, in the Editing Tab, we set Editor Type as Single value selectbox , with a predefined value of "to do".  Then each new row will be set as "to do" by default, until we change to "complete".

    6249004222.png

    ( * The editing can be set in a modal, and as in-line editing. )

    -

    Now, we add some Conditional Rules, to change the content to a green checkbox, if the value is "complete";

    and, for example - change cell to red color if "to do".

    4873687758.png

    This is the custom HTML for "set cell content" of "complete"  :

    <div class="checkmark"></div>
    

    Then we use this custom CSS to make it look like a green checked box  :

    .checkmark {    display: inline-block;     transform: rotate(45deg);     height: 16px;     width: 10px;     border-bottom: 7px solid #78b13f;     border-right: 7px solid #78b13f;
    }
    

    - We add the custom CSS in the table Customize tab, like so :

    9354970377.png

    I hope this will help.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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