How to set the Height of the Kendo Grid

 .Scrollable(s => s.Height(500))

KendoWindow appears smaller the second time you open it

Kendo support said this is fixed in the latest release, but it's not.  Found this on stack overflow on how to resolve this bizzare behavior:

var window = $("#yourWindowDiv");
window.data("kendoWindow").options.animation.close.effects.zoom.properties.scale = 1;

Inline Grid Editor, DropDown Validation Not Visible

I have a Kendo Grid with an editor on a fk field, the class had the following attribute on a drugID field:
[Required(ErrorMessage = "Drug is required")]

However, the validation message was not appearing.
Originally the editor template for this field was as follows:

@using Kendo.Mvc.UI

@*@model IQueryable<Model.Models.Drug>*@

@{

    Layout = null;

}

 

@(Html.Kendo().DropDownList()

.DataSource(source =>

{

    source.Read(read =>

        {

            read.Action("GetDrugs", "PHMedications");

        });

})

.DataTextField("drugName")

.DataValueField("drugID")

.Name("drugID")

.OptionLabel("- Please select -")

 .HtmlAttributes(new { data_value_primitive = true})

)

 

Telerik Support sent me the following information which resolved my issue:

Please try with the DropDownListFor helper instead of DropDownList with a Name:

Copy code

@model drugIDType

 

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

    .DataSource(source =>

    {

        source.Read(read =>

            {

                read.Action("GetDrugs", "PHMedications");

            });

    })

    .DataTextField("drugName")

    .DataValueField("drugID")

    .OptionLabel("- Please select -")

    .HtmlAttributes(new { data_value_primitive = true})

)

The editor templates are created in the context of the property and will have a prefix the property name. Thus the field that will be used to find the attributes when setting a name will be "PropertyName.PropertyName" and no attributes will be found.

Grid Popup Editor, Change the Labels for fields

If your Kendo Grid uses popup mode, instead of displaying the Titles you assigned each column, the popup editor will display the actual field name i.e. 'functionalClassID' instead of 'Functional Class'

To change the lables in the popup editor declare an event in the edit mode of the grid:

.Sortable()
        .Events(e =>
        {
             e.Edit("contacteditmode");
        }
        )
        .Scrollable()

NOTE: Make sure it's the Events of the grid, not the DataSource

Include the following in your javascript:

function renameeditorcolumn(e, colname, newname) {
    var test1 = e.container.find(colname).closest(".editor-field").prev();
    for (var n = 0; n < test1.length; n++) {
        var lab1 = test1[n];
        //lab1.innerText = newname;
        lab1.innerHTML = '<b>' + newname + '</b>';
    }
}

And create your function that consumes it:

  function contacteditmode(e) {
        renameeditorcolumn(e, '#testDate', 'Test Date');
        renameeditorcolumn(e, '#time', 'Test Time');
        renameeditorcolumn(e, '#repeatedTestTypeID', 'Test Type');
        renameeditorcolumn(e, '#functionalClassID', 'Functional Class');
        renameeditorcolumn(e, '#OxygenSaturationatRest', 'O2 Saturation at Rest');
        renameeditorcolumn(e, '#OxygenSaturationatExercise', 'O2 Saturation at Exercise');
        renameeditorcolumn(e, '#OxygenSaturationatRecovery', 'O2 Saturation at Recovery');
        renameeditorcolumn(e, '#pk_ResearchPhaseID', 'Research Phase');
        renameeditorcolumn(e, '#walkDistance', 'Walk Distance');
    }

NOTE: If you are using an EditorTemplate - the original name will be the PK specified in the template.

Grid - Showing a drop down list for fk in popup editor

I had a grid that used an "editor template":

ie.

 c.ForeignKey(r => r.repeatedTestTypeID, (IEnumerable<Model.Models.RepeatedTestType>)ViewData["tt"],
                                "repeatedTestTypeID", "repeatedTestTypeDesc").EditorTemplateName("TestTypeTemplate").Title("Test Type").Width("180px");

This worked fine, showing the proper textual representation of a fk id value, however in the popup editor shown when you click add new record, an integer text box was shown rather than the desired drop down list of values.

FYI, the template editor code is at the bottom of this note.

In order to get it to work, I had to add an attribute to the POCO class object:

[UIHint("TestTypeTemplate")]
        public int repeatedTestTypeID { get; set; }


Editor Template code below, it is placed in the Views/Shared folder:

@using Kendo.Mvc.UI
@{
    Layout = null;
}
@(Html.Kendo().DropDownList()
.DataSource(source =>
{
    source.Read(read =>
        {
            read.Action("GetFunctionalClasses", "TreadMillWalkTests");
        });
})
.DataTextField("functionalClassDesc")
.DataValueField("functionalClassID")
//.DataValueField("ANAPatternDesc")
//.SelectedIndex(0)
.Name("functionalClassID")
.OptionLabel("- Please select -")
 .HtmlAttributes(new { data_value_primitive = true})
)

The Kendo Error Vortex

This is simple, but may save you a lot of grief.

I copied and pasted a kendo grid from one page to another and tweaked it for my needs.

It wasn't loading data, even though the grid appeared, so I tried calling the action methods and got errors.

Fiddler was showing that the json data was being called and passed ok, but the grid wasn't showing data, plus when you clicked add new button I'd either get an error about json serialization, or when I changed the action to handle that, it would just display all the json get data.

Long and short of it is, I finally realized that the page I had the grid on had another grid with the same name.  Renaming it solved the issues and the grid worked as expected.

First thing to check when you are debugging Kendo issues.  Otherwise the errors will lead you down a vortex.

The Kendoh Windoh

The Kendo Window is a little quirky.  I added a command button to a grid:

c.Bound(p => p.physicianID).ClientTemplate("<a href='javascript: showpatients(#= physicianID #);'\">#= physicianID #</a>").HtmlAttributes(new { @class = "k-link" }).Width(100).Locked(true).Title("Patients");

function showpatients(id) {
        var window = $("#physpatientswindow");
        window.kendoWindow({
            height: "800px",
            width: "1200px",
            title: "Physician's Patients",
            content: MvcUrl(id),
            modal: true,
            close: function (e) {
                $(this.element).empty();
            }
        });
        window.data("kendoWindow").center();
        window.data("kendoWindow").open();
        $('div').css("webkit-transform", "scale(1)");
        return false;
    }
  function MvcUrl(id) {
        var link = '@Url.Action("PhysicianPatients","Management", new {id=-1})';
        link = link.replace("-1", id);
        return link;
    }

The close function is critical, otherwise, the second time you load the window you'll see the content from the previous window, until the round trip to the server completes!

The MvcUrl function allows me to use Razor @Url.Action, passing in an id.


 Another quirk, is the second time the window opens -webkit-zoom of .7 is added to the div, making it tiny and the text tiny.  In order to solve this weird strange behavior, I added this in the content page (a partial page)


  $(document).ready(function () {
        $('div').css("webkit-transform", "scale(1)");
    });

Kendoh is awesome, but at times very quirky and incomplete.