Questions on Kendo UI for jQuery Forum

1 answer

3.9K+ views

How to trigger change for dropdownlist to populate other field data

Hi

I have a dropdownlist that is setup like this:

<div class="requisitionForm-content">

@(Html.Kendo().DropDownListFor(m => m.RequisitionModel.FormDto.VendorIdentifier)

.Events(e => e.Change("onVendorChange"))

.OptionLabel("Select a vendor...")

.DataValueField("Identifier")

.DataTextField("Name")

.Filter(FilterType.Contains)

.DataSource(s => s.Read(r => r.Action("GetVendors", "RequisitionForm", new { formVendor = Model.RequisitionModel.FormDto.VendorIdentifier }).Type(HttpVerbs.Post).Data("getVendorExtraData")))

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

</div>

When a selection is made, it populates some text fields on the page. onVendorChange is pretty simple:

function onVendorChange(e) {

var phone = "";

var address = "";

var fax = "";

var email = "";

var vendorDropList = $('#RequisitionModel_FormDto_VendorIdentifier').data("kendoDropDownList");

var dataItem = vendorDropList.dataItem();

if (dataItem) {

phone = dataItem.Phone ? dataItem.Phone : "";

address = dataItem.Address ? dataItem.Address : "";

fax = dataItem.Fax ? dataItem.Fax : "";

email = dataItem.Email ? dataItem.Email : "";

var requisitionList = $('#RequisitionModel_FormDto_RequisitionType').data("kendoDropDownList");

var reqType = requisitionList.dataItem();

if (dataItem.BlanketOrderPo &&

reqType &&

reqType.Identifier == "@RequisitionType.BlanketOrder.Identifier.ToString()") {

$('#RequisitionModel_FormDto_PoNumber').val(dataItem.BlanketOrderPo);

}

$('#RequisitionModel_FormDto_VendorContactPhone').val(phone);

$('#RequisitionModel_FormDto_VendorAddress').val(address);

$('#RequisitionModel_FormDto_VendorFax').val(fax);

$('#RequisitionModel_FormDto_VendorEmail').val(email);

}

I am trying to save the state of form in localstorage. I am retaining the "Identifier" value.

I am restoring the state of the form by:

(elem is the specific dropdownlist element)

.. snip ..

$(elem).data('kendoDropDownList').value(formObject[key]);

$(elem).data('kendoDropDownList').trigger("change");

.. snip ..

The dropdownlist shows the correct name, but it acts as though the onChange event does not trigger: none of the related text fields are populated.

However, if I run the following at the browser's console:

$("#RequisitionModel_FormDto_VendorIdentifier").data("kendoDropDownList").trigger("change");

the change event is triggered.

It feels like it's a bit of a race condition - the dropdownlist hasn't populated it's data yet, or .. something?

How can I wait for the dropdownlist to be ready to be triggered? Is there a better way to handle this?

Thanks in advance.

DropDownList

answered on 18 May 2018

2 answers

343 views

error raised for 200 status code when body contains a property named errors

Why is the datasource firing the error event when the response body contains a property named errors?

The error is not raised if I change the property name.

Data Source

answered on 18 May 2018

1 answer

1.0K+ views

Datasource Group, Grouping and Aggregates - Show the same aggregate values on all the group header.

Hi,

I'm looking for a way to show the sum of a column on the group line like in this example : https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells, but for every group possible. In others words, I would like to show, let's say the total of Completed tasks no matter the grouping so if I group by age, the total of Completed tasks will be shown on the group header. If I group by age, the total of Completed tasks would be shown on the group header as well.

By enabling the grouping in the Grid, it seems that this only works for the group specified in the data source.

Please see my example : https://dojo.telerik.com/OcuquWOd

As you can see, the Count is only shown when the grid is grouped by Units in stocks. When the group is on another column, the Count is no more shown.

Do you have any idea on how to achieve this ?

Thanks,

Grid

answered on 18 May 2018

1 answer

620 views

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

560 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

361 views

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

753 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

192 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

520 views

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>