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

Set the row background color if a column has a condition

Use the databound event.

@(Html.Kendo().Grid() .Name("gvMedications") .Events(e => { e.Edit("editmode"); e.DataBound("databound"); }) .Columns(c =>

JavaScript:
function databound(e) { var grid = $("#gvMedications").data("kendoGrid"); var dataView = grid.dataSource.view(); for (var i = 0; i < dataView.length;i++) { if (dataView[i].fk_ResearchPhaseID == 1) { var uid = dataView[i].uid; $("#gvMedications tbody").find("tr[data-uid=" + uid + "]").css("background-color", "#CCFF00"); } } }