Hello everyone,
I'm terribly sorry for busting in here without taking the proper time to get acquainted with these forums.
I'm currently in China for a month and during this period I'd like to test Kendo UI, but here in China it's incredibly hard to work on servers outside China.
Many sites are blocked, and the ones which aren't have a very slow connection and sometimes don't work properly (because certain resources are blocked).
That's why it's very frustrating to try to develop something in a new framework; every search for information is so hard... So please forgive me if I'm asking questions which have already been answered.
I'm trying to combine Kendo UI development with a RequireJS based site. But I don't want to use global variables and I want to put the code in a separate module (js-file) instead of the HTML-page. The sample on the Kendo UI site on requirejs didn't help me on that subject.
For some reason I can't get that to work. The Kendo-methods are not defined in the jQuery-object and if I'm trying to use the kendo-object within a define or require method it keeps saying that it's "undefined".
On top of that I'm still in the process of getting used to the use of modules nd requirejs.
Could someone help me out, please?
index.html:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Testing KendoUI</title> <link rel="stylesheet" href="styles/kendoui/kendo.common-material.min.css" /> <link rel="stylesheet" href="styles/kendoui/kendo.material.min.css" /> <script data-main="js/main" src="js/require.js"></script></head><body> <div id="example"> <div class="demo-section k-content"> <h4>Choose shipping countries:</h4> <input id="countries" style="width: 300px;" /> <div class="demo-hint">Start typing the name of an European country</div> </div> </div></body></html>requirejs.config({ paths: { kendo: "ext/kendoui" }});//Start the applicationrequire(["mod/autocomp"], function(pMod){ pMod.StartModule();}); paths: { kendo: "ext/kendoui" }});//Start the applicationrequire(["mod/autocomp"], function(pMod){ pMod.StartModule();});define(["jquery", "kendo/kendo.all.min"], function($, pKUI){ var ListItems = [], SetItems = function(pItems) { ListItems = pItems; }, GetItems = function () { return ListItems; }, SetAutoComplete = function(pFieldID) { pKUI.jquery("#" + pFieldID).kendoAutoComplete({ dataSource: ListItems, filter: "startswith", placeholder: "Select country...", separator: ", " }); }, StartModule = function() { SetItems([ "Albania", "Andorra", "Armenia", //... "United Kingdom", "Vatican City"]); //create AutoComplete UI component SetAutoComplete("countries"); }; //Reveal the required methods publicly return { StartModule: StartModule }; });
I tried both "$" and "pKUI.jQuery", $ is defined but doesn't contain any Kendo items, and pKUI just isn't defined at all.
I am trying to set up a cascading drop down list using the resources of a scheduler.
The drop down lists work fine, but when i try to declare the parent/child cascade using the 'cascadeFrom' the cascade does not work at all.
Here is my code:
<div id="resourcesContainer">
</div>
<script>
jQuery(function () {
var container = jQuery("#resourcesContainer");
var resources = jQuery("#scheduler").data("kendoScheduler").resources;
for (var resource = 0; resource < resources.length; resource++)
{
jQuery(kendo.format('<div class="k-edit-label"><label for="{0}">{1}</label></div>', resources[resource].name, resources[resource].title)).appendTo(container);
var divID = resources[resource].name + "kdd";
var labcont = jQuery(kendo.format('<div id="{0}" class="k-edit-field"></div>', divID)).appendTo(container);
if (resources[resource].name !== "LocationRoom") {
jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
.appendTo(labcont)
.width(300)
.kendoDropDownList({
filter: "contains",
dataTextField: resources[resource].dataTextField,
dataValueField: resources[resource].dataValueField,
dataSource: resources[resource].dataSource,
valuePrimitive: resources[resource].valuePrimitive,
optionLabel: "Select...",
template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
});
}
else if(resources[resource].name === "LocationRoom")
{
jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
.appendTo(labcont)
.width(300)
.kendoDropDownList({
autoBind: false,
cascadeFrom: "Locationkdd",
optionLabel: "Select location first...",
dataTextField: resources[resource].dataTextField,
dataValueField: resources[resource].dataValueField,
dataSource: resources[resource].dataSource,
valuePrimitive: resources[resource].valuePrimitive,
template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
});
}
}
});
</script>
HOWEVER, if i change jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field)).appendTo(labcont).Width(300)..... to jQuery("#" + divID).Width(300).... it works, but obviously the MVVM binding is completely lost.
Any ideas?
<div class="chart-cell"> <div id="chart" /></div>
$.get("/chart/GetCustomPlotData", data, function (response) { if (response.Success) { var result = response.Result; if (result.IsAggregated) { $("#data-point-count").text(result.DataSet.ChannelData[0].Data.length + " of " + result.DataSet.DataPointsInFile); } else { $("#data-point-count").text(result.DataSet.ChannelData[0].Data.length); } // Format the data then generate the graphs var seriesData = []; for (var i = 0; i < result.DataSet.ChannelData.length; ++i) { var data = [] for (var j = 0; j < result.DataSet.ChannelData[i].Data.length; ++j) { data[j] = { Time: new Date(FormatUtsDate(result.DataSet.ChannelData[i].Data[j].Time)), Value: result.DataSet.ChannelData[i].Data[j].Value } } seriesData[i] = { name: result.DataSet.ChannelData[i].Title !== "" ? result.DataSet.ChannelData[i].Title : result.DataSet.ChannelData[i].ChannelName, visibleInLegend: false, tooltip: { template: "value: #= value.y #, time: #= FormatDate(value.x) #", visible: true }, type: "scatterLine", xField: "Time", yField: "Value", data: data, markers: { visible: false } } } $("#chart").kendoChart({ series: seriesData, chartArea: { @* There is probably a better way to do this, but I can't think of it right now. This occurs before the divs are rendered so their widths at this point are not what they will be after rendering *@ //width: 1074 }, xAxis: [{ type: "date", baseUnit: "seconds", labels: { step: (result.Columns == 3 ? 2 : 1) } }], yAxis: [{ axisCrossingValue: [-50000] }], legend:{ position: "left", orientation: "horizontal", visible: true }, pannable: true, zoomable: true, }); kendo.ui.progress($(".chart-loading"), false); $("#loading").hide(); $("#nine-blocker-grid").show(); } else { kendo.ui.progress($(".chart-loading"), false); $("#loading").hide(); $("#error-message").text(response.Message); $("#error").show(); }});All the series are being plotted, but for whatever reason the legend does not display. Just wonder if there is any obvious reason why that might be
Thanks
Hi,
I need to create an online tool for designing database ER diagrams using Kendo UI. I know that TelerikUI for WPF has a Diagram component with an example for creating Tableshapes (or ER Diagram). Is there any such example for KendoUI?
Thanks
Greetings, Is there a way to easily move the "show all day" / "show business hours" out of the footer and into the header next to the view selector list? I tried moving it with jQuery, but it loses its functionality at that point:
$(".k-scheduler-fullday").parent().insertAfter(".k-scheduler-views")It would be great to be able to move the button without having to recreate the functionality myself. Thanks in advance for any help!
Rafe
I've a grid with scrollable: {virtual: true}. I insert a new row on top of the grid, using either .addRow() or grid.dataSource.insert(0, {});
Then I try to scroll the grid, I saw some error in the console saying:
<p color="red">Uncaught RangeError: Maximum call stack size exceeded</p>
Here is a dojo example: http://dojo.telerik.com/UCiXA/2
I think this error will cause some other issues. In this dojo, we can see that the values on the footer(i.e. 21 - 40 of 77 items) is not updating correctly. In my product, it will cause some paging issue, I will see the page size jumping for 10 to 5 while scrolling, and sometime performance issue that will cause slow repose.
Hi Telerik Team,
I have a grid using Ajax for data like so
.DataSource(dataSource => dataSource.Ajax() .PageSize(20) .ServerOperation(true) .Read(read => read.Action("GetSerializedItems", "Inventory", new { storeId = Model.StoreID, fromSerialNo = Model.FromSerialNo , stockCode=Model.StockCode }))And my Action in Controller
[HttpPost]public JsonResult GetSerializedItems([DataSourceRequest]DataSourceRequest request, List<string> fromSerialNo, string stockCode, string storeId)And the Model for the request
public class RequestQueryInventoryStatus{ public string StoreID { get; set; } public List<string> FromSerialNo { get; set; } public string StockCode { get; set; } public string UserId { get; set; } public int? take { get; set; } public int? skip { get; set; } public int? page { get; set; } public int? pageSize { get; set; } public string sortField { get; set; } public string sortDir { get; set; }}However, the Action is unable to recognize the List of string and it takes the type System.Collections.Generic.List`1[System.String] as value instead. If I stringify the object Model.FromSerialNo, it will be too long to be in the query string, however the payload data of the post request has already been occupied by DataSourceRequest (with info like sort, page, etc.). Is there anyway to work around this issue?
Thanks,
Hery.
