Wednesday, October 1, 2014

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.

No comments:

Post a Comment