Grid Popup Editing Template, show/hide field based on another bit field.

We have a grid that used a template editor for poup editing.
We have a bool field that if clicked, we want to show the corresponding value field, otherwise, hide it.

I gave the div that I want to hide/show an ID and set it's visibility to hidden (the first editor is the bool field):
<div>
            <div class="editor-label">
                <b>Right Ventricular Hypertrophy?</b>
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.IsRightVentHypertrophy)
                @Html.ValidationMessageFor(model => model.IsRightVentHypertrophy)
            </div>
        </div>
        <div id="RVentFuncDiv"  style="visibility: hidden; z-index: 9999;">
            <div class="editor-label">
                <b>Right Ventricular Function:</b>
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.fk_RightVentricularFunctionID, "RVFunction")
                @Html.ValidationMessageFor(model => model.fk_RightVentricularFunctionID)
            </div>
        </div>

I created the following js function on the editor template:

 function checkit(parent, child) {
        if ($("#" + parent).is(':checked'))
            $("#" + child).css("visibility", "visible");
        else
            $("#" + child).css("visibility", "hidden");
    }

and called it on it's document.ready:

$(document).ready(function () {
  $("#IsRightVentHypertrophy").change(function () {
            checkit("IsRightVentHypertrophy", "RVentFuncDiv");
        });
    });


Back on the main page the grid was assigned an event for edit:

.Name("echogrid")
.Events(e =>
    {
        e.Edit("editmode");
    })

An here is the js function for that event:
   function editmode(e) {
        checkit("IsRightVentHypertrophy", "RVentFuncDiv");
    }

Lousy built in Exporting

the 2014 3rd quarter release of Kendo grid has export capability via commands, it sucks.
Because, instead of exporting the data as displayed in the grid, it will export the underlying values instead.  If you use templates that is:
"Yes, by design the data from the data source is exported. If a grid column has its template set it will be ignored. Templates can be arbitrary HTML which doesn't translate to Excel. If the template isn't HTML you can manually use it as shown in this help article: http://docs.telerik.com/kendo-ui/web/grid/how-to/excel/column-template-export
"

If you are not using templates then you might find this article useful:
http://developer.telerik.com/featured/exporting-data-ease-using-kendo-ui-grid/

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