Hello there,

I am trying to use a custom template for the editor popup in the Scheduler. All works fine until I add a control that needs to be populated from the database. Here is how I declare the template:

......

And in the template I have a control as such:

 When I click to create an event is giving me the following error:

Uncaught Error: Invalid template:'<div class="k-edit-label">    <label for="Title">Title</label></div><div data-container-for="title" class="k-edit-field">    <input class="k-textbox" data-bind="value:title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label">    <label for="Start">Start</label></div><div data-container-for="start" class="k-edit-field">    <input data-bind="value:start,invisible:isAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="startDateTime" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script> jQuery(function(){jQuery("\#startDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:start,visible:isAllDay" id="startDate" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script> jQuery(function(){jQuery("\#startDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>        <span data-for="start" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="End">End</label></div><div data-container-for="end" class="k-edit-field">    <input data-bind="value:end,invisible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="endDateTime" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script> jQuery(function(){jQuery("\#endDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:end,visible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="endDate" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script> jQuery(function(){jQuery("\#endDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-bind="text: endTimezone"></span>    <span data-for="end" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="IsAllDay">IsAllDay</label></div><div data-container-for="isAllDay" class="k-edit-field">    <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label">    <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="recurrenceRule" class="k-edit-field">    <div data-bind="value:recurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script> jQuery(function(){jQuery("\#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label">    <label for="Description">Description</label></div><div data-container-for="description" class="k-edit-field">    <textarea class="k-textbox" cols="20" data-bind="value:description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="project" class="k-edit-field">    <script>    function filterProjects() {        return {            clientno: $("#Clients").val()        };    }    </script>    <input class="input" data-val="true" data-val-number="The field ProjectId must be a number." data-val-required="The ProjectId field is required." id="Projects" name="Projects" type="text" value="0" /><script> jQuery(function(){jQuery("\#Projects").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Projects/ViewProjects","data":filterProjects},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"ProjectName","autoBind":false,"dataValueField":"ProjectNo","index":0});});</script></div>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<div class="k-edit-label">    <label for="Title">Title</label></div><div data-container-for="title" class="k-edit-field">    <input class="k-textbox" data-bind="value:title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label">    <label for="Start">Start</label></div><div data-container-for="start" class="k-edit-field">    <input data-bind="value:start,invisible:isAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="startDateTime" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script>\tjQuery(function(){jQuery("#startDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:start,visible:isAllDay" id="startDate" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script>\tjQuery(function(){jQuery("#startDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>        <span data-for="start" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="End">End</label></div><div data-container-for="end" class="k-edit-field">    <input data-bind="value:end,invisible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="endDateTime" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script>\tjQuery(function(){jQuery("#endDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:end,visible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="endDate" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script>\tjQuery(function(){jQuery("#endDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-bind="text: endTimezone"></span>    <span data-for="end" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="IsAllDay">IsAllDay</label></div><div data-container-for="isAllDay" class="k-edit-field">    <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label">    <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="recurrenceRule" class="k-edit-field">    <div data-bind="value:recurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script>\tjQuery(function(){jQuery("#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label">    <label for="Description">Description</label></div><div data-container-for="description" class="k-edit-field">    <textarea class="k-textbox" cols="20" data-bind="value:description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="project" class="k-edit-field">    <script>    function filterProjects() {        return {            clientno: $("';Clients").val()        };    }    </script>    <input class="input" data-val="true" data-val-number="The field ProjectId must be a number." data-val-required="The ProjectId field is required." id="Projects" name="Projects" type="text" value="0" /><script> jQuery(function(){jQuery("#Projects").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Projects/ViewProjects","data":filterProjects},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"ProjectName","autoBind":false,"dataValueField":"ProjectNo","index":0});});</script></div>;o+=;}return o;'

Hello there, 

I was wondering whether its possible to drag a row from a table and drop it to my multiselect field as a new entry. Could you please provide me with a simple example of it? 

 Many thanks in advance,

Hi,

I'm using KendoUI Q3 and testing with Angular 2.
So far the feedback is generally positive, but now I'm facing an issue.

I have to use a grid with a custom column template and I want to use a component created by me inside that column.

My component doesn't seem to be recognized (interpreted) by angular. Can you help me?

Hi,

how can i prevent the kendo-mobile-scroller from horizontal Scrolling? I tried already to set the Style "overflow-x" to "hidden" but it doesn't help.

With best regards

J. Loewen

I've dug all through the documentation, and I can find little allotment for iFrame support within the library. I also implemented a rough version, and found that upon entering the iFrame the mouse stopped responding. I tried some of the hidden iframe tricks I learned with other JS libraries, but nothing seemed to work.

Has anyone ever tried this before? Is it possible to make work?

We are on a trial version right now, this is a core requirement for us to switch over to this library though, so we're very interested in a straight answer on whether it's supported or not.

thanks!

Hello,

I have a TreeList control where I allow ColumnMenu to be displayed.  It displays but the menu is squished when mousing over it.  See the screenshot attached.  I have tried to adjust the ColumnMenu row height:

    .ColumnMenu().HtmlAttributes(new { style = "height:100%;" })

or by

   .ColumnMenu(100)

but neither have any effect on the TreeList.  Can you tell me how to correct this issue please?

Thank you,

Dave

I am working on an angular application that utilizes the KendoUI Grid.

When editing a row, if I click the "Cancel" button, nothing happens. If I click "Cancel" a second time, my app navigates to the default state.

I have no custom code added to modify the cancel event, and can't find an explanation of why this is happening.

Any help would be much appreciated.

-Joe

Hi,

I am trying to create HTML5 Kendo UI Grid which will receive JSON data from ASP.NET WebApi.

Below is this ApiController which returns JSON as below-

public class ProductsController : ApiController
    {
        // GET api/<controller>
        public JsonResult Get()
        {
            var jsonString = "[{\"ProductID\":1, \"ProductName\":\"Chai\", \"UnitPrice\":18, \"UnitsInStock\":39, \"Discontinued\":false},{\"ProductID\":2, \"ProductName\":\"Coffee\", \"UnitPrice\":18, \"UnitsInStock\":39, \"Discontinued\":false}]";

            var result = new JsonResult
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = JsonConvert.SerializeObject(jsonString),
            };

            return result;
        }

Below is the HTML part where Kendo Grid read data from WebApi Get method


angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function ($scope) {
                $scope.mainGridOptions = {
                    dataSource: {
                        transport: {
                            read: {
                                url: "http://localhost:50986/api/Products", //url: "api/Products",
                                type: "GET",
                                dataType: "json"
                            },
                        },
                        pageSize: 25,
                        serverPaging: true,
                        serverSorting: true,
                        batch: true,
                        schema: {
                            data: "d",
                            type: 'json',
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: false },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    },
                    navigatable: true,
                    height: 700,
                    pageable: true,
                    filterable: true,
                    //columnMenu: true,
                    selectable: true,
                    toolbar: ["create", "save", "cancel", "excel"],


                    columns: [
                                { field: "ProductName", title: "Product Name" },
                                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } },
                                { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } },
                                { field: "Discontinued", width: 120, filterable: { multi: true } },
                                { command: ["edit", "destroy"], title: "&nbsp;", width: 350 }],

                    editable: "popup"
                };


            })

Whenever I ran this example it doesn't display any data on screen. Could you please help me on this?

Cheers
Sanket

Hello,

Iam trying to make directive that makes each kendoWindow not resizable. I encountered problem that when I set resizable to false in directive, then after widget has been created $element.data("kendoWindow") is undefined.

How can I achieve this ?

Example:

http://dojo.telerik.com/aTEHI