Edit Read Only columns with javascript

[Informed Sources]

Hi,

 

I have a few columns defined that I don't want the user to change.

When they click a button, it calls a service which returns data. I want to update the columns with this data.

The problem is, if they're set to read-only, I can't change them, and the databound event never fires

 

.Events(e => e.DataBound("dataBound")) 

.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.SnapshotDefinitionID);
                //model.Field(p => p.NextSnapshotQueueID).Editable(false);
                //model.Field(p => p.NextSnapshotQueueTime).Editable(false);
                model.Field(p => p.LastSnapshotQueueID).Editable(false);
                model.Field(p => p.LastSnapshotQueueTime).Editable(false);

                model.Field(p => p.NextScheduleID).Editable(false);
                model.Field(p => p.NextScheduleTime).Editable(false);
                model.Field(p => p.LastScheduleID).Editable(false);
                model.Field(p => p.LastScheduleTime).Editable(false);

model.Field(p => p.SnapshotQueueCount).Editable(false);
model.Field(p => p.ScheduleCount).Editable(false);


//model.Field(p => p.Client).DefaultValue(
//    ViewData["defaultClient"] as DropDownListViewModel);
})
.Create(update => update.Action("BulkCreate", "SnapshotDefinition"))
.Read(read => read.Action("BulkRead", "SnapshotDefinition", new { clientId = @Request["ClientID"], snapshotDefinitionID = @Request["SnapshotDefinitionID"] }))
.Update(update => update.Action("BulkUpdate", "SnapshotDefinition"))
.Destroy(update => update.Action("BulkDestroy", "SnapshotDefinition"))

 

 
    function createSnapshot(e) {
        window.grid = $("#grid").data("kendoGrid");
        window.dataItem = window.grid.dataItem($(event.srcElement).closest("tr"));
        //alert(grid);

        if (dataItem.NextSnapshotQueueID && dataItem.NextSnapshotQueueID != 0 && dataItem.CurrentPercentageComplete == 0) {
            $.ajax({
                url: "/SnapshotQueue/CancelSnapshotQueue",
                //send current record ID to the server
                data: { SnapshotQueueID: dataItem.NextSnapshotQueueID },
                success: function (data) {
                    //update the current dataItem with the received data from the server

                    window.dataItem.set('NextSnapshotQueueID', '0');
                    window.dataItem.set('NextSnapshotQueueTime', '');
                    
                }
            });
        } else {
            if (dataItem.CurrentPercentageComplete == 0) {
                $.ajax({
                    url: "/SnapshotDefinition/CreateSnapshot",
                    //send current record ID to the server
                    data: { SnapshotDefinitionID: window.dataItem.SnapshotDefinitionID },
                    success: function (data) {
                        //update the current dataItem with the received data from the server

                        if (data['NextSnapshotQueueID']) {
                            window.dataItem.set('NextSnapshotQueueID', data['NextSnapshotQueueID']);
                            window.dataItem.set('NextSnapshotQueueTime', kendo.parseDate(data['NextSnapshotQueueTime']));
                        }
                        //for (var property in data) {
                        //    dataItem.set(property, data[property]);
                        //}
                    }
                });
            }
        }

    }


    function dataBound(e) {
        var rows = this.table.find("tr[role='row']");

        for (var i = 0; i < rows.length; i++) {
            var model = this.dataItem(rows[i]);
            if (model.NextSnapshotQueueID != 0 && model.CurrentPercentageComplete == 0) {
                $(rows[i]).find(".k-grid-CreateSnapshot").contents().last()[0].textContent = 'Cancel Queued Snapshot';
            }
            if (model.NextSnapshotQueueID != 0 && model.CurrentPercentageComplete != 0) {
                $(rows[i]).find(".k-grid-CreateSnapshot").contents().last()[0].textContent = '';
                $(rows[i]).find(".k-grid-CreateSnapshot").width(100);
                $(rows[i]).find(".k-grid-CreateSnapshot").removeClass('k-button');
                $(rows[i]).find(".k-grid-CreateSnapshot").kendoProgressBar({
                    value: model.CurrentPercentageComplete,
                    max: 100
                });
            }
        }
    }

 

 

[Informed Sources]

If I uncomment the following lines, it doesn't allow the service to edit it.

  //model.Field(p => p.NextSnapshotQueueID).Editable(false);

  //model.Field(p => p.NextSnapshotQueueTime).Editable(false);

[Rosen]

Hi Adam,

Indeed, this is how the editable false setting is design to work - it will prevent given field to be edited both via the UI for example in the Grid widget or via the Model API. You could only modify the field by directly changing its value (not using the set method), however this will require manually calling the refresh method of the associated widgets. 

Regards,
Rosen
Telerik