Telerik Forums
Kendo UI for jQuery Forum
1 answer
2.2K+ views
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. 

<style type="text/css">
    .k-grid-header {
        background-image: url("@Url.Content("~/Images/gridheader.png")");
        background-repeat: repeat-x;
    }
</style>
 
 
@(Html.Kendo().Grid<Product>().Name("ProductsGrid").Columns(c =>
      {
          c.Bound(p => p.Name);
          c.Bound(p => p.Id);
      })
      .DataSource(d => d
                           .Ajax()
                           .Read(r => r.Action("GetProducts", "Data"))
      )
      )
Ian
Top achievements
Rank 2
 answered on 04 Jul 2013
1 answer
44 views
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?

Alexander Valchev
Telerik team
 answered on 04 Jul 2013
1 answer
34 views
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
Kiril Nikolov
Telerik team
 answered on 04 Jul 2013
1 answer
69 views
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



Daniel
Telerik team
 answered on 04 Jul 2013
1 answer
1.2K+ views
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?

<input data-val="true" data-val-required="*" id="UserID" name="UserID" type="text" value="" />
<input data-val="true" data-val-required="*" id="Password" name="Password" type="password" />
Iliana Dyankova
Telerik team
 answered on 04 Jul 2013
1 answer
105 views
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


Vladimir Iliev
Telerik team
 answered on 04 Jul 2013
1 answer
129 views
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.

Iva
Telerik team
 answered on 04 Jul 2013
1 answer
31 views
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. 
Dimo
Telerik team
 answered on 04 Jul 2013
1 answer
74 views
hi ,
       I  use  kendo framework FX flip and pageTurn effect in kendoui mobile  ,  make transiton between two views,
<div data-role="view" id="loginpage" data-layout="loginLayout">
        <div id="testpanel"></div>
        <center><a data-click="gotoListPage1" data-role="button" id="appBtn">1:flip</a></center>
</div>
<div data-role="layout" data-id="loginLayout">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title">test</span>
        </div>
    </div>
</div>
 
<div data-role="view" id="listpage" data-layout="listLayout" data-show="testInit">
    <div class="wrapper">
        <div class="headwrapper">
            <div class="appheader">test</div>
        </div>
         
        <div id="testcontent">
                <div id="testA" style="width=100px;height:100px;">1111111111111111111111</div>
                <div id="testB" style="display:none;width=100px;height:100px;">2222222222222222222222</div>
        </div>
        <center><a data-click="testButton" data-role="button" id="appBtn">test</a></center>
    </div>
</div>
<div data-role="layout" data-id="listLayout">
    <div data-role="header">
        <div data-role="navbar"><span data-role="view-title">Demo</span></div>
    </div>
</div>
function gotoListPage1(){
    //MYAPP.app.navigate("#listpage",'slide:left');
    var effect = kendo.fx("#body").flipHorizontal($("#loginpage"), $("#listpage")).duration(1000);
    effect.play();
    kendo.mobile.init("#listpage");
}
 
function testButton(){
    kendo.fx("#testcontent").pageturnVertical($("#testA"), $("#testB")).play();
}
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 



Kiril Nikolov
Telerik team
 answered on 04 Jul 2013
1 answer
166 views
Any thoughts about putting something like the w2ui Panel layout into Kendo?

I know you have an article about Bootstrap Layout: with Kendo, but I find the panels, the load content options, etc., cleaner for a designer to think about. 

I you coupled this with an online IDE (Drag, stretch, reformat) for doing panel layout, I think it would be a real winner. I have already voted for the Visual Studio (MDI) style interface for dockable, tear-away panels. Which I really need also in my apps.

Sebastian
Telerik team
 answered on 04 Jul 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?