requestEnd e.Type undefined following update

[Michael]

Hi, below please see my view I'm having issues with.  I'm trying to check for a successful save (my items are being saved out to the database correctly, so I have no reason to believe there's an issue with the save) but as you can see in the "wasSaveSuccessful" function, I'm alerting out the e.type.  The initial read alerts out "read" as expected, but after changes (done with a template column with radio buttons) it alerts out "undefined".  Not sure why, but is there another way to check for success?  I want to pop down a notification to the users when their changes have been successful.

 

<div class="col-lg-12 column">
    <div class="row page-header">
        <h1>
            Metric Threshold Maintenance <small>Edit Metric Threshold Values</small>
        </h1>
    </div>
    <div class="col-lg-3">
        @(Html.Kendo().TreeView()
            .Name("ProgramTree")
            .DataTextField("Name")
            .Events(e => e.Change("programSelected"))
            .DataSource(dataSource => dataSource.
                Read(read => read.Action("Traceables_Read", "ProgramView"))
            )
            .Animation(true)
        )
    </div>

    <div class="col-lg-9">
        @(Html.Kendo().Grid<HVMS.BusinessLayer.Models.Metric>()
      .Name("MetricGrid")
      .Events(e =>
      {
          e.DataBound("onDataBound");
      })
      .Columns(columns =>
      {

          columns.Bound(c => c.Name);
          columns.Bound(c => c.ThresholdAssignment).ClientTemplate(
              "#=dirtyField(data,'ThresholdAssignment')#<div onClick='stopEditing(event,this)'><input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Unassigned' # if (ThresholdAssignment == 0) { # checked = 'checked' # } # /> <span>Unassigned</span>" +
              "  <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Weekly'  # if (ThresholdAssignment == 1) { # checked = 'checked' # } # /> <span>Weekly</span>" +
              "  <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Monthly' # if (ThresholdAssignment == 2) { # checked = 'checked' # } # /> <span>Monthly</span></div>"
              );


      })
      .ToolBar(toolbar =>
      {
          toolbar.Save();
          toolbar.Excel();
          toolbar.Pdf();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Navigatable()
      .Scrollable(s => s.Height("auto"))
      .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))
      .AutoBind(false)
      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .Model(model =>
          {
              model.Id(p => p.Id);
              model.Field(p => p.Name).Editable(false);
          })
          .Read(read => read.Action("Metrics_Read", "MetricThreshold").Data("additionalData"))
          .Update(update => update.Action("Metrics_Update", "MetricThreshold"))
          .Events(e =>
          {
              e.Change("gridChanged");
              e.RequestEnd("wasSaveSuccessful");
          })
      )
        )
    </div>

    <script>

        function programSelected(e) {
            var grid = $('#MetricGrid');
            var gridSource = grid.data('kendoGrid').dataSource;

            gridSource.read();
        }

        function additionalData() {

            var pt = $('#ProgramTree').data('kendoTreeView'),
            selected = pt.select(),
            item = pt.dataItem(selected);

            return {
                id: item.id
            };
        }

        function index(dataItem) {
            var data = $("#MetricGrid").data("kendoGrid").dataSource.data();

            return data.indexOf(dataItem);
        }

        //This is necessary to stop some strange behavior on the ThresholdAssignment
        //column where if the user clicked outside of the radio buttons
        //a default standard string editor would appear.
        function stopEditing(event, element) {

            // Don't propogate the event to the document
            if (event.stopPropagation) {
                event.stopPropagation();   // W3C model
            } else {
                event.cancelBubble = true; // IE model
            }

        }

        function onDataBound() {

            var grid = this;
            $("[name*='.ThresholdAssignment']").change(function (e) {


                var row = $(e.target).closest("tr");

                var dataItem = grid.dataItem(row);
                grid.select(row);
                var rowIndex = index(dataItem)

                var newValue = 'Metrics[' + rowIndex + '].ThresholdAssignment:checked';
                var radioGroup = $("input:radio[name ='" + 'Metrics[' + rowIndex + '].ThresholdAssignment' + "']:checked").val();
                var radioGroupEnumVal;

                //alert(radioGroup);

                switch (radioGroup) {
                    case 'Unassigned':
                        radioGroupEnumVal = 0;
                        break;
                    case 'Weekly':
                        radioGroupEnumVal = 1;
                        break;
                    case 'Monthly':
                        radioGroupEnumVal = 2;
                        break;
                    default:
                        radioGroupEnumVal = 0;
                        break;
                }

                dataItem.set("ThresholdAssignment", radioGroupEnumVal);

            });
        }

        function dirtyField(data, fieldName) {
            if (data.dirty && data.dirtyFields[fieldName]) {
                return "<span class='k-dirty'></span>"
            }
            else {
                return "";
            }
        }

        function gridChanged(e) {
            if (e.action == "itemchange") {
                e.items[0].dirtyFields = e.items[0].dirtyFields || {};
                e.items[0].dirtyFields[e.field] = true;
            }
        }

        function wasSaveSuccessful(e) {
            alert(e.type);
        }
    </script>

[Michael]

Never mind guys, I seem to have found the issue.  In my controller, I was using the Kendo scaffolding which returned:

return Json(entities.ToDataSourceResult(request, ModelState));

I've changed this to instead return Json(ModelState) and now I am getting an "update" on request end.  Not sure if this is something you guys need to look into on your side or not, but I thought you should know.

[Stefan]

Hello Michael,

I'm glad to hear that the issue is resolved.

The feedback is greatly appreciated.

We will check if we can reproduce the same result on our end using the provided code and investigate further.

Regards,
Stefan
Telerik by Progress