Basic element-based field renderer

A basic field renderer that renders text in read mode, and creates an input element in edit mode. Illustrates how to use an element mode strategy, indicating that context.element must be updated for rendering.

../../../_images/basic-element-renderer.gif

Example Code

Download the sample page for this field renderer here, or see the example code below.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const FieldRenderer = skuid.component.FieldRenderer;

return new FieldRenderer({
    readModeStrategy: "element",
    read: function (fieldComponent) {
        let context = fieldComponent.cpi.getContext(),
            { element, field, model, row, value } = context;

        console.log("Read mode");
        element.innerText = value;
    },

    editModeStrategy: "element",
    edit: function (fieldComponent) {
        let context = fieldComponent.cpi.getContext(),
            { element, field, model, row, value } = context;

        console.log("Edit mode");
        let input = document.createElement('input');
        input.value = value;
        element.append(input);
        // We'll need some logic here to synchronize the change
        // of the **element's value** with the model
        // that element is attached to.
        input.addEventListener('change', (event) => {
          model.updateRow(row,
              { [field.id]: event.target.value },
              { initiatorId: fieldComponent.id }
          );
        })
    }
});

Since the element strategy utilizes direct DOM manipulation, wrapping elements with jQuery works as well.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const FieldRenderer = skuid.component.FieldRenderer;
const $ = skuid.$;

return new FieldRenderer({
    readModeStrategy: "element",
    read: function (fieldComponent) {
        let context = fieldComponent.cpi.getContext(),
            { element, field, model, row, value } = context;

        $(element).text(value);
    },

    editModeStrategy: "element",
    edit: function (fieldComponent) {
        let context = fieldComponent.cpi.getContext(),
            { element, field, model, row, value } = context;

        let input = skuid.$("<input>");
        input.val(value);
        $(element).append(input);
        // We'll need some logic here to synchronize the change
        // of the **element's value** with the model
        // that element is attached to.
        input.on("change", function (event) {
          model.updateRow(row,
              { [field.id]: event.target.value },
              { initiatorId: fieldComponent.id }
          );
        })
    }
});