1

I see in the documentation that the grid editable fields is outputted using the tag {field}

{exp:channel:form channel="xxxxxx" ... } {field:foobar} {/exp:channel:form}

This displays the rows and columns, some controls for adding, etc.

My question is, are there ways or custom addons that will allow me to manually output the markup?

The problem with the native solution is that I am not given control on how the markup is done, which means that it looks pretty out of place for my site

1

As you say by default Channel Form can output an editable grid by {field:grid_field}.

It's 'useful' how EE displays the table code, names fields and auto loads in the required CSS & JS. Not so handy for styling. One option would be to load in another CSS file after EE's grid CSS to style it how you need - this is the easiest.

To get looping field data use a Custom Field Tag Pair. The docs are unclear how to handle tag pair data like Grid. Frustrating as the docs even reference Grid for the tag pair! http://ellislab.com/expressionengine/user-guide/modules/channel/channel_form/index.html#custom-field-tag-pair

I've managed to get the data out, but to do so it looks like it's just the normal tags from channel:entries doing the work rather than channel:form. Importantly EE does save the data back to the Channel entry. The tricky part will be adding JS functionality Grid requires for adding rows etc.

Looking at what field names {field:grid_field} outputs I've duplicated them for my custom form fields. On submit EE does update Grid. Theoretically you could write your own JS to add new rows or link to EEs JS, but you'd need to make sure your HTML has the IDs and classes Grid JS is expecting.

{exp:channel:form
channel="channel"
entry_id="1"
}

<label for="title">Title</label>
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" onkeyup="liveUrlTitle();">

    <table>
    {grid_field}

        <tr>

            <td>
                <input type="text" name="grid_field[rows][row_id_{grid_field:count}][col_id_1]" value="{grid_field:grid_input}">
            </td>

            <td>
                <textarea name="grid_field[rows][row_id_{grid_field:count}][col_id_2]">{grid_field:grid_text_area}</textarea>
            </td>

        </tr>

    {/grid_field}
    </table>

    <hr>

    <input type="submit" name="submit" value="Submit">

{/exp:channel:form}

** There is an issue with doing like this. Using single tags, EE doesn't update any fields you don't include in the form. Unfortunately leaving out fields from grid, blanked out existing data, so you'd need to include all fields even if hidden.

Also doing it like this, everything is hard-coded so if you added another field to grid you'd have to update your template.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.