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);
}

Kendo Grid Popup Edit Template - Dropdown list binding

I specified that a Kendo Grid uses the Popup Edit mode:
 .Editable(e =>
        {
            e.Mode(GridEditMode.PopUp).TemplateName("IVPopup");
            e.Enabled(canEdit);
        })

Most of the fields are easily bound using the following Razor syntax:
 @Html.EditorFor(model => model.dosageNotes)

However, I have a drop down list that I hard code the select values for:
<option value='1'>Please Select</option>
            <option value='2500'>2,500</option>
            <option value='5000'>5,000</option>
            <option value='10000'>10,000</option>
            <option value='15000'>15,000</option>
            <option value='20000'>20,000</option>
            <option value='25000'>25,000</option>
            <option value='30000'>30,000</option>
            <option value='35000'>35,000</option>
            <option value='40000'>40,000</option>
            <option value='45000'>45,000</option>
            <option value='50000'>50,000</option>
            <option value='55000'>55,000</option>
            <option value='60000'>60,000</option>
            <option value='65000'>65,000</option>
            <option value='70000'>70,000</option>
            <option value='75000'>75,000</option>
            <option value='80000'>80,000</option>
            <option value='85000'>85,000</option>
            <option value='90000'>90,000</option>
            <option value='95000'>95,000</option>
            <option value='100000'>100,000</option>
            <option value='150000'>105,000</option>

I wondered, how to I bind this to the data?  Luckily some dude on StackOverflow spent hours trying to figure it out and did, this data-bind command did the trick, where concentration is my data field:

 <select id='dlIVConcentration' class='gridClientTemplate4' disabled='disabled' data-bind='value: concentration'>

Popup Editor Template not saving all data

OK, for my MVC Kendo grid I used a Poup Editor template, it was formatted kind of like this:

   <div class="editor-field">
        @Html.EditorFor(model => model.drugID)
        @Html.ValidationMessageFor(model => model.drugID)
    </div>
   <div class="editor-field">
        @Html.EditorFor(model => model.concentration)
        @Html.ValidationMessageFor(model => model.concentration)
    </div>
<script>
    $("#drugID").change(function (e) {
        var val = $("#drugID").val();
        var obj = $("#concentration");
        switch (val) {
            case '8':
                obj.val('1000');
                break;
            case '9':
                obj.val('2500');
                break;
            case '10':
                obj.val('5000');
                break;
            case '11':
                obj.val('10000');
                break;
            default:
                break;
        }
    });
</script>

The problem was, that when saving a new record, 0 resulted for the concentration field, even though the above javascript was setting it when an item was selected in the drug drop down.

The solution was to place the following code in the Save event of the grid:

function SQSaving(e) {
    var val = $("#drugID").val();
    var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid"),
    model = $("#sqdosegrid").data("kendoGrid").dataSource.getByUid(uid);
    switch (val) {
        case '8':
            model.set("concentration", 1000);
            break;
        case '9':
            model.set("concentration", 2500);
            break;
        case '10':
            model.set("concentration", 5000);
            break;
        case '11':
            model.set("concentration", 10000);
            break;
        default:
            break;
    }

Snippet for the grid declaration:

@(Html.Kendo().Grid<Model.Models.Dose>()
.Name("sqdosegrid")
.Events(e =>
{
    e.Edit("SQeditmode");
    e.Save("SQSaving");//Handles validation cause Entity Required Attribute sucks
    e.DataBound("dataBound");
.Editable(e =>
        {
            e.Mode(GridEditMode.PopUp).TemplateName("Popup");
            e.Enabled(canEdit);
            e.Window(w => w.Title("Subcutaneous Injection"));
        })
})

Problem with Foriegn Key when grid in Popup Edit mode

I have a grid that uses an EditorTemplate for a foreign key of values:



c.ForeignKey(r => r.drugID, (IEnumerable<Model.Models.Drug>)ViewData["SQDrugs"],
 "drugID", "drugName").EditorTemplateName("SQDrugs").Title("Drug").Width(150).HeaderHtmlAttributes(new { title = "Drug" });

The Grid's edit mode is Popup:


.Editable(e =>
 {
 e.Mode(GridEditMode.PopUp);
 e.Enabled(canEdit);
})

However, when I went to add/edit a record this drugID column was displayed as a checkbox with the numeric PK value displayed of the list of drugs.  It was actually quite easy to fix after spending an hour of research.

I simply added the following UIHint to the drugID property of the model:


[UIHint("GridForeignKey")]
 public int drugID { get; set; }



FYI, the editor's code is more or less like this:





@(Html.Kendo().DropDownListFor(model => model)

.DataSource(source =>
{
 source.Read(read =>
 {
  read.Action("GetSQDrugs", "PHMedications");
 });
})
.DataTextField("drugName")
.DataValueField("drugID")
.Name("drugID")
.Events(e => e.Change("onChange"))
.OptionLabel("- Please select -")
 .HtmlAttributes(new { data_value_primitive = true })
 ) 

Set the datasource item to the value of a templated control

You have a template control like this:


c.Template(r => r.drugID).ClientTemplate("# if ( drugID == 2) { #" +
 "<select id='dlIVConcentration' class='gridClientTemplate4' disabled='disabled'>" +
 "<option value='1' " + " #if (concentration < 500) {#" + "selected" + "#}#>Please Select</option>" +
 "<option value='2500' " + " #if (concentration == 2500) {#" + "selected" + "#}#>2,500</option>" +
 "<option value='5000' " + " #if (concentration == 5000) {#" + "selected" + "#}#>5,000</option>" +
 "<option value='10000' " + " #if (concentration == 10000) {#" + "selected" + "#}#>10,000</option>" +
 "<option value='150000' " + " #if (concentration == 105000) {#" + "selected" + "#}#>105,000</option>" + "</select>" +
 "# } else {#" +
 "<input type='text' onkeypress='return isNumberKey(event)' class='gridClientTemplate4' disabled='disabled' id='tbIVConcentration' value='#= (concentration || '') #' /> " +
 "# }#").Width(150).Title("Concentration").HeaderHtmlAttributes(new { title = "Concentration" });

In order to save the selected value when the record is saved, bind to the save event something like this in JavaScript:


var grid = $("#ivdosegrid").data("kendoGrid");

 var tr = grid.select().closest("tr");

  var dataItem = grid.dataItem(tr);

 dataItem.concentration = $("#dlIVConcentration").val();