Questions on Kendo UI for jQuery Forum

1 answer

116 views

I was playing with the spreadsheet filter and I find that it doesn't work in the examples given in the demos . https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export ( units in stock column / unit price/ Discontinued ) column . Please advice.

Spreadsheet

answered on 18 Mar 2016

1 answer

131 views

Will DateTime pikers be improved?

I'm in the process of converting my application from a server heavy rendering to Kendo UI browser based application.

So far Kendo UI is provinding us a wide range of good controls for this. But client are not happy with the time selection.

Our previous component provider had a more polished Datetime picker.

With complete keypress management in the input text area.

-click or side arrow on keyboard where selecting date or time part in the text area, then arrow up and down where increasing or decreasing selected area.

-letters where not allowed and format was enforced.

Before starting to write all these validation I'm just asking if there is any plan to improve that aspect of the control any time soon.

Cause It really feel like the calendar button and hours selection where done and polished then the text area was left unfinished.

DatePicker

answered on 18 Mar 2016

1 answer

190 views

Kendo Grid Pop-up Validation

Hello,

I've been running into a problem when trying to validate the pop-ups from a grid edit.

When I have everything set up as in the code below, errors from the controller are returned as a string on a new page, rather than to the ValidationSummary or ValidationMessage Tags.

Here is the PartialView used as a template for the Pop-up editor

@model CopyOrder

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<div class="EditorContainer">

<div id="OrderEditorSubHeader">Order <b>Information</b></div>

@using (Html.BeginForm("OrderCopy", "OrderManagement")){

<div class="form-group">

@Html.Label("Copy Order ID")

@(Html.Kendo().ComboBoxFor(m=>m.CopyOrderID)

//.Name("CopyOrderID")

.Filter("contains")

.Placeholder("Please Select")

.DataSource(dataSource => dataSource.Read(read => read.Url("/OrderManagement/OrderID_Select")))

.DataTextField("Text")

.DataValueField("Value")

.Suggest(true)

.HtmlAttributes(new { @class = "form-control" }))

@Html.ValidationMessageFor(m => m.CopyOrderID)

</div>

<div class="form-group">

@Html.Label("Copy To Customer")

@(Html.Kendo().ComboBoxFor(m=>m.CopyCustomerID)

//.Name("CopyCustomerID")

.Filter("contains")

.Placeholder("Please Select")

.DataSource(dataSource =>

dataSource.Read(read =>

{

read.Action("AvailableCustomers_Select", "OrderManagement")

.Data("filterAvailableCustomers");

})

.ServerFiltering(true)

)

.DataTextField("Text")

.DataValueField("Value")

.Suggest(true)

.Enable(false)

.AutoBind(false)

.ValuePrimitive(true)

.CascadeFrom("CopyOrderID")

.HtmlAttributes(new { @class = "form-control" }))

@Html.ValidationMessageFor(m => m.CopyCustomerID)

</div>

<input id="submitbtn" type="submit" value="Save" />

@Html.ValidationSummary(false)

}

Here is the Controller code

[HttpPost]

public ActionResult OrderCopy([DataSourceRequest] DataSourceRequest request, Ops.Models.CopyOrder Copy)

{

var db = new Ops.Models.Ops_Entities();

if (ModelState.IsValid)

{

try

{

//A bunch of Linq Queries here

//One of them causes a NullReference Exception

db.OrderGroups.Add(newGroup);

db.SaveChanges();

return RedirectToAction("Orders");

}

catch (NullReferenceException)

{

//Code reaches this point when I trigger the error in question

//Problem is that when it is returned, a new page is opened just displaying the error message as a string

ModelState.AddModelError(String.Empty, "Invalid Selection");

var failmodel2 = (new List<Ops.Models.CopyOrder> { Copy }).ToList().ToDataSourceResult(request, ModelState);

return Json(failmodel2, JsonRequestBehavior.AllowGet);

}

var failmodel = new List<Ops.Models.CopyOrder>();

return Json(failmodel.ToDataSourceResult(request, ModelState));

}

and my kendo grid

@(Html.Kendo().Grid<Ops.Models.vw_Orders>()

.Name("Orders")

.EnableCustomBinding(true)

.Columns(columns =>

{

columns.Bound(p => p.SchoolYear)

.Title("Year");

columns.Bound(p => p.Company)

.Title("School Name")

.ClientTemplate("<span><a href='/CustomerManagement/SchoolInfo?CustomerID=#=CustomerID#'>#=Company#</a></span>");

columns.Bound(p => p.MasterOrderID)

.Title("Order ID");

columns.Bound(p => p.GroupName);

columns.Bound(p => p.Type);

columns.Bound(p => p.Program);

columns.Bound(p => p.Status)

.ClientTemplate("<span>#=Status#</span>");

columns.Bound(p => p.AddUser);

columns.Bound(p => p.SalesTerritory)

.Title("Territory");

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderGroupEdit"))

.ToolBar(toolBar =>

{

toolBar.Create().Text("Add Order");

toolBar.Custom().Text("Copy Order").HtmlAttributes(new { id = "openCopyWindow" });

toolBar.Custom().Text("Add Service Item").HtmlAttributes(new { id = "openServiceItemWindow" });

toolBar.Custom().Text("Get Job Master").HtmlAttributes(new { id = "openJobMastWindow" });

})

.Pageable(o =>

{

o.PageSizes(new[] { 11, 20, 50, 100, 1000 });

o.ButtonCount(4);

})

.Sortable()

.Filterable(f =>

f.Operators(o =>

o.ForString(d => d

.Clear()

.Contains("Contains")

.IsEqualTo("Equal To")

)

.Events(e => e.DataBound("onDataBound"))

.ClientDetailTemplateId("OrderDetails")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.MasterOrderID))

.PageSize(100)

.Read(read => read.Action("OrderSearch", "OrderManagement"))

.Create(create => create.Action("OrderCreate", "OrderManagement"))

.ServerOperation(true)

)


@(Html.Kendo().Window()
    .Name("window")
    .Title("Copy Order")
    .Content("")
    .LoadContentFrom("CopyOrder", "OrderManagement")
    .Draggable()
    .Visible(false)
    .Width(800)
    //.Events(e => e.Close("ManualWindow_close"))
)

and the js opening the window

$(document).ready(function () {

$("#openCopyWindow").click(function (e) {

e.preventDefault();

var window = $("#window").data("kendoWindow");

window.center().open();

});

})

Grid

answered on 18 Mar 2016

5 answers

342 views

Date Picker value not encoding timezone

We have a problem with the kendo ui date picker. We have a server which returns dates in ISO8601 format, encoded with timezone information. (it's rare that there are any UTC dates in our database) We've gotten the date picker to display those ISO8601 dates in a sane, human-readable format, but what we haven't managed is how to encode timezone information with the date value sent back to the server upon saving.

Here is a jsfiddle which hopefully makes it a little easier to follow along with what the problem is: https://jsfiddle.net/stdph60n/

To see the problem we're having, (1) Fill in the datepicker (e.g. 03/07/2016)

(2) Open your developer tools on the jsfiddle tab and click on the "Network" tab (or you can skip steps 2, 3, and 4 and just look at the value of dateString below the datepicker)

(3) Hit the "Click me!" button

(4) Look at the dateString value under "Request Payload" It says "3/7/2016". When this gets sent to the server, the server reads it as "2016-03-07T00:00:00+00:00". For my particular time zone, the server should be reading the value as "2016-03-07T00:00:00-05:00"

Is there a way to send the time zone information encoded within the date information so the server can know which time zone the date is in?

DatePicker

answered on 18 Mar 2016

1 answer

530 views

Maximum call stack size exceeded error with angularjs and mvc

Hello,

I use last version of kendoui and i have problem with TreeList component (asp-net.mvc on server and angularjs on client)

javascript

$scope.treelistOptions = {

dataSource: {

transport: {

read: {

type:'GET',

url: 'category-tree',

}

},

schema: {

model: {

Id: "categoryId",

ParentId:"parentCategoryId",

fields: {

categoryId: { field: "categoryId", type: "number", nullable: false },

parentCategoryId: { field: "parentCategoryId", nullable: true },

name: { field: "name" },}

}

},

columns: [

{ field: "Name" },

],

};

TreeList

answered on 18 Mar 2016

4 answers

396 views

Unable to clear values programmatically when using virtualization

I am trying to clear values in a MultiSelect widget that utilizes virtualization. If I filter to an item that is outside of the initial data load and attempt to clear the value via javascript I get the error "Uncaught TypeError: Cannot read property 'item' of undefined" after the MultiSelect refreshes. If I open the MultiSelect after selecting the value, the valueMapper function fires and the error does not occur when I clear the items. I am able to reproduce this error using a modified version of the virtualization demo. It seems like the difference between the two is that the paging variables are not reset when the window is closed. This sounds similar to a previous thread that related to the filter not being reset on close.

Here are the steps to reproduce:

Filter the multi select to a value that is outside of the initial load.
Select the value.
Close the multi select list.
Click the Clear Orders button.

If I could manually fire the valueMapper function for the MultiSelect then I could create a workaround. Any suggestions on a workaround would be appreciated. My experience overall with the way virtualization is handled in this control suite has not been very good. It would be helpful to have more of the virtualization areas exposed similar to what is available in the dataSource object.

MultiSelect

answered on 18 Mar 2016

4 answers

565 views

Why is the enter key adding <P> tags

Why on earth would the editor add <p> tags every time the user hits the enter key. Seems insane to me. The user has to now know about the shift key trick. Is there a setting I'm missing that allows the Kendo editor to work more like the RadEditor I'm using to write this post? I think the RadEditor is made by you guys also... am I correct? Why wouldn't it work similarly?

Editor

answered on 18 Mar 2016

3 answers

172 views

validate callback doesn't work

This is straight forward but the callback is never hit.

$("#form1").kendoValidator({
validate: function(e) {
debugger
console.log("valid" + e.valid);
}
}).validate();

Can anybody help me on this (Yes the form exists)?
Also, shouldn't this also be hit on blur?

Validation

answered on 18 Mar 2016

2 answers

340 views

[Solved] Difficulty Adding Bubble Layer on Map

I am new to Kendo map but I can add tile layer, shape layer, marker layer. I encounter some difficulty when I try to add bubble layer.

I start with bubble demo from http://demos.telerik.com/kendo-ui/map/bubble-layer

I add the following code,

layers.Add()
.Type(MapLayerType.Bubble)
.Style(style => style
.Fill(fill => fill.Color("#red").Opacity(0.4))
.Stroke(stroke => stroke.Width(0))
)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/Content/urban-areas.json")))
)
.LocationField("Location")
.ValueField("Pop2010");

I try to find urban-areas.json from Internet and trim to two record. like following

[
{
"City": "Sofia",
"Country": "Bulgaria",
"Country_ISO3": "BGR",
"Pop1950": 520,
"Pop1955": 620,
"Pop1960": 710,
"Pop1965": 810,
"Pop1970": 890,
"Pop1975": 980,
"Pop1980": 1070,
"Pop1985": 1180,
"Pop1990": 1190,
"Pop1995": 1170,
"Pop2000": 1130,
"Pop2005": 1170,
"Pop2010": 1180,
"Pop2015": 1210,
"Pop2020": 1230,
"Pop2025": 1240,
"Pop2050": 1236,
"Location": [
42.7,
23.33
]
},
{
"City": "Mandalay",
"Country": "Myanmar",
"Country_ISO3": "MMR",
"Pop1950": 170,
"Pop1955": 200,
"Pop1960": 250,
"Pop1965": 310,
"Pop1970": 370,
"Pop1975": 440,
"Pop1980": 500,
"Pop1985": 560,
"Pop1990": 640,
"Pop1995": 720,
"Pop2000": 810,
"Pop2005": 920,
"Pop2010": 960,
"Pop2015": 1030,
"Pop2020": 1170,
"Pop2025": 1310,
"Pop2050": 1446,
"Location": [
21.97,
96.08
]
}
]

I ran it I see I don't see the Bubble and see an Error.

Uncaught TypeError: t is not a function in kendo.all.min.js:97

If I reload the web, I got

Uncaught TypeError: t is not a function in kendo.all.js:144729

_drawSymbol: function (shape) {
var args = {
layer: this,
shape: shape
};
var cancelled = this.map.trigger('shapeCreated', args); <------- here
if (!cancelled) {
this.surface.draw(shape);
}
}

I am using 2016.1.112

If I switch to another I I create. I don't see the error but still not see the bubble.

And I exam. $("#map").data("kendoMap"), Look to me the bubble layer is created but not correctly.

I see.

layers:Array[2]

0: h.extend.init

1:o

Should I expect o.extend.init?

Map

answered on 17 Mar 2016

1 answer

116 views

[Solved] Popup widget undocumented option - adjustSize

Hello,

We recently stumbled across the Popup adjustSize option. It is actually incredibly useful for getting more fine grained control over tooltip positioning, as it lets us pad out the effective size of the tooltip bounds by a well defined fixed amount.

We had previously done this by using various CSS tricks, none of which were as robust as just using adjustSize.

Could this please be documented properly in future Kendo releases?

thanks,

Rowan

General Discussions