string column with checkbox and text?

Robson Wild posted over 5 years ago

hi,

I have string columns MakeFlag with valid / invalid values and want display checkbox along based on that.

Did that already and it's almost working but I don't want user to be able edit text value just the checkbox, now he can do both.

how to do that? thanks

            $(function () {
                var dataURL = "">localhost:54493/.../values";
                $("#grid1").igGrid({
                    dataSource: dataURL,
                    primaryKey: "TIDnumber",
                    renderCheckboxes: true,
                    restSettings: {
                        update: { url: dataURL + "/Save" },
                            remove: { url: dataURL, batch: true },
                            create: { url: dataURL, batch: true }
                        },
                autoGenerateColumns: false,
                height: "350px",
                width: "800px",
                columns: [
                        {headerText: "TIDnumber", key: "TIDnumber", dataType: "number" },
                        {headerText: "Description", key: "Description", dataType: "string" },
                        { headerText: "Quantity", key: "Quantity", dataType: "string" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "string", width: "15%", template: "<input type='checkbox' {{if ${MakeFlag} == 'Valid'}} checked='checked' {{/if}}>${MakeFlag}" }
                            ],
                features: [
                        {
                        name: "Updating",
                        editMode: 'cell',
                        editCellEnded: onEditCellEnded,
                        columnSettings: [{
                            columnKey: 'TIDnumber',
                        readOnly: true
                    },
                            {
                columnKey: "Description",
                editorType: 'string',
                validation: true,
                                editorOptions: {required: true }
        }
        ]
}
]
});

17590

Offline Vasya Kacheshmarova posted over 5 years ago in reply to Robson Wild

Hello Robson,

Thank you for posting in our community.

By design calling API programmatically does not raise events related to their operation the those events are only raised by their respective user interaction. Since the combo belongs to the default grid editors it is triggering grid events. However, since you are manually setting the cell value using the API (using setCellValue method) when the checkbox value is changed editCellEnded event is not fired.

My suggestion for your scenario is using only the combo editor provider for editing the "MakeFlag" column and use the checkbox for display purposes.

Please let me know if you need any further assistance with this matter.
Cancel
Reply

Cancel
55

Offline Robson Wild posted over 5 years ago in reply to Robson Wild

ok, I solved that using dropdown combo in addition to checkbox, but onEditCellended event is not called when checkbox is clicked even though it does change the text as well. When selection is mad from combo event is fired,

how to make checkbox to fire that event? anybody here?

columnKey: "MakeFlag",
                    editorType: 'combo',
                    editorOptions: {
                        mode: "dropdown", dataSource: myJSON, disabled: false                //
                            }
Cancel
Reply

Cancel
55

Offline Robson Wild posted over 5 years ago

I almost got it right changing template to that:

              var mytemplate = "<input type='checkbox' {{if ${MakeFlag} == 'Valid'}} checked='checked' {{/if}} onclick='changeState(this, ${TIDnumber})'>${MakeFlag}";

and:

function changeState(element, rowId) {
                var $checkBox = $(element);

                if ($checkBox.prop("checked")) {
                    $("#grid1").igGridUpdating("setCellValue", rowId, "MakeFlag", "Valid");
                } else {
                    $("#grid1").igGridUpdating("setCellValue", rowId, "MakeFlag", "Invalid");
                }
            }

the only problem is when I click on text it go to edit mode covering checkbox, editing text is disabled but still editor covers checbox.

Any idea what's the trick?
Cancel
Reply

Cancel