Questions on Kendo UI for jQuery Forum

1 answer

675 views

[Solved] create event on double click of cell

Hi,
I'm trying to create an event on double click on a selected cell in the scheduler.
I have already implemented right click and drag event create and left click and create event

The below code is for create event on right click and drag

view.element.on("mouseup", ".k-scheduler-content td", function(e) {

if(e.which===1){

let scheduler = this;

let selection = scheduler.select();

let slot = scheduler.slotByElement($(e.target));

let resource = scheduler.resourcesBySlot(slot);

let roomId = resource.RoomID;

if (selection.events && !selection.events.length ) {

if(selection.slots.length>1){

//no events are selected then this is create

scheduler.select(null);

scheduler.addEvent({

reservationId:newResNumber,

title:"No Title",

FirstName:"Jane",

LastName:"Doe",

start: selection.start,

end: selection.end,

RenderColor:"#FFFFCE",

RoomID: roomId,

CheckedIn:true,

Moveable:true

});

}

}

});

How can i create event on double click on a selected event

Scheduler

answered on 18 May 2018

5 answers

636 views

Line Graph Marker on Mouse Hover

Hello everyone! :)

I'm working with a line graph and I'm trying to get markers to appear only when the user hovers over the line in the graph. I have found an example on another forum post that does exactly what I want, but I cannot figure out how the markers work. I see an explicit "visible: false" line, but nothing to set up the markers to appear on hover. Any help here will be greatly appreciated. Many thanks in advance!

The post I'm referring to is here
http://www.kendoui.com/forums/dataviz/chart/formatting-my-chart.aspx

And the poster's example is here (hover over the actual line values in the line graph to see what I'm talking about) Hopefully it's ok to post somebody else's link. This feels a little awkward. :)

http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html

Charts

answered on 18 May 2018

2 answers

413 views

[Solved] Disable Auto-Fill ?

Is there a way to disable auto-fill on the spreadsheet? We don't want our clients to accidentally activate it and over-write data they've already entered in the spreadsheet.

Thanks.

Greg

Spreadsheet

answered on 17 May 2018

4 answers

788 views

Can I use data from a MySQL database?

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

244 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

575 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

143 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

937 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

495 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

102 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