Questions on Kendo UI for jQuery Forum

4 answers

783 views

I am evaluating Kendo UI for Jquery.

I need the spreadsheet grid control to input a very specific excel file. In the end, I need to turn it into a web form.

That form data would write to a MySQL database. Another web page would read from the database and populate the spreadsheet with data.

Can this be done with the spreadsheet control?

If not, can it be done with the data grid or other Kendo UI controls?

If so, please explain how I would accomplish this.

Thank you.

Mike

Spreadsheet

answered on 17 May 2018

1 answer

238 views

Kendo UI and ObservableCollection

I've been using MVVM in my UWP code to great effect, so most of my data modelling is done with ObservableCollections. I want to have 'live' data in my ListView, so that if I add an item it will appear automatically and if I delete it, it will disappear automaticall. Do the Kendo UO control for .NET Core respect the ObservableCollection interface? And what about fields, if I update the name on a record on a IPropertyChangeNotification object in an ObservableCollection, will that change feed through to the UI?

Data Source

answered on 16 May 2018

7 answers

572 views

[Solved] Two grid switch lead to loading issue

I have two kendo ui grid in one html page. They displayed based on the options that user choose in dropdownlist. For example, if I chose 1, the first grid displayed and the second one hidden. And if I choose 2, the second one displayed but first one hidden.

But after I choose 1 and add some items to grid 1, then choose 2 to switch to grid 2 and add some items to grid 2. Now when I switch back to grid 1, it display a loading icon always. I could not operate my grid 1 any more.

The attached screenshot is the issue. And following is my code. Can someone help us check what's wrong with my code? Thanks.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../styles/kendo.common.min.css" />
<link rel="stylesheet" href="../styles/kendo.default.min.css" />
<link rel="stylesheet" href="../styles/kendo.default.mobile.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script type="text/javascript">
function SelectRawMaterType() {
var type = document.getElementById("Type");
var meat = document.getElementById("Meat");
var additive = document.getElementById("Additive");
var gridMeat = document.getElementById("gridMeat");
var gridAdditive = document.getElementById("gridAdditive");
if (type.value == 0) {

additive.style.display = "none";
meat.style.display = "block";
gridMeat.style.display = "block";
gridAdditive.style.display = "none";
}
if (type.value == 1) {

additive.style.display = "block";
meat.style.display = "none";
gridMeat.style.display = "none";
gridAdditive.style.display = "block";
}

Records();
}

function Records() {
var para = document.getElementById("Type");
if (para.value == 0) {
$(document).ready(function () {
var mydata = new kendo.data.DataSource({
transport: {
//读取数据
read: function (e) {
////alert(111);
//e.success(datasource);
},
//更新数据
update: function (e) {
e.success();
}

},
schema: {
model: {
id: "Id",
fields: {
RawName: { type: "string" },
Unit: { type: "string" },
Remark: { type: "string" }
}
}
},
pageSize: 5
});

$("#gridMeat").kendoGrid({
dataSource: mydata,
selectable: "multiple, row", //设置多列可选
filterable: true, //设置过滤可用
sortable: true, //设置排序可用
pageable: true, //设置分页可用
editable: "popup", //设置编辑模式。popup:弹窗；linline:行内编辑
columns: [{
field: "RawName",
title: "原材料名称",
width: 240
}, {
field: "Unit",
title: "原材料单位"
}, {
field: "Remark",
title: "备注"
},
{ command: ["edit"], title: "操作" }]
});
});

}
if (para.value == 1) {
$(document).ready(function () {
var mydata = new kendo.data.DataSource({
transport: {
//读取数据
read: function (e) {
////alert(111);
//e.success(datasource);
},
//更新数据
update: function (e) {
e.success();
}

},
schema: {
model: {
id: "Id",
fields: {
RawName: { type: "string" },
Unit: { type: "string" },
MaximumUsage:{ type:"string"},
Remark: { type: "string" }
}
}
},
pageSize: 5
});

$("#gridAdditive").kendoGrid({
dataSource: mydata,
selectable: "multiple, row", //设置多列可选
filterable: true, //设置过滤可用
sortable: true, //设置排序可用
pageable: true, //设置分页可用
editable: "popup", //设置编辑模式。popup:弹窗；linline:行内编辑
columns: [{
field: "RawName",
title: "原材料名称",
width: 240
}, {
field: "Unit",
title: "原材料单位"
},
{
field: "MaximumUsage",
title:"最大使用量"
}, {
field: "Remark",
title: "备注"
},
{ command: ["edit"], title: "操作" }]
});
});
}
};

$(window).load(function () {
SelectRawMaterType();
//Records();
});

function GetSourceForMeat() {
var gridMeat = $("#gridMeat").data("kendoGrid");
var datasourceOfMeat = gridMeat.dataSource;
datasourceOfMeat.insert({
RawName: "牛肉1",
Unit: "袋",
Remark: "备注1"
});
};

function GetSourceForAdditive() {
var gridAdditive = $("#gridAdditive").data("kendoGrid");
var datasourceOfAdditive = gridAdditive.dataSource;
datasourceOfAdditive.insert({
RawName: "添加剂1",
Unit: "袋",
MaximumUsage: "100ml",
Remark:"备注2"
});
};
</script>

</head>
<body>
<div class="title">
<h4>原材料管理</h4>
</div>
<div class="rawMaterType">
原材料类型：
<select id="Type" onchange="SelectRawMaterType()">
<option value="0">肉类</option>
<option value="1">添加剂</option>
</select>
</div>
<div class="itemsForMeat" id="Meat">
<div class="items">
<table>
<tr>
<td>原材料名称：</td>
<td><input type="text" name="MeatName" /></td>
<td>原材料单位：</td>
<td><input type="text" name="MeatUnit" /></td>
</tr>
<tr>
<td>备注：</td>
<td><input type="text" name="MeatRemark" /></td>
<td><input type="button" name="MeatAdd" value="添加" onclick="GetSourceForMeat()" /></td>
<td><input type="button" name="MeatDelete" value="删除选中" /></td>
</tr>
</table>
</div>
</div>
<div class="itemsForAdditive" id="Additive">
<div class="items">
<table>
<tr>
<td>原材料名称：</td>
<td><input type="text" name="AdditiveName" /></td>
<td>原材料单位：</td>
<td><input type="text" name="AdditiveUnit" /></td>
<td><input type="button" name="AdditiveAdd" value="添加" onclick="GetSourceForAdditive()" /></td>
</tr>
<tr>
<td>最大使用量：</td>
<td><input type="text" name="MaxUsage" /></td>
<td>备注：</td>
<td><input type="text" name="AdditiveRemark" /></td>
<td><input type="button" name="AdditiveDelete" value="删除选中" /></td>
</tr>
</table>
</div>
</div>
<div id="gridMeat" class="records">

</div>
<div id="gridAdditive" class="records">

</div>
</body>
</html>

Grid

answered on 16 May 2018

1 answer

138 views

[Solved] "Object expected" error when expanding updated grid row

I have this code:

http://dojo.telerik.com/OPaGEXik

It works fine until addHistory() function is not fired. After that, the last added row in the gird is throwing "Object expected" when expanded.

In the dojo and the button added the error is a bit different but I think the root of the problem is the same.

What is the issue here?

Grid

answered on 16 May 2018

5 answers

929 views

Adding a new item does not save to the database

Hello

I am currently trying out Kendo UI for jQuery. I have an issue with the combobox where it does not save a new item to my database once I added the item. It seems to save it in localstorage for the duration of the session. I am new to this, so I am probably doing something wrong here. I have followed the example from the demo and the backend service. Can someone please tell me what I am doing wrong here.

Here is the code for my view page which sits in my app:

<div id="countries">

<div class="demo-section k-content">

<h4>Enter a Country name</h4>

<input id="countries" style="width: 100%;" />

<div class="demo-hint">e.g. 'South Africa'</div>

</div>

<script id="noDataTemplate" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.text() #' ?

</div>

<br />

<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.text() #')">Add new item</button>

</script>

<script>

function addNew(widgetId, value) {

var widget = $("#" + widgetId).getKendoComboBox();

var dataSource = widget.dataSource;

if (confirm("Are you sure you want to add this Country?")) {

dataSource.add({

CountryIdentifier: 0,

CountryName: value

});

dataSource.one("sync", function () {

widget.select(dataSource.view().length - 1);

});

dataSource.sync();

}

};

</script>

<script>

$(document).ready(function () {

var crudServiceBaseUrl = "http://localhost:49517";

var dataSource = new kendo.data.DataSource({

batch: true,

transport: {

read: {

url: crudServiceBaseUrl + "/Countries",

dataType: "jsonp"

},

create: {

url: crudServiceBaseUrl + "/Countries/Create",

dataType: "jsonp"

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return { models: kendo.stringify(options.models) };

}

},

schema: {

model: {

id: "CountryIdentifier",

fields: {

CountryIdentifier: { type: "number" },

CountryName: { type: "string" }

}

});

$("#countries").kendoComboBox({

filter: "startswith",

dataTextField: "CountryName",

dataValueField: "CountryIdentifier",

dataSource: dataSource,

noDataTemplate: $("#noDataTemplate").html()

});

</script>

</div>

Here is the code for my controller which sits in my API:

public class CountriesController : Controller

{

public ActionResult Index()

{

return this.Jsonp(CountryRepository.All());

}

public JsonResult Update()

{

var models = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (models != null)

{

CountryRepository.Update(models);

}

return this.Jsonp(models);

}

public ActionResult Destroy()

{

var countries = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (countries != null)

{

CountryRepository.Delete(countries);

}

return this.Jsonp(countries);

}

public ActionResult Create()

{

var countries = this.DeserializeObject<IEnumerable<CountryViewModel>>("models");

if (countries != null)

{

CountryRepository.Insert(countries);

}

return this.Jsonp(countries);

}

public JsonResult Read(int skip, int take)

{

IEnumerable<CountryViewModel> result = CountryRepository.All().OrderByDescending(p => p.CountryIdentifier);

result = result.Skip(skip).Take(take);

return this.Jsonp(result);

}

Here is the code for my ViewModel which sits in my API:

public class CountryViewModel

{

public int? CountryIdentifier { get; set; }

public string CountryName { get; set; }

public string CreatedBy { get; set; }

public string FK_CreatedByID { get; set; }

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

public Nullable<System.DateTime> DateCreated { get; set; }

public string LastEditedBy { get; set; }

public string FK_LastEditedByID { get; set; }

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

public Nullable<System.DateTime> DateLastEdited { get; set; }

}

And here is the code for my CountryRepository which sits in my API:

public static class CountryRepository

{

public static IList<CountryViewModel> All()

{

var result = HttpContext.Current.Session["Countries"] as IList<CountryViewModel>;

if (result == null)

{

HttpContext.Current.Session["Countries"] = result =

new OldMutualDataContext().Countries.Select(c => new CountryViewModel

{

CountryIdentifier = c.CountryIdentifier,

CountryName = c.CountryName,

CreatedBy = c.CreatedBy,

FK_CreatedByID = c.FK_CreatedByID,

DateCreated = c.DateCreated,

LastEditedBy = c.LastEditedBy,

FK_LastEditedByID = c.FK_LastEditedByID,

DateLastEdited = c.DateLastEdited

}).ToList();

}

return result;

}

public static CountryViewModel One(Func<CountryViewModel, bool> predicate)

{

return All().FirstOrDefault(predicate);

}

public static void Insert(CountryViewModel country)

{

var first = All().OrderByDescending(c => c.CountryIdentifier).FirstOrDefault();

if (first != null)

{

country.CountryIdentifier = first.CountryIdentifier + 1;

}

else

{

country.CountryIdentifier = 0;

}

All().Insert(0, country);

}

public static void Insert(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Insert(country);

}

public static void Update(CountryViewModel country)

{

var target = One(c => c.CountryIdentifier == country.CountryIdentifier);

if (target != null)

{

target.CountryName = country.CountryName;

target.LastEditedBy = country.LastEditedBy;

target.FK_LastEditedByID = country.FK_LastEditedByID;

target.DateLastEdited = country.DateLastEdited;

}

public static void Update(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Update(country);

}

public static void Delete(CountryViewModel country)

{

var target = One(c => c.CountryIdentifier == country.CountryIdentifier);

if (target != null)

{

All().Remove(target);

}

public static void Delete(IEnumerable<CountryViewModel> countries)

{

foreach (var country in countries)

{

Delete(country);

}

Help would be appreciated.

Thank You

ComboBox

answered on 16 May 2018

3 answers

490 views

DatePicker span elements hanging around after destroy

I'm not sure if this is expected behavior, but when you destroy a KendoDatePicker, the spans that Kendo creates on initialization of the widget stick around afterwards. It seems like something that Kendo should be cleaning up when it destroys a widget, since they are Kendo specific elements it added to the DOM.

Dojo to reproduce:
https://dojo.telerik.com/OBImobad

DatePicker

answered on 16 May 2018

2 answers

100 views

Incell number editing visual glitch

Hey everyone,

I came across an annoying visual glitch while implementing incell editing (default edit mode) with non-decimal numbers. When we enter the edit field of an said number (let's say value=14), for a brief moment the editor displays 14.00. This is easily reproducible in a clean dojo environment. I tried a couple of things to get rid of this but didn't succeed.

Here is a dojo where each column represents what I've tried :

Standard: minimalist config that I used in the beginning
Model Format: tried to force the format at the data source level
Template: Tried to set a custom template with kendo.toString(value, "n0")
Custom Editor: using a simple custom editor ( vale is lost here)
Custom editor 2: using a custom editor and initializing the value (breaks model change)

https://dojo.telerik.com/oYAvOlOZ

Grid

answered on 15 May 2018

11 answers

572 views

Kendo showing negative zero when using conditional formatting

We are using kendo’s support for conditional formatting to build custom masks. For example:

kendo.toString(value, ‘\\$0;-\\$0’) // e. g. -$100 or $100

The problem is that kendo picks which side of the conditional formatting to use BEFORE rounding is applied. Thus we can end up with a display of negative zero:

kendo.toString(-.01, ‘\\$0;-\\$0’) // -$0

Note that this is similar to this issue: http://www.telerik.com/forums/issue-rounding-to-zero---getting-negative-zero, however that issue is for the built-in n2 format whereas our issue is for conditional formats.

Note that in C#/.NET, the behavior of conditional formats matches what we want:

Console.WriteLine((-.01).ToString("$0;-$0")); // $0

For reference, the reason we are building masks like this is because we have user-defined “front” and “back” symbols which should go between the negative/positive sign (or parens if we are using parens for negation) and the number itself. We thus want -$100 or ($100) instead of $-100 or $(100).

It would be great if kendo’s behavior matched .NET in this regard since it seems to be so similar otherwise and in general the .NET behavior seems preferable in most cases.

Also posted on StackOverflow:
http://stackoverflow.com/questions/39977914/kendo-format-string-puts-literal-in-the-wrong-place

http://stackoverflow.com/questions/39977630/kendo-conditional-formatting-results-in-negative-zero

General Discussions

answered on 15 May 2018

1 answer

161 views

Whats the formula for RANGE email validation?

All the samples reference specific cells

https://demos.telerik.com/kendo-ui/spreadsheet/validation

The need is to be able to define validation for columns in the sheet to enforce a template... the data isn't being manually created with the sheet. I feel like most of the samples (all?) seem to be setup with creating the row\cell on init, and that's valid for like template\header\footer setup but not real-world data usage.

sheet.range("A2:A40").validation({

dataType: "custom",

from: "SEARCH(\"@\")",

allowNulls: true,

type: "warning",

messageTemplate: "Invalid email"

});

Spreadsheet