Bind Grid To Model, but grid does not display, a prompt to download json data occurs instead

I was returning Json(list) from the controller causing this issue, it was resolved by returning View(list) instead, full code for functional system follows:
CSHTML:
@using Kendo.Mvc.UI

@model IEnumerable<DynaResearchPortal.Models.ImportDTO>






@{


ViewBag.Title = "PreviewData";

Layout = "~/Views/Shared/_LayoutPage.cshtml";






}


<h2>Preview Data</h2>





@(Html.Kendo().Grid(Model)


.Name("PreviewGrid")






.Columns(c =>


{


c.Bound(t => t.ColumnName);


c.Bound(t => t.Ordinate);


}


)





)CONTROLLER:
public ActionResult PreviewData(string filename)






{


List<ImportDTO> list = new List<ImportDTO>();

ISheet sheet;

using (FileStream file = new FileStream(filename, FileMode.Open, FileAccess.Read))






{


HSSFWorkbook wb = new HSSFWorkbook(file);






sheet = wb.GetSheetAt(0);


//Get the Title row:


IRow headerRow = sheet.GetRow(0);

int cellCount = headerRow.LastCellNum;

for (int i = headerRow.FirstCellNum; i < cellCount; i++)






{


ImportDTO dto = new ImportDTO();






dto.ColumnName = headerRow.GetCell(i).StringCellValue.Trim();


dto.Ordinate = i;


list.Add(dto);


}


}


return View(list);






}

Disable update button on grid popup

If your grid is in popup edit mode and you want to disable the Update button, use this js:

$('.k-grid-update').css('display', 'none'); 

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)