Conditionally editable rules for grid cell

[herojjParticipant]

Hi Team,

I need to enable the cell edit function in jqxGrid conditionally, please see the code below. I want to make the autoCompleteOn editable only when the typeCodeDesc is not empty. In other case it should not be editable. How can I do this?

$scope.autoCompleteTableSettings = {
				altrows : true,
				width : '95%',
				selectionmode : 'singleRow',
				source : new $.jqx.dataAdapter({
					url : "autocomplete/queryAutoCompleteList",
					dataType : "json",
					dataFields : [ {
						name : 'typeCodeDesc',
						type : 'string'
					}, {
						name : 'autoCompleteOn',
						type : 'string'
					}]
				}),
				columnsresize : true,
				columnsreorder : true,
				columns : [ {
					text : '<b>Legacy Order Type</b>',
					dataField : 'typeCodeDesc',
					align : 'center',
					editable : false,
					cellsalign : 'center',
					width : '50%'
				}, {
					text : '<b>AutoComplete On</b>',
					dataField : 'autoCompleteOn',
					columntype: 'template',
					align : 'center',
					cellsalign : 'center',
					width : '50%',
					createEditor: function (row, cellvalue, editor, cellText, width, height) {
	                       // construct the editor.

	                       var source = ["Yes", "No"];
	                       editor.jqxDropDownList({autoDropDownHeight: true, source: source, width: '50%', height: '25px' });
	                },
	                initEditor: function (row, cellvalue, editor, celltext, width, height) {
	                	editor.jqxDropDownList('selectItem', cellvalue);
	                },
	                getEditorValue: function (row, cellvalue, editor) {
	                    return editor.val();
	                },
				} ]
			};

Best regards,
Michael

[DimitarParticipant]

Hello Michael,

Here is the solution:

columns: [{
    text: '<b>Legacy Order Type</b>',
    dataField: 'typeCodeDesc',
    align: 'center',
    editable: false,
    cellsalign: 'center',
    width: '50%'
}, {
    text: '<b>AutoComplete On</b>',
    dataField: 'autoCompleteOn',
    columntype: 'template',
    align: 'center',
    cellsalign: 'center',
    width: '50%',
    cellbeginedit: function(row, datafield, columntype, value) {
        var typeCodeDescCellValue = $('#jqxGrid').jqxGrid('getcellvalue', row, "typeCodeDesc"); // the jQuery selection may have to be modified
        if (typeCodeDescCellValue === '') {
            return false;
        }
    },
    createEditor: function(row, cellvalue, editor, cellText, width, height) {
        // construct the editor.

        var source = ["Yes", "No"];
        editor.jqxDropDownList({
            autoDropDownHeight: true,
            source: source,
            width: '50%',
            height: '25px'
        });
    },
    initEditor: function(row, cellvalue, editor, celltext, width, height) {
        editor.jqxDropDownList('selectItem', cellvalue);
    },
    getEditorValue: function(row, cellvalue, editor) {
        return editor.val();
    },
}]

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[herojjParticipant]

Thanks for your help.

[Author]

Posts