Edit Read Only columns with javascript

3 posts, 0 answers
  1. Informed Sources
    Informed Sources avatar
    18 posts
    Member since:
    Jan 2009

    Posted 22 Apr 2015 Link to this post

    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. Informed Sources
    Informed Sources avatar
    18 posts
    Member since:
    Jan 2009

    Posted 22 Apr 2015 Link to this post

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

  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 23 Apr 2015 Link to this post

    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.

     
Back to Top