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
1145
Editing row clears read only column
posted

I have a grid with 3 columns. The first is one we use to create a unique index for each row and is hidden. The second column is SampleID and contains a pre-assigned value that is read only. The third column, "Part" contains a combo that lets the user select a value. In my actual code I have a formatter and stuff but for the sake of demonstrating my problem it's irrelevant, so not included...


The way the grid should work is that the user will be given a list of "SampleIds" and for each SampleID the user should select a "Part".

The problem is when the user selects a Part, the sample column in that row gets changed to null. I can't figure out why... The SampleId should remain unchanged.

Code example follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Grid Test</title>
    <link href="Content/themes/infragistics2012/infragistics.theme.css" rel="stylesheet">
    <link href="Content/structure/infragistics.css" rel="stylesheet">
    <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/infragistics.core.js"></script>
    <script type="text/javascript" src="Scripts/infragistics.lob.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var gridOptions = {
                "mergeUnboundColumns": false,
                "enableUTCDates": false,
                "width": "100%",
                "localSchemaTransform": false,
                "autoGenerateColumns": false,
                "autoCommit": false,
                "dataSource": [{
                    "SampleId": "88-PR0813201800595",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800596",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800597",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800598",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800599",
                    "PartId": 0
                }],
                "responseDataKey": "Records",
                "primaryKey": "Index",
                "columns": [{
                    "key": "Index",
                    "dataType": "number",
                    "headerText": "Index",
                    "hidden": true
                }, {
                    "key": "SampleId",
                    "dataType": "string",
                    "headerText": "Sample Id"
                }, {
                    "key": "PartId",
                    "dataType": "string",
                    "format": "combobox",
                    "headerText": "Part"
                }],
                "features": [{
                    "name": "Sorting",
                    "type": "local",
                    "caseSensitive": false
                }, {
                    "columnSettings": [],
                    "name": "Filtering",
                    "type": "local",
                    "caseSensitive": false,
                    "mode": "simple"
                }, {
                    "columnSettings": [{
                        "columnKey": "SampleId",
                        "required": false,
                        "readOnly": true,
                        "validation": false
                    }, {
                        "columnKey": "PartId",
                        "required": true,
                        "editorType": "combo",
                        "editorOptions": {
                            "valueKey": "PartId",
                            "textKey": "DisplayName",
                            "dataSource": [{
                                "PartId": 1,
                                "DisplayName": "Thigh"
                            }, {
                                "PartId": 2,
                                "DisplayName": "***"
                            }, {
                                "PartId": 3,
                                "DisplayName": "Wing"
                            }, {
                                "PartId": 4,
                                "DisplayName": "Drumette"
                            }]
                        },
                        "validation": false
                    }],
                    "name": "Updating",
                    "horizontalMoveOnEnter": true,
                    "validation": true,
                    "enableAddRow": false,
                    "enableDeleteRow": false,
                    "editMode": "row",
                    "showDoneCancelButtons": true,
                    "startEditTriggers": "dblclick,f2"
                }, {
                    "name": "Selection",
                    "mode": "row",
                    "multipleSelection": false
                }, {
                    "showPageSizeDropDown": true,
                    "name": "Paging",
                    "type": "local",
                    "pageSize": 20
                }, {
                    "name": "Resizing",
                    "deferredResizing": false
                }]
            }
            grid = $("#grid").igGrid(gridOptions);
        });
    </script>
</head>
<body>
    <h1>Grid</h1>
    <div>
        <table id="grid"></table>
    </div>
</body>
</html>