Hello,
as I understand Navgiator Bars as seen in this example http://demos.telerik.com/kendo-ui/financial/index are only available for Stock Charts.
In my chart I am using bars, grouped stacked bars, lines and markers (basically lines). The series are plotted next to each on one single X- and Y-Axis. Is there any possibility to add a navigator pane that looks and works as in the provided link?
Thank you!
WordWrap is not happening in the column header of Kendo PivotGrid. I tried applying the following CSS to have word-wrap but it is not happening properly instead it is crossing the vertical column line and displayed in the next column. Instead my requirement is to display it in the next line of the same column.
Please find the snapshot for more details.
I tried applying following CSS to do wordwrap but it is not working
.k-pivot .k-grid-header .k-header
{
word-wrap: break-word !important; overflow: visible;
}
Any ideas what changes need to be done?
I have put the div for the Kendo Grid inside another div which limits the area on screen used. When the popup for sorting and column selection is used, this might now popup at a position where it should leave this limiting div to show its contents. Take a look at the attached picture, it shows the problem much clearer.
Some Kendo UI widgets have a "attachTo" property to configure where the DOM element will be inserted for the popup but this does not seem to be the case here. How can I fix that situation?

So i have a ComboBox in a reusable partial view. When i try to use getAddionalData and pass more parameters to the controller, is there a way i can pass the input of the combobox to the function? I can't directly call it in the getAddionalData because there may be multiple and I won't know the exact id of which is calling the function. I tried to use the 'this' qualifier in the function but that only gives me the url of the read. For instance, on the dataBound function, i can call this.open() and it'll open my combobox. I can't use that here. Any idea?
@(Html.Kendo().ComboBoxFor(m=>m.Id) .DataTextField("xxxx") .DataValueField("xxxx") .Placeholder("xxxx") .MinLength(3) .AutoBind(false) .Events(e=>e.DataBound("functionCall").Change("functionCall")) .TemplateId("templateId") .HtmlAttributes(new { @class = "form-control", style = "width:100%" }) .Filter("contains") .Delay(500) .DataSource(source => source.Read(read => read.Action("method", "controller").Data("getAdditionalData(#=input.val()#)")) .ServerFiltering(true)) .Height(500) )
I'm using the Datasource object to retrieve data from a remote (JSON) datasource which I would then like to filter client-side without doing any round-trips back to the server. I get the results fine but I'm unable to clear and reapply filters, my code is:
dsReport.fetch().then(function(){
var view = dsReport.view();
dsReport.filter({field:"Occupation", operator: "equals", value:"DEVELOPER"})
console.log(view[0].NumberOfStaff); //Outputs 13 which is correct
dsReport.filter({}); //Remove the previous filter??
dsReport.filter({field:"Occupation", operator: "equals", value:"MANAGER"})
console.log(view[0].NumberOfStaff); //Outputs 13, should be 22, assuming new filter isn't being considered
})


In one grid i have a dropdownlist editor in one column. When grid load, i see the value but when i edit my row (inline), the value is not selected in dropdownlist. When i click on the arrow dropdownlist expand and close immediatly. What is my problem ?
@* Liste des téléphones *@
var phoneDs = new kendo.data.DataSource({
transport: {
read: {
url: "@Url.Action("ShowPhones", "SupplierInformations")",
method: "post",
dataType: "json"
},
update: {
url: "@Url.Action("UpdatePhone", "SupplierInformations")",
method: "post",
dataType: "json"
},
destroy: {
url: "@Url.Action("DeletePhone", "SupplierInformations")",
method: "post",
dataType: "json"
},
create: {
url: "@Url.Action("AddPhone", "SupplierInformations")",
method: "post",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
else
{
//return options;
}
}
},
batch: true,
autoSync: true,
schema: {
model: {
id: "PhoneId",
fields: {
PhoneId: { editable: false, nullable: true },
PhoneNumber: { validation: { required: true,
phonevalidation: function (input)
{
if (input.is("[name='PhoneNumber']")) {
input.attr("data-phonevalidation-msg", "@LocalizationValues.The_Phone_Number_Format_Is_Invalid");
return /^@RegexHelper.PhoneRegex^/.test(input.val());
}
return true;
}
} },
PhoneExtension: { validation: { required: false,
extensionvalidation: function (input)
{
if (input.is("[name='PhoneExtension']") && input.val() != "") {
input.attr("data-extensionvalidation-msg", "@LocalizationValues.The_Phone_extension_Is_Invalid");
return /^\d+$/.test(input.val());
}
return true;
}}},
PhoneTypes: { validation: { required: true} },
IsEmergency: { type: "boolean" },
Type: { validation: { required: true,
typevalidation: function (input)
{
if (input.is("[name='Type']")) {
input.attr("data-typevalidation-msg", "@LocalizationValues.The_Phone_Type_Is_Mandatory");
return (input.val() != "");
}
return true;
}
} }
}
}
}
});
$("#phoneGrid").kendoGrid({
dataSource: phoneDs,
pageable: false,
dataBound: function(e){ },
pageSize: 99999,
toolbar: [ {name: "create", text : "@LocalizationValues.Add"}],
columns: [
{ field: "Type", width: "130px", editor: typeDropDownEditor, title: "Type"},
{
field: "PhoneNumber", editor: phoneEditor, title: "PhoneNumber", format: "{0:n}", width: "250px" },
{ field: "PhoneExtension", title:"PhoneExtension", width: "150px", template: '@LocalizationValues.Ext: #: (PhoneExtension == null) ? "" : PhoneExtension#' },
{ command: [{ name : "edit", text: {
edit: "@LocalizationValues.Update",
update: "@LocalizationValues.Confirm",
cancel: "@LocalizationValues.Cancel"
}},
{ name : "destroy", text: "@LocalizationValues.Remove"}], title: " ", width: "250px"}],
editable: {mode : "inline", confirmation: false},
});
function typeDropDownEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Text",
dataValueField: "Value",
dataSource: @(New HtmlString(Json.Encode(Model.PhoneTypes)))
});
documentation for router change event says that navigation can be canceled with preventDefault
but i want to ask user before leaving current view if is ok to leave unsaved changes.
can be done using promises ?
Hello,
I have a grid with some cells having a value in multiple lines format. When I tried to export it, the export result set the cell height as a single line.
Is there a way to set the height to auto?
Cheers