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

requestEnd e.Type undefined following update

2 Answers 144 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 17 May 2017, 01:04 PM

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 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 17 May 2017, 01:39 PM

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.

0
Stefan
Telerik team
answered on 19 May 2017, 07:16 AM
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.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or