requestEnd e.Type undefined following update

3 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Sep 2014

    Posted 17 May Link to this post

    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>
  2. Michael
    Michael avatar
    6 posts
    Member since:
    Sep 2014

    Posted 17 May in reply to Michael Link to this post

    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.

  3. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 19 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top