Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Robson Wild
55
string column with checkbox and text?
posted

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 }
        }
        ]
}
]
});

 function onEditCellEnded(event, args) {
                if (args.columnKey == "MakeFlag") {
                    //var cell = args.editor;
                    var cellValue = $("#grid1").igGrid("getCellValue", args.rowID, "MakeFlag");
                    if (cellValue == "Valid") {
                        $("#grid1").igGridUpdating("setCellValue", args.rowID, "MakeFlag", "Invalid");
                    } else if (cellValue == "Invalid") {
                        $("#grid1").igGridUpdating("setCellValue", args.rowID, "MakeFlag", "Valid");
                    }
                }
            $("#grid1").igGrid("saveChanges");
        };

Parents
No Data
Reply
  • 55
    Offline posted

    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?

Children