Hi,

I am having an issue binding a KendoUI Grid to a JSON data source using MVC 4. I have the following setup:

1. One controller called DashboardController.cs
2. The DashboardController.cs contains an action called Reports_Read which has the following code

I am trying to replace the header gradient on a grid on just one page, but my changes have had no effect. 

Using FireFox's Firebug I can see that the CSS rule has been overridden, but there is no visible change. 

The following fiddle shows an error I am receiving from Kendo when binding with MVVM: http://jsfiddle.net/cn172/XBY3f/75/

This fiddle is running on kendoUI 2012.2.913 and is the first appearance of the problem.  I have tried all the way up to current and the problem is the same throughout all the versions.

In the fiddle, click on an item in the grid shown in the running app.  Change the value 'Row1' to some other text.  Click the 'Save' button.  View the console and see:

Uncaught TypeError: Cannot call method 'bind' of undefined kendo.all.min.js:22

This worked fine with kendo 2012.2.710  as seen in this fiddle:  http://jsfiddle.net/cn172/XBY3f/76/

I've been chasing this in my app for quite a lot of time now, nice to finally find that it did work at some point, how can I fix it?

What I mean is, my value in my DateTimePicker is  for example 07/03/2013 10:30 AM and when I click on the little cock Icon, the dropdownlist displays 12:00AM as the first option, and that is kind of annoying, I need it to display at 10:30AM or 10:00AM or 11:00AM, I don't want my user to scroll all the way down to change the time, is there any way we can modify this?

Thank you, 

Guillermo Sanchez

Hi, 

Basically I am trying to update 3 of my fields in my kendo Grid, 2 of them are kendoDateTimePickers, but when my changes are picked up by my controllers it tell me about an error that includes the DateTimePickers.

So the is the code I have so far:

======================================================================================================================================================================================

My Home-Index.js:

//New WO to schedule grid
    workOrdersSchedulingDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                // the remote service url
                url: '/sdata/api/dynamic/-/WorkOrders?where=(Status eq \'Unassigned\')&include=Customer,AssignedTo&count=200'
            }
        },
        type: 'sdata',
        serverSorting: true,
        sort: { field: "Priority", dir: "desc" },   
        schema: { data: "$resources",
            model: {
                fields: {$key: { editable: false, defaultValue: "00000000-0000-0000-0000-000000000000" },
                    Priority: { editable: false, nullable: true },
                    Customer: { editable: false, nullable: true },
                    LocationCity: { editable: false, nullable: true },
                    ServiceDate: { editable: true, nullable: true, type: "date" },
                    ServiceEndDate: { editable: true, nullable: true, type: "date" },
                    AssignedTo: { editable: true, nullable: true }
                }
            },
            parse: function (data) {
                $.each(data.$resources, function(idx, item) {
                    if (item.AssignedTo == null) {
                        item.AssignedTo = { $key: "", FirstName: "", LastName: ""} ;
                    }
                });
                return data;
            }
        },
        change: function () {
            var count = this.total();
            $("#workOrdersSchedulingCount").text(count);
            if (count == 0) {
                $("#zeroWorkOrdersToScheduling").removeClass("displayNone");
                $("#workOrdersSchedulingTable").addClass("displayNone");
                $("#workOrdersSchedulingFooter").addClass("displayNone");
            } else {
                $("#zeroWorkOrdersToScheduling").addClass("displayNone");
                $("#workOrdersSchedulingTable").removeClass("displayNone");
                $("#workOrdersSchedulingFooter").removeClass("displayNone");
                $("#unassignedBackground").removeClass("displayNone");
                $("#unassignedUnderline").removeClass("displayNone");
            }
        }
    });

    var technicianDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/sdata/api/dynamic/-/servicesuser?where=Role eq 'Technician'&include=user",
            }
        },
        type: 'sdata',
        schema: { data: "$resources",
            parse: function (data) {
                $.each(data.$resources, function(idx, item) {
                    item['FirstLastName'] = concatFirstLastName(item.User.FirstName, item.User.LastName);
                    item['Id'] = item.User.$key;
                    item['FirstName'] = item.User.FirstName;
                    item['LastName'] = item.User.LastName;
                });
                return data;
            }
        }
    });
    
    var schedulingGrid = $("#workOrdersSchedulingTable").kendoGrid({
        dataSource: workOrdersSchedulingDataSource,
        pageable: false,
        sortable: false,
        scrollable: true,
        height: 250,
        dataBound: function () {
            var grid = this;
            $.each(grid.tbody.find('tr'), function () {
                var model = grid.dataItem(this);
                //if Role equals NoRoleAssigned, attach star icon ahead of user name
                if (model.Priority === "Low") {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/lowPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
                else if (model.Priority === "Regular") {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/regularPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
                else {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/criticalPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
            });

            $("table tr").hover(
                function () {
                    $(this).toggleClass("k-state-hover");
                }
            );
        },
        columns: [
            { hidden: true, field: "$key", title: "Key", template: kendo.template($("#tempId").html()) },
            { field: "Priority", title: "Priority", width: "75px"},
            { field: "Customer", title: "Customer", width: "119px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= Customer.Name #'>#= Customer.Name # </div>"},
            { field: "LocationCity", title: "Location", width: "95px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= LocationCity #'>#= LocationCity?LocationCity:'N/A' # </div>" },
            { field: "ServiceDate", title: "Start", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempStartDate").html()), editor: startDateTimeEditor },
            { field: "ServiceEndDate", title: "End", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempEndDate").html()), editor: endDateTimeEditor },
            { field: "AssignedTo", title: "Technician", width: "145px", template: kendo.template($("#tempAssignedTo").html()), editor: assignedToDropDownEditor }
        ], editable: {
            template: null,
            createAt: "bottom"
        }
    });
    
//My editors
    function assignedToDropDownEditor(container, options) {
        $('<input id="technicianDropDown" data-text-field="FirstLastName" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: technicianDataSource,
                index: -1
            });
}

    function startDateTimeEditor(container, options) {
        $('<input id="serviceDateEditor" data-text-field="ServiceDate" data-value-field="ServiceDate" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDateTimePicker({
                    autoBind: false,
                    format: "{0:MM/dd/yyyy hh:mm tt}",
                });
    }
    
    function endDateTimeEditor(container, options) {
        $('<input id="serviceEndDateEditor" data-text-field="ServiceEndDate" data-value-field="ServiceEndDate" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDateTimePicker({
                    autoBind: false,
                    format: "{0:MM/dd/yyyy hh:mm tt}",
                });
    }

======================================================================================================================================================================================

My templates that are on my Index.cshtml
<script id="tempStartDate" type="text/x-kendo-tmpl">
        <div id="serviceDate">#= kendo.toString(new Date(ServiceDate),"MM/dd/yyyy hh:mm tt")  # </div>
        <input type='hidden' name='WorkOrders[#= workOrdersSchedulingDataSource.data().indexOf(data) #].ServiceDate' value='#= ServiceDate #' />
</script> 

<script id="tempEndDate" type="text/x-kendo-tmpl">
        <div id="serviceEndDate">#= kendo.toString(new Date(ServiceEndDate),"MM/dd/yyyy hh:mm tt") #</div>
        <input type='hidden' name='WorkOrders[#= workOrdersSchedulingDataSource.data().indexOf(data) #].ServiceEndDate' value='#= ServiceEndDate #' />
</script> 
    
<script id="tempAssignedTo" type="text/x-kendo-tmpl">
        <div>#=concatFirstLastName(AssignedTo.FirstName, AssignedTo.LastName)#</div>
        <input type='hidden' name='WorkOrders[#= workOrdersSchedulingDataSource.data().indexOf(data) #].AssignedTo.Id' value='#= AssignedTo.Id #' />
</script> 

<script id="tempId" type="text/x-kendo-tmpl">
        <input type='hidden' name='WorkOrders[#= workOrdersSchedulingDataSource.data().indexOf(data) #].Id' value='#= $key #' />
</script>

======================================================================================================================================================================================

And finally my HomeController:

amespace Nephos.Services.Site.Controllers
{
    [UMAuthorize]
    public class HomeController : PublicController
    {
        // GET: /Home/
        private const string ScheduleSaved = "Changes saved.";
        private readonly ISession _session;

        public HomeController()
        {
            _session = ContainerManager.ResolveTenantSession();
        }

        public ActionResult Index()
        {
            var viewModel = new ScheduleViewModel();
            return View(viewModel);
        }

        // POST: /Home/SaveInvoice
        /// <summary>
        /// </summary>
        /// <param name="scheduleViewModel"></param>
        /// <returns>The Json Result</returns>
        [HttpPost]
        public JsonResult Save(ScheduleViewModel scheduleViewModel)
        {
            var msg = ScheduleSaved;
            var type = NotificationType.Success;
            
            foreach (var workOrder in scheduleViewModel.WorkOrders)
            {
                if ((workOrder.AssignedTo.Id == Guid.Empty)) continue;
                var targetWorkOrder = _session.Get<WorkOrder>(workOrder.Id);

                if (targetWorkOrder == null)
                {
                    LogAndThrowEntityNotFound("work order", workOrder.Id);
                }
                else
                {
                    var targetUser = _session.Get<User>(workOrder.AssignedTo.Id);
                    if (targetUser == null)
                    {
                        LogAndThrowEntityNotFound("user", workOrder.AssignedTo.Id);
                    }
                    else
                    {
                        targetWorkOrder.AssignedTo = targetUser;
                        targetWorkOrder.Status = WorkOrderStatus.Assigned;
                        targetWorkOrder.ServiceDate = workOrder.ServiceDate;
                        targetWorkOrder.ServiceEndDate = workOrder.ServiceEndDate;

                        _session.Transaction.Begin();
                        _session.SaveOrUpdate(targetWorkOrder);
                        _session.Transaction.Commit();
                    }
                }
            }

            return Json(new Notification { Message = msg, Type = type }, "application/json",
                           JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// Log And Throw NotFound exception
        /// </summary>
        /// <param name="entityName">The entityName that could not be found in the database.</param>
        /// <param name="entityId">The entityId that could not be found in the database.</param>
        private void LogAndThrowEntityNotFound(String entityName, Guid entityId)
        {
            LoggingHelper.Error(string.Format("Could not find {0} {1}.", entityName, entityId), TenantID, ProductUserId);
            throw SDataErrors.EntityNotFound();
        }
    }
}

So basically my error is here:
targetWorkOrder.ServiceDate = workOrder.ServiceDate;
targetWorkOrder.ServiceEndDate = workOrder.ServiceEndDate;

_session.Transaction.Begin();
_session.SaveOrUpdate(targetWorkOrder);
_session.Transaction.Commit();

I am pretty sure it is related with my template, or my editor, I have tried so many things and still is like I don't get the proper date from the dateTimePicker, so it says the date is SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM. And since the is not null to the date it goes to the minimum value which means it is like it is null, it is not picking anything. So I have no idea what I am doing wrong, please help me =).

I attached a file to show the error that displays on the controller.
Another screen to show what FireBug shows.

Thank you,

Guillermo Sanchez

We are converting an old app to Kendo Web (MVC) to take advantage of the Theme engine so that our designers can control the site much easier than what we have now.

I noticed there is no TextBox or Label control in Kendo. Is there a way to get TextBoxes like the below one that are themed to the current Kendo UI theme and that also can be validated?

Hi

I'm trying to use Kendo Editor in a Lightswitch HTML application. 

I have managed to get it working in an edit form (which appears as a modal dialog), and text can be edited and saved. My problem arises when the user clicks the Insert Image / Hyperlink buttons the modal for these buttons appears behind the edit form.

Is there a way that the Insert Image / Hyperlink modals can be forced to the front?

Thanks

We currently have a Kendo UI Complete commercial license and we act as a subcontractor for another company. In other words, it's not our company which will distribute the software we're developing, it's this partner company but the development is done entirely on our side. Our question is whether we could sell the license to our partner so that they can subsequently distribute Kendo UI Complete according to the License Agreement or do they have to buy their own license even if our company will not distribute it to anyone else?

Thanks in advance for your support. Any additional information you consider relevant for the situation above is most welcome.

The title says it all. I guess I have to wait for tomorrow. You might need to change your mission to delivering the unexpected instead of more than expected. I think that represents better. 

hi ,
       I  use  kendo framework FX flip and pageTurn effect in kendoui mobile  ,  make transiton between two views,
my code above,  
(1) after transitions , data-show="testInit" function  not run as usual,  how to make it take action 

(2) in kendo mobile ,  append data to widget via ajax or other way, the right to render  widget is ?    
kendo.mobile.init("#listpage")   is the universal method?

(3) navbar in mobile not show in new view after transition  , why ? how to fix it