DropDown Displaying Json Date in DataTextField

I had a foreign key kendo drop down list editor template, and the DataTextField was pointed to a DateTime field, it was displaying items in the dropdown in the following json format:

/Date(1124859600000)/

The solution to display it as a simple date was to utilize templates using Kendo Format:

@using Kendo.Mvc.UI
@model IQueryable<Model.Models.OfficeVisit>
@{var val = string.Empty;
  if (Request.QueryString["id"] != null)
  {
      val = Request.QueryString["id"];
  }
  else
  {
      //No Querystring, so use the id from action call:
      val = Url.RequestContext.RouteData.Values["id"].ToString();
  }
}
@{
    Layout = null;
}
<script>
    function GetValue() {
        return {
            Id: "@val"
        };
    }
</script>
@(Html.Kendo().DropDownList()
.DataSource(source =>
{
    source.Read(read =>
        {
            read.Action("GetPatientOfficeVisits", "OfficeVisits").Data("GetValue()");
        });
})
.DataTextField("VisitDate")
.TemplateId("dltemplate")
.ValueTemplateId("dltemplate")
.DataValueField("pk_OfficeVisitID")
        //.DataValueField("ANAPatternDesc")
        //.SelectedIndex(0)
.Name("fk_OfficeVisitID")
.OptionLabel("- Please select -")
 .HtmlAttributes(new { data_value_primitive = true })
)
<script type="text/x-kendo-template" id="dltemplate">
    #:kendo.toString(kendo.parseDate(data.VisitDate), 'MM/dd/yyyy')  #
</script>

How to update an EditorFor that uses a kendo NumericTextBoxFor control.

Easy to get a value using .val(), but to set the value you have to call the change event of the control and navigate away from it in order to save the changes to the model!

 @Html.EditorFor(model => model.PVR, "Number")

Here's the editorTemplate named "Number":

@model double?
@using Kendo.Mvc.UI
@(Html.Kendo().NumericTextBoxFor(m => m)
.Decimals(3)
.Format("0.000")
      .HtmlAttributes(new { style = "width:100%" })
)


here's the jscript code to update the value:

var kendo = $("#PVR").data("kendoNumericTextBox");
            kendo.value(output);
            kendo.trigger("change");
            var target = $("#Wedge").data("kendoNumericTextBox");
            target.siblings("input:visible").focus();

How to Resize a grid to fit the browser window

/* Functions used to resize a grid to the browser window size
    Example Usage:
     $(window).resize(function () {
        resizeGrid('gvMedications', 300);
    });
*/
function ScreenHeight() {
    var myWidth = 0, myHeight = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return myHeight;
}
function resizeGrid(grid, padding) {
    //alert('resizing');
    var gridElement = $("#" + grid);
    var dataArea = gridElement.find(".k-grid-content");
    //var newHeight = gridElement.parent().innerHeight() - 100;
    //var diff = gridElement.innerHeight() - dataArea.innerHeight();
    //gridElement.height(newHeight);
    //dataArea.height(newHeight - diff);
    gridElement.height(ScreenHeight() - padding);
}