How can we hide zero value from text box if field type is number in kendo-ui? - kendo-ui

I have a field with Project Code and type as a number but while rendering in the browser it shows default value as 0. So how should I hide or remove zero?
I am new to Kendo-UI. So I am not getting any idea.
schema: {
data: "data", total: "total",
model: {
id: "id",
fields: {
SBU: { type: "string" },
Project_Code: { type: "number" },
Role: { type: "string" },
IPM_Oracle_UserID: { type: "string" },
IQ_LoginID: { type: "string" }
}
}
}
Here in the above coa de, there is "Project_Code" field which has type as number but on browser the default value it render is zero. So, how to hide/remove default value zero for "Project_Code" field.

I found the answer after some searching.Just you need add nullable as true. Please find below re-framed code of mine.
schema: {
data: "data", total: "total",
model: {
id: "id",
fields: {
SBU: { type: "string" },
Project_Code: { type: "number", nullable: true },
Role: { type: "string" },
IPM_Oracle_UserID: { type: "string" },
IQ_LoginID: { type: "string" }
}
}
}

Related

Nested type without referencing another schema in Mongoosastic

I want to give a nested field the elastic mapping type "nested" by using Mongoosastic. I also want to specify the es_type of the fields in the nested field.
My schema looks like this:
const CarOwner = new Schema({
cars: [{
name: {
type: String,
es_indexed: true,
},
price: {
type: Number,
es_indexed: true,
es_type: 'float'
},
}],
});
I want this ElasticSearch mapping:
{
"mappings": {
"carowner": {
"properties": {
"cars": {
"type": "nested",
"properties": {
"name": { "type": "text" },
"price": { "type": "float" },
}
}
}
}
}
}
The only Mongoosastic examples I've found looks like this:
var Car = new Schema({
name: {
type: String,
es_indexed: true,
},
price: {
type: Number,
es_indexed: true,
es_type: 'float'
},
})
var CarOwner = new Schema({
cars: {
type:[Car],
es_indexed: true,
es_type: 'nested',
es_include_in_parent: true
}
})
Do I have to create a subschema or is there any way I could use Mongoosastic to create the mapping I want?

Kendo UI Inline Grid

I am having an issue with validation on certain fields. I want to only validate on a couple of fields, and the other fields should not validate. In my Email field, I am firing a function to check proper formatting, but the other fields are simply set to validate. Any help would be greatly appreciated.
model: {
id: "UserID",
fields: {
UserID: { editable: false },
CompanyID: { editable: false },
FirstName: { type: "string", validation: { required: { message: "Name is required"} } },
LastName: { type: "string", validation: { required: { message: "Name is required" } } },
Email: {
type: "string",
validation: {
required: { message: "Email is required." },
validateEmailFormat: function(input) {
if (input.attr("data-bind") == "value:Email") {
input.attr("data-validateEmailFormat-msg", "Email format invalid.");
return checkEmail(input.val());
}
return true;
}
}
},
PhoneNumber: { type: "string" },
Extension: { type: "string" }
}
}
With this code, all fields are being validated when trying to save/update. I don't want Extension or PhoneNumber to validate.
In your update/Save action, You can remove your fields from the ModelState which don't want to valid, like :
ModelState.Remove("PhoneNumber");
ModelState.Remove("Extension");

Kendo Grid Serverside Paging, Incorrect Parameter Map values

I'm trying to use the Dynamic Linq Helper libraries from Kendo. The parameter map function on the grid does not have the correct parameters to send to the controller.
The parameterMap options have:
{"take":10,"skip":0,"page":1,"pageSize":10}
but according to the example, it should have take, skip, sort, filter, which is not in the parameterMap function or getting passed to the server.
I'm following the example here
http://www.telerik.com/blogs/kendo-ui-open-sources-dynamic-linq-helpers
And also looked other examples, my grid is set up the same as the others.
The only difference being, this is a Web API single page app, not MVC. However, this shouldn't make a difference in what the Grid class is passing to it's parameterMap function.
What is going on here?
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost/biahost/query/projectStatuses",
dataType: "application/json",
type: "POST",
contentType: "application/json; charset=utf-8"
//data:{}
},
parameterMap: function (options) {
debugger;
//options only contain {"take":10,"skip":0,"page":1,"pageSize":10}
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
NAME: { type: "string" },
CODE: { type: "string" },
STATUS: { type: "string" },
COMMENTS: { type: "string" },
INSERTS: { type: "string" },
UPDATES: { type: "string" },
TOTAL_UPDATES: { type: "string" },
LAST_ACTION_DATE: { type: "string" }
//UnitId: { type: "string" },
//UnitName: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: projectStatusColumns
});
var projectStatusColumns = [
{
field: 'NAME',
label: 'Res name',
hidden: true,
},
{
field: 'CODE',
label: 'Code'
},
{
field: 'STATUS',
label: 'Status'
},
{
field: 'COMMENTS',
label: 'Comments'
}
,
{
field: 'INSERTS',
label: 'Inserts'
}
,
{
field: 'UPDATES',
label: 'Updates'
}
,
{
field: 'TOTAL_UPDATES',
label: 'Total Updates'
}
,
{
field: 'LAST_ACTION_DATE',
label: 'Last Action Date'
}
];
had the same problem so i looked it up and here i am. You just need to return "options" which contains the parameter map as it is, if you stringify it will become a json object which cannot be defined in a url.
Hope i'm not too late!

How to allow kendo grid to bind to an undefined field

I have this json object
{
id: string,
name: string,
category: {
id: string
name: string,
}
}
I want to have column that bind to productCategory.name. However that field is nullable. When productCategory is null/undefined, kendo will throw error. How can i tell kendo that if field is undefined, just show empty string?
EDIT
Below is my sample data
[{
"id":1,
"name":"Spaghetti",
"category":{
"id":"1",
"name":"Food"
}},
{
"id":2,
"name":"Coca-cola",
"category":null
}}]
Below is my kendo datasource
var kendoDataSource = new kendo.data.DataSource({
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
"category.name": { type: "string" }
}
}
}
});
Data above will throw "undefined" error, because second product does not have category.
Try using empty object instead of null
created a fiddle,check this:
http://jsfiddle.net/Sowjanya51/h930jcru/
Just provide a default value in your model like this:
var kendoDataSource = new kendo.data.DataSource({
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
"category.name": { type: "string" },
category: { defaultValue: {
id: "",
name: "",
}
}
}
}
}
});
This will initialize productCategory if it is null or undefined.

Detecting server-side error when editing or creating Kendo Grid entries

I have an editable Kendo Grid to manage (create/modify) user accounts. Editing is done in a popup (versus inline or batch). I have client-side validation to help ensure that valid data is provided to the server, however I cannot figure out how to handle the response from the server in the event that the create/update fails server-side. I'm not talking 'failed' as in the request failed with a HTTP 404 or 500, for example; I'm talking failed as in the script on the server didn't like something about the data and refuses to oblige.
Can someone please show me how I can accomplish this? What I would like to be able to do is after the update is sent to the server, wait for the response. If the response says everything is OK, then great. If the response says something didn't go so well, I'd like to be able to (A) keep the popup editing window open and populated and (B) provide feedback to the user regarding the reason for the rejection. The data should not be committed to the grid unless the response says everything is OK. Likewise, the edit popup should remain open until the server says OK.
I'm flexible with how the server's response should be formatted, as long as I can accomplish what I want.
Before you direct me to the Kendo official API documentation, I am already well aware of it and refer to it daily. However, to say the least, it is incomplete and I cannot find anything relating to this topic. If you have found something in the documentation that you think could help me then by all means point me to the documentation =)
As requested, below is the code I have for creating the grid.
$("#kendo_user_grid").kendoGrid({
columns: [{
title: "Last name",
field: "lName"
},{
title: "First name",
field: "fName"
},{
title: "Business unit",
field: "businessUnit"
},{
title: "Username",
field: "loginId"
},{
title: "Email address",
field: "email"
},{
title: "Phone",
field: "phone"
},{
title: "Address",
field: "address"
},{
title: "City",
field: "city"
},{
title: "State",
field: "state"
},{
title: "Zip code",
field: "zipcode"
},{
title: "Country",
field: "country"
},{
title: "Time zone",
field: "timezone"
},{
title: "Privileges",
field: "privs"
},{
command: ["edit","destroy"],
title: " "
}],
scrollable: false,
dataSource: {
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
update: {
url: "manageUsers.phtml",
data: { mode: "update" },
type: "POST"
},
destroy: {
url: "manageUsers.phtml",
data: { mode: "destroy" },
type: "POST"
},
create: {
url: "manageUsers.phtml",
data: { mode: "create" },
type: "POST"
},
batch: false
},
schema: {
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
businessUnit: { type: "string", editable: true, validation: { required: true } },
loginId: { type: "string", validation: { required: true } },
email: { type: "string", validation: { required: true } },
phone: { type: "string" },
address: { type: "string" },
city: { type: "string" },
state: { type: "string" },
zipcode: { type: "string" },
country: { type: "string" },
timezone: { type: "string" },
privs: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: true,
sortable: true,
pageable: true,
editable: {
mode: "popup",
template: kendo.template($("#kendo_edit_user_template").html())
},
toolbar: ["create","save","cancel"]
});
There are two point to keep in mind:
Schema.errors The field from the server response which contains server-side errors.
error is an event that will be fired if there was an error.
Basically you need to:
add to your schema an errors definition that provides access to the status sent back from the server.
Implement error event handler that, for example, restore previous value.
If your server returns the error message in a field called myError then you would have something like:
schema: {
errors: "myError",
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
or:
schema: {
errors: function(response) {
if (response.myError && response.myError !== "OK") {
return response.myError;
}
return false;
},
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
and the event would be:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will cancel any change done
this.cancelChanges();
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
EDIT : If what you want is to keep the popup open you should do:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will keep the popup open
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind
});
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
Where I bind to databinding event just once using jQuery.one

Resources