This is a migrated thread and some comments may be shown as answers.

Edit Read Only columns with javascript

2 Answers 106 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Informed Sources
Top achievements
Rank 1
Informed Sources asked on 22 Apr 2015, 06:01 AM

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

 

 

2 Answers, 1 is accepted

Sort by
0
Informed Sources
Top achievements
Rank 1
answered on 22 Apr 2015, 06:03 AM

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

0
Rosen
Telerik team
answered on 23 Apr 2015, 03:42 PM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Grid
Asked by
Informed Sources
Top achievements
Rank 1
Answers by
Informed Sources
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or