I have a normal WCF service where there is a product that belongs to a department.
The URL to get a department of a given product would look like this:
http://localhost:49168/RapDataService.svc/Products(1000)/Department/Name
Using Razor I can have the foreignkey column that does what I want, but I can't find the syntax for JavaScript. I would assume something like this:
columns: [
{
field: "Department#Name",
filterable: false
},
But I can't find the correct syntax anywhere.
Found answer, just have to expand the datasource
type: "odata",
transport: {
read: {
url: "http://localhost:49168/RapDataService.svc/Products",
data: { $expand: "Department"}
}
},
And then the syntax I was looking for was the dot.
{
field: "Department.Name",
title: "Afdeling",
filterable: true
},
Related
here is my KendoGrid :
$scope.gridEltCompoOptions = {
dataSource: {
transport: {
...
},
schema: {
model: {
id: 'IdElement',
fields: {
GroupeActes: { defaultValue: { IdGroupeActes: null, Libelle: ' ' } }
}
}
}
},
sortable: true,
resizable: true,
filterable: {
mode: 'row'
},
columns: [{
field: 'GroupeActes',
title: "Groupe d'actes",
template: function (dataItem) {
return kendo.toString(dataItem.GroupeActes.Libelle);
}
}, ]
I want to filter my field 'GroupeActes' on the property Libelle (GroupeActes is an object), but actually the filter take the entire object.
When i try to filter, i have a Js Error
Uncaught TypeError: (d.GroupeActes || "").toLowerCase is not a function
The problem is clear, the filter is taking the entiere object, not the property Libelle.
i passed the last 4 hours to try all the solutions i found on google but nothing is working
my object GroupeActes is like this :
var GroupeActes = {
GroupeActes : {
Libelle : ""
}
}
there is two groupeActes level
I saw a post in 2015 of an Admin, saying this kind of filter isn't possible,
but i saw also this kind of solution :
https://docs.telerik.com/kendo-ui/knowledge-base/grid-filter-column-with-dropdownlist
(if(e.field == "Category" && e.filter !== null){) in the example
i tried to do something like : if field == "groupeActes" => so i want to filter on Libelle properties,
but i didn't success
Can someone help me please ?
thank you so much
Have you looked at this article: https://docs.telerik.com/kendo-ui/knowledge-base/enable-operations-for-object-column
I believe you can accomplish what you want by setting the column field to "GroupeActes.Libelle" instead of using a column template:
columns: [
{
field: 'GroupeActes.Libelle',
title: "Groupe d'actes",
},
],
See this DEMO:
in this below example (Please open jsfiddle link) i was unable to filter the first column with both first name and last name. I can only filter with first name can anyone help on this please.
http://jsfiddle.net/Sbb5Z/1927/
In order to make the filter working you have to either:
Make it a column in your datasource (for ex. FullName):http://jsfiddle.net/n6sso6s3/
Write a custom filter like:
filter: {
logic: "or",
filters: [{
field: "FirstName",
operator: "eq",
value: e.data.FirstName
},
{
field: "LastName",
operator: "eq",
value: e.data.LastName
}]
}
Or add a fullName() function to your model like :http://jsbin.com/haxawupiye/edit?html,js,output
I am working on populating kendo--grid with APIs data but on adding validation on one field is automatically working for every other fields too.
Here is schema inside kendo-dataSource :
schema: {
model: {
id : "id",
fields: {
id: { editable: false, type: 'number'},
name: { editable: true, type : "string" },
unique_url: { editable: true , type: 'string'},
image_url : { editable: true, type : "string" },
title: {type : "string", validation: {
required: true,
validateTitle: function (input) {
console.log("I am inside validation",input.val());
if (input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
return true;
}
}
},
body: { editable: true, type : "string",validation: { max: 90, required: true, message : "Maximum characters should be 90"} },
adaccount_id: { editable: false, type: 'number'}
}
}
},
Here I have added validation for title field but its getting called for others fields too.
I am adding one snapshot of validation---
Please help me to find errors in it.
There isn't really any error in your code, but more like an error in Kendo Grid's validation design. Even though you specify the validation function only in the title field, it will run the validation globally for any input field that you edit.
In validateTitle you need to filter which input you want the validating function to run on. Something like this:
if (input.is("[name='title']") && input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
If you need a live working demo, you can always refer to Telerik's online demos that are editable, very handy for playing around with things. Here's the demo for custom validation where they similarly have to filter the input for the field name.
you want simply required field validation means just add your view model property attributes
[Required(ErrorMessage ="CountryCode is Mandatory")]
public virtual string CountryCode
{
get;
set;
}
We can easily set the maximum length using this code,It will not allow user to enter more characters than the specified one
model: {
id: "CLASSID",
fields: {
CLASSID: { type: "number" },
CLSNAME: { type: "string" },
CLSFLAG: {
type: "string", validation: {
required: true,maxlength:"3"
}
},
CLSSTATUS: { type: "boolean" }
}
}
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
Looking at the Kendo UI grid demos (ASP.NET MVC CSHTML flavor), when editing a cell that is bound to an numeric value, the input becomes a numerictextbox, but I can't seem to reproduce that behavior (on my side in stays a plain input). There must be something that assigns it the data-role attribute or something, but what is it ?
Thanks,
In order to use the model binding and have Kendo automatically assign the respective control, you need to setup a MVC editor template (http://coding-in.net/asp-net-mvc-3-how-to-use-editortemplates/) , i.e. Views/Shared/EditorTemplates. e.g. to render a Kendo NumericTextBox, create an editor template along these lines:
#model int
#(Html.Kendo().NumericTextBox())
Define the field type as numeric in the schema.
Example: Check UnitPrice or UnitsInStock
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
Kendo provides some templates under shared/EditorTemplates => here is Integer.cshtml template is ther. we can use that to show numeric value in a column. We need to set the EditorTemplateName property on column of the Grid.
EditorTemplateName("Integer") on column.Bound for that column.