Kendo-Grid column field validation - validation

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" }
}
}

Related

KendoGrid - Filtering on a property of object

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:

How to dynamically access the names of fields being queries in a GraphQL resolver?

I have two collections:
dbPosts
id: mongoose.Schema.Types.ObjectId,
title: { type: String },
content: { type: String },
excerpt: { type: String },
slug: { type: String },
author: {
id: { type: String },
fname: { type: String },
lname: { type: String },
}
dbAuthors
id: mongoose.Schema.Types.ObjectId,
fname: { type: String },
lname: { type: String },
posts: [
id: { type: String },
title: { type: String }
]
I resolve my author queries as follows:
Query: {
authors: (parent, root, args, context) => {
return dbAuthor.find({});
},
author: (root, args, context) => {
return dbAuthor.findById(args.id);
},
},
Author: {
posts: (parent) => {
if(parent.posts) {
return parent.posts;
} else {
return dbAuthor.find({'author.id': parent.id});
}
},
}
The reason I'm resolving thus is to optimize my MongoDB requests by denormalizing my relationships. Here's the objective:
If you need just a list of authors with the titles of their works, all necessary fields are right there in dbAuthors, so no need to look up dbPosts. But if you need more details on each post returned, say, excerpts or slug, you look up dbPosts for the following condition:
{'author.id': parent.id}
But the problem is, if your query looks like this:
authors(id: "3") {
fname
lname
posts {
title
excerpt
}
}
it breaks, because there's no excerpt field returned in the parent object. This problem could be easily fixed if there were some way I could determine what fields are being queried on an author's posts field and then decide if the values returned in parent would suffice. If not, I could then proceed to look up dbPosts with the author's id value. Is it possible? Because if not, it would defeat the whole purpose of denormalizing your collections, something Mongo strongly urges you to do!
It's rather denormalized - data is duplicated ;)
You're probably looking for info.fieldNodes

sortInfo does not work

I am trying to display data from table in sorted way. I want to display content ordered by creation date. I add sortInfo, but it does not work! I use angular ui-grid. Here is my code
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name'},
{ field: 'age'},
{ field: 'creationDate', cellFilter : "date:'yyyy-MM-dd'"}
],
sortInfo: {
fields: ['creationDate'],
directions:['desc']
}
};
Is it possible to set sort by default here? And how to do it?
I didn't found in ui-grid docs sortInfo option.
Your gridOptions is not set right. You need to add the sort property to your column definition like below, the priority is what makes it sort by default. Lower priority gets sorted first. Read more here http://ui-grid.info/docs/#/tutorial/102_sorting
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
field: 'name',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
}
}

How to have a numeric text box for editing a cell in a Kendo UI grid?

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.

KendoUI Grid Filtering Issues

I'm using the latest version of kendoui and whenever I use the "is not equal to" or "does not contain" filter I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined
I'm using a server side datasource, all the other filters seem to work without issue.
Also, how do I specify a datetimepicker for a date column?
I've looked at the documentation and tried using:
filterable: {
ui: "datetimepicker"
}
But it never shows the datetimepicker.
Here is the code:
var dataSourceArguments = {
pageSize:10,
serverPaging:true,
serverFiltering:true,
serverSorting:true,
transport:{
read:{
url:$("#grid_order").attr('data-url'),
dataType:"json"
}
},
schema:{
total:"count",
data:'fields'
},
sort:{'field':'order_date', dir:'desc'}
};
var ds2 = new kendo.data.DataSource(dataSourceArguments);
$("#grid_order").kendoGrid({
dataSource:ds2,
groupable:true,
scrollable:true,
sortable:true,
pageable:true,
columns:[
{
field:'order_date',
title:'Order Date',
width:150,
filterable: {
ui: "datetimepicker"
}
},
{
field:"reference",
title:'Reference',
width:120,
encoded:false
},
{
field:"client__company",
title:'Client',
encoded:false
},
{
field:"grand_total",
title:'Total',
width:100
},
{
field:'status',
title:'Status',
width:120,
encoded:false
},
{
field:'actions',
width:200,
title:'Actions',
filterable:false,
encoded:false,
sortable:false
}
],
filterable:true
});
UPDATE: I managed to get the datepicker working however whenever I choose the date, and click filter it filters but the date I've chosen dissapears from the field.
Add the order_date to the scheme from the data source, and the data type of the field to date.
See http://docs.kendoui.com/api/framework/datasource

Resources