I am developing a custom plugin that has a variable setting that can take multiple options. I've decided to use forms.editableTable from Craft's _includes/forms. It does the job great, saving and retrieving the settings.

Now I am trying to add validation to the columns on the table: the validation model is set and I am correctly passing the errors to the "right" position (Meaning I get the row index and which column has the error).

I know Craft.EditableTable has the getRowHtml method that I can use to retrieve the row and apply error classes to the field(s).

I've watched the Javascript in the Control Panel video, but Craft.EditableTable doesn't set a data attribute with it's instance.

Is there any other ways to get it?



So, after fiddling with it for a while, this is what I came up with it:

When using forms.editableTable make sure you don't initialize Craft.EditableTable. You can do that by setting the initJs to false:

{{ forms.editableTable({
    id: 'myTableId',
    name: 'myTableName',
    cols: yourTableCols,
    initJs: false,
}) }}

That means that you will have to initialize the Craft.EditableTable yourself:

{% includejs %}
(function () {

  var t = new Craft.EditableTable(
    "{{ 'myTableId'   | namespaceInputId   | e('js') }}",
    "{{ 'myTableName' | namespaceInputName | e('js') }}",
    {{ yourTableCols|json_encode|raw }},
      onAddRow: function( tr ) {
        // attach event listeners to row fields here

} ());
{% endincludejs %}

From this point on, you can add your own listeners to the fields in the row.

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.