Questions on Kendo UI for jQuery Forum

3 answers

137 views

Validate business rules without direct binding to a HTML field

Hello.

I have a complex viewModel that I need to validate before submiting, but I need not only simple validation rules (such as required field), but also a complex validation that has to do not with html input elements, but with model business rules.

Let me give an example, my viewModel has a timetable property (which represents a study timetable with startHour, endHour, days and trainerId properties), which is an array:

var

viewModel = kendo.observable({

    title =

"Example Title"

,

    timetable: [

        { startHour:

"11:00", endHour: "13:00"

, days: [ 1 ], trainerId: 1 },

        { startHour:

"12:00", endHour: "14:30"

, days: [ 3, 5 ], trainerId: 2 }

    ]

});

In this case I need to validate the following:

Timetable contains at least one element

Timetable hours don't overlap

This validation is not directly bound to any HTML element, as timetable is a complex property which is rendered using templates.
All kendoValidator examples I've seen work directly with HTML inputs and their attributes.

In other words, is there a possibility to validate the model's business rules, but not HTML inputs?

Thank you.

Validation

answered on 09 Mar 2015

1 answer

406 views

Grid Validation in a Custom Editor Column

I have a column in a Grid using a custom editor (in this case, a combobox). The validator fires correctly if you wipe out the value, but it appears BELOW the combobox, so it's cut off by the grid by default (You see the top line, but not the full indicator). Is there a way around this using the Error Template or some other kind of setting?

Validation

answered on 09 Mar 2015

1 answer

227 views

Scheduler- response Date Format

Hi,

I use this Kendo scheduler in my project and implement a new service to save events, this service get params as JSON like
this:
{"TaskID":0,"Title":"No title","Start":"2013-06-10T08:00:00.000Z","End":"2013-06-10T08:30:00.000Z","StartTimezone":"","EndTimezone":""
,"Description":"","RecurrenceID":"","RecurrenceRule":"","RecurrenceException":"","OwnerID":1,"IsAllDay":false}

and send back this response:
{"TaskID":12,"Title":"No title","Start":"2013-06-11T08:00:00.000Z","End":null,"StartTimezone":null,"EndTimezone":null,"Description":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"OwnerID":null,"IsAllDay":null}

it makes this error on page:
TypeError: e is null c;c++)s=l.fn.events[c],h=k(i,s),h!==n&&(r[s]=gt.getter(h)(t));return a?e.isEmptyObject(r)||a.setOptions(r):a=new ....

I make a fake response like the following text and it works.
{"TaskID":121,"OwnerID":1,"Title":"No title","Description":"","StartTimezone":"","Start":"\/Date(1370937600000)\/","End":"\/Date(1370939400000)\/","EndTimezone":"","RecurrenceRule":"","RecurrenceID":null,"RecurrenceException":"","IsAllDay":false}

the difference -between 2 response- is Date format, I can’t understand what does "\/Date(1370937600000)\/" means? Which Date format is it?

Scheduler

answered on 09 Mar 2015

1 answer

254 views

How do I prevent a grid update when the datasource is dirty?

We have an editable grid with batch mode set to true. The grid has paging and sorting enabled. The grid uses an Ajax datasource with Serverside mode true.

I would like to prevent the user from paging/sorting while there are changes on that page.

I see that I am able to check the datasource.hasChanges().

I tried to do this in the startRequest event but of course, that also fires before a savechanges() and I see no way to differntiate since there is no indication of the action causing the request.

Any suggestions or samples on how I can accomplish this?

Grid

answered on 09 Mar 2015

3 answers

131 views

[Solved] MobileDrawer MVC helper error with no views

In the documentation it says if the views of a mobiledrawer is omitted then the drawer will work on all views.

I have a MobileDrawer setup on my _Layout.cshtml like so:

@(Html.Kendo().MobileDrawer()

.Name("main-menu")

.HtmlAttributes(new { style = "width: 210px" })

.Title("Mobile App")

.Views("Index")

.Content(obj =>

Html.Kendo().MobileListView()

.Items(root =>

{

root.AddLink().Icon("inbox").Url("Index", "Outage").Text("Report New Outage");

root.AddLink().Icon("inbox").Url("About", "Home").Text("About");

})

)

However if I remove the Views() method I get an null exception? I expected it to just work on any page.

Thanks

Drawer (Mobile)

answered on 09 Mar 2015

6 answers

185 views

Bug - splitter shrink panes on resize (100% height)

When I move split bar (resize panes) the panes shrinks for 17px. This happens if bar is moved to the left. It works if moved to the right.

I made a sample demo: dojo

Splitter

answered on 09 Mar 2015

3 answers

424 views

[Solved] Display Resizing Handle for Editor

I found the following style to display the sizing handle for a Kendo Editor;

/*

Kendo Editor styles to support resizing

*/

table.k-editor .k-content {

resize: vertical;

}

.editor-wrap {

position: relative;

}

.editor-wrap .k-overlay {

position: absolute;

opacity: 0;

z-index: 1;

}

.editor-wrap .k-resize-se {

position: absolute;

z-index: 2;

bottom: 6px;

right: 6px;

height: 26px;

width: 26px;

}

.editor-wrap > .k-editor {

height: 100%;

}

And this works well for Google Chrome but I can't get it to display in IE11 - the sizing handle doesn't display and attempting to resize the Editor by clicking and dragging in the bottom-left corner doesn't work.

Can anyone advise what I have to do to get it to work in IE11.

Thanks in advance.

Editor

answered on 08 Mar 2015

3 answers

323 views

All AJAX Content Loaded programmatically without opening each item

I'm using a PanelBar with MVC extensions to have about 5 grids on the screen (grids are AJAX content in each PanelBar item - from partial view).
I also have two dropdowns at the top of the page (companies & locations) where locations cascades from companies. When the cascade event on the location happens, I want to reload all 5 grids at once and not wait for the user to open each panelbar. In addition, I want to show the count of items in the grid in the text of the panel bar (e.g. "Transmission Errors (25)" where "Transmission Errors" is the text of the panelbar item and 25 is the number of items in the grid). When the grid is loading the count in the panelbar item text should be "--" to indicate loading.

I've got the dropdownlists working (for the most part - that's a different post) and am subscribing to the cascade event and am updating each panelbar item's href (ul>li>a.k-link) to have the appropriate company and location query strings.

Now, how do I force each panelbar to go get that content from the server without programmatically opening each panelbar? In other words, I want each PanelBar item to get its AJAX content while having each PanelBar remain closed.

For now, I'll hold off on my question about updating the text of the panelbar item (with the grid data total count) until I get past this issue.

Thanks,
--John

PanelBar

answered on 07 Mar 2015

2 answers

902 views

Assigning title text when hover on a cell

Hey,

I'm trying to assign a regular title="SOME TEXT GOES HERE" to each cell that's in the grid - in angular.
How can I accomplish this?

Thanks,
Lior

Grid

answered on 07 Mar 2015

3 answers

1.1K+ views

[Solved] DataSource filter - value is undefined

I'm trying to implement a custom filter on a DataGrid using a DropDownList.

When I filter a DataSource using a custom operator delegate, I get a "Reference Error: value is not defined" where value = whatever the actual value is that I'm trying to use to filter.

http://jsfiddle.net/v73fLpb4/6/

Try selecting London in the drop down and you'll see "ReferenceError: London is not defined" in your error console.
Am I doing something wrong?

Data Source

answered on 06 Mar 2015