Kendo Dropdownlist change function syntax

This delayed my coding progress for quite sometime, I was trying to bind a js function to the change event of a drop down list, the syntax I was using was like:


  $("#srch" + i).kendoDropDownList({
            optionLabel: "- Please select -",
            dataTextField: "DisplayName",
            dataValueField: "savedSearchID",
            change: "searchOnChange",
            dataSource: json
        });


I couldn't figure out why it was blowing up.  Quite simple fix, remove the quotes around the function name, so this worked (note quotes removed from searchOnChange):


  $("#srch" + i).kendoDropDownList({
            optionLabel: "- Please select -",
            dataTextField: "DisplayName",
            dataValueField: "savedSearchID",
            change: searchOnChange,
            dataSource: json
        });

How to fix grid from not refreshing after create or update (add/edit record)

Solution is to refresh the grid using javascript on the data source requestend event.

Here's how:

Add this Javascript:

  function OnRequestEnd(e) {  
     if (e.type === "update" || e.type === "create") {  
       var grid = $('#myprojectsgv').data('kendoGrid');  
       grid.dataSource.read();  
     }  
   }  

Then in the razor code for the grid:

  .DataSource(data => data.Ajax()  
                       .Model(model =>  
                       {  
                         model.Id(record => record.projectID);  
                       })  
                       .Sort(m => m.Add("projectID").Descending())  
               //.ServerOperation(false)  
               .Read(read => read.Action("GetMyProjects", "Projects").Data("getUserID"))  
             .Create(create => create.Action("CreateProject", "Projects"))  
             .Update(update => update.Action("UpdateProject", "Projects"))  
             .Destroy(delete => delete.Action("DeleteProject", "Projects"))  
             .PageSize(10)  
             .Batch(false)  
             .Events(e =>  
             {  
             e.Error(@<text>  
     function(e) {  
     griderror(e,"myprojectsgv", "My Projects");  
     }  
             </text>);  
               e.RequestEnd("OnRequestEnd");  
             })  
           )  

Violation of Foreign Key

When using the grid in editmode popu with a editor template, was getting a Violation of a Foreign Key, debugging, I could see the fk value was being set, but it was blowing up in the DbSet.Add function.  Thought it was the editor template configuration, but it wasn't.  The table loaded in the drop downlist editor template was using a class called "InsurancePlan" - used to set the fk value - the grid was saving an "Insurance" object.  The problem turns out because the InsurancePlan class included a virtual ICollection<Insurance>, but I had commented out the contructor, uncommenting the contructor resolved:


public InsurancePlan()
{
      this.Insurances = new List<Insurance>();
}

Close all kendo windows

$(".k-window-content").each(function(){

  $(this).data("kendoWindow").close();

});

Sort a kendo grid from razor configuration

Simple, add sort instructions to the data source:

     .DataSource(data => data.Ajax()  
                     .Model(model =>  
                     {  
                       model.Id(record => record.doseID);  
                       model.Field(m => m.drugID).DefaultValue(23);  
                     })  
             .Read(read => read.Action("GetPatientDoses", "PHMedications", new { id = @queryValue, drug = 23, isIV = false, isSQ = false }))  
             .Create(create => create.Action("DoseCreate", "PHMedications").Data("GetqueryValue"))  
             .Update(update => update.Action("DoseUpdate", "PHMedications"))  
             .Destroy(delete => delete.Action("DoseDelete", "PHMedications"))  
             .Sort(m =>  
             {  
               m.Add("doseEndDate").Ascending();  
               m.Add("doseStartDate").Descending();  
             })  
             .PageSize(2)  

How to reload Kendo Grid Datasource and reload grid

An example in the Save event of the grid:

 function OralSaving(e) {  
   OralValidate(e);  
   if (e.model.isNew()) {  
     $('#Oraldosegrid').data('kendoGrid').dataSource.read();  
     $('#Oraldosegrid').data('kendoGrid').refresh();  
   }  
 }  

Editor Template not binding to model on Grid Popup Save

I had a kendo grid that used popup edit mode.  On the popup editor template had a typical Razor @Html.EditorFor(model => model.fk_DrugBrandID)


When editing/adding a record, the editor correctly showed a drop down list of items, but on save, it was not updating the model.  Spent hours trying to figure it out, then realized I had encountered this before.  It is because the grid does not handle nullable foreign keys!  The solution is to use the Save Event of the grid to something like this:

 //grid doesn't handle nullable foreign keys, this passes the value to the controller  
   function tvyascoSave(e) {  
     /*alert('saving: ' + e.model.fk_DrugBrandID);*/  
     if (!e.model.fk_DrugBrandID) {  
       //change the model value  
       e.model.fk_DrugBrandID = 0;  
       //get the currently selected value from the DDL  
       var currentlySelectedValue = $(e.container.find('[data-role=dropdownlist]')[0]).data().kendoDropDownList.value();  
       //set the value to the model  
       e.model.set('fk_fk_DrugBrandID', currentlySelectedValue);  
     }  
   }