How can I get selected or editing row on Js-Grid? - jsgrid

I want to get just editing row validating field value with another field on the.
Bu it doesn't work.
fields: [
{ name: "id", type: "text", align: "center", width: 10, editing: false, title:"ID"},
{ name: "total", type: "number", align: "center", width: 30, editing: false, title:"Total"},
{ name: "correct", type: "number", align: "center", width: 30,
validate: {validator: function(value, item) {
return value <= item.total;}, message: "Correct should be smaller or equal than Total"}
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
can you help?

I found some way like this:
var editing_row_field2;
....
onItemEditing: function(args) {
editing_row_field2= args.item.field2; },
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return editing_row_field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]

You can access other fields in current row using item argument from validator function
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return item.field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]

Related

Kendo grid returning only one record

I´ve been searching all over the net to find an answer to this problem but with no success, my problem is with my Kendo ui grid which is returning just one record. The funny thing is, i have another grids that are returning all the records correctly, so i simply using the same code but there´s got be a detail that is escaping me so i was hopping someone could point on that, this is the code i´m using (CRUD):
var dataSource = new kendo.data.DataSource({
transport:
{
read:
{
url: "data/clientes.php",
},
update:
{
url: "data/clientes.php?type=update",
type:"POST",
complete: function(e)
{
$("#gridClientes").data("kendoGrid").dataSource.read();
}
},
destroy:
{
url: "data/clientes.php?type=destroy",
type: "POST"
},
create:
{
url: "data/clientes.php?type=create",
type: "POST",
complete: function (e) {
$("#gridClientes").data("kendoGrid").dataSource.read();
}
},
parameterMap: function(options, operation)
{
if (operation !== "read" && options.models)
{
return {models: kendo.stringify(options.models)};
}
}
},
error:function(e)
{
console.log(e);
//alert(e.message);
},
batch: true,
pageSize: 8,
schema:
{
data: "data",
total: function(response)
{
return $(response.data).length;
},
model:
{
id: "idCliente",
fields:
{
idCliente: { editable: false, nullable: true, type: "number"},
titulo: { validation: { required: false } },
primeiroNome: { validation: { required: true } },
ultimoNome: { validation: { required: true } },
morada: { validation: { required: false } },
codigoPostal: { type: "string",validation: { required: false} },
cidade: { validation: { required: false } },
pais: { validation: { required: false } },
estado: { validation: { required: false } },
telefone: { type: "string", validation: { required: false, min: 1} },
email: { validation: { required: false } },
passaporte: { validation: { required: false } },
bi: { type: "number", validation: { required: false} },
foto: { type: "string", validation: { required: false} },
comentarios: { validation: { required: false } },
NomeUtilizadorCriador: {editable: true,validation: { required: false } },
DataCriacao: {editable: false, validation: { required: false } },
NomeUtilizadorUpdate: {editable: true, validation: { required: false } },
DataUpdate: {editable: false, validation: { required: false } },
}
}
}
});
$("#gridClientes").kendoGrid({
dataSource: dataSource,
height: 550,
serverPaging: true,
pageable : true,
toolbar:[{name: "create",text: $varGridQuartosBtnNovoPT},{name: "close",text: "X"}],
editable : {mode : "popup",
window : {title: "Editar",}
},
columns: [
{ field: "titulo", title: "Título", width: "8px", },
{ field: "primeiroNome", title: "Primeiro Nome", width: "14px" },
{ field: "ultimoNome", title: "Ultimo Nome", width: "14px" },
{ field: "morada", title: "Morada", width: "11px" },
{ field: "cidade", title: "Cidade", width: "11px" },
{ field: "codigoPostal", title: "CEP", width: "9px", editor:numberEditor },
{ field: "pais", title: "País", width: "14px" ,editor: paisEditor},
{ field: "estado", title: "Estado", width: "10px", hidden: true },
{ field: "telefone", title: "Telefone", width: "12px",editor:numberEditor},
{ field: "email", title: "Email", width: "17px" },
{ field: "passaporte", title: "Passaporte", width: "15px", hidden: true },
{ field: "bi", title: "Bi", width: "10px", hidden: true ,editor:numberEditor},
{ field: "foto", title: "Foto", hidden: true, editor:fotoEditor},
{ field: "comentarios", title: "Comentários", hidden: true, editor: textareaEditor},
{ field: "NomeUtilizadorCriador", title: "Criado por", hidden: true,editor:numberEditor},
{ field: "DataCriacao", title: "Criado em", hidden: true, width: "10px"},
{ field: "NomeUtilizadorUpdate", title: "Atualizado por", hidden: true, editor:numberEditor},
{ field: "DataUpdate", title: "Atualizado em", hidden: true, width: "10px"},
{command:[{ text: "Detalhes", click: showDetails },{ name: "edit",text:"Editar"},{ name: "destroy",text:"Apagar"}],title:" ",width: "30px"}],
});
If my database is empty and i insert just one record, then it returns that record correctly, but if i hit the new button to insert another record, it inserts in the database but the kendo grid returns/displays nothing, Meanwhile i have discovered a difference between this kendogrid and the others(that are working correctly) when i open the chrome console, this one returns two objects "data":
0: {,…}
data: {0: "70", 1: "", 2: "jonh", 3: "sousa", 4: "", 5: "", 6: "", 7: "", 8: "", 9: "", 10: "", 11: "",…}
1: {,…}
data: {0: "73", 1: "", 2: "joana", 3: "banana", 4: "", 5: "", 6: "", 7: "", 8: "", 9: "", 10: "", 11: "",…}
the other kendogrids, only return one object data, why? i do not know because i´m using the same code. I thought it could be something related with my .php file, but then if it was, it shouldn´t even insert one record right?.
I also have this error when i call the grid:
Object {xhr: Object, status: "parsererror", errorThrown: SyntaxError: Unexpected end of input, sender: ht.extend.init, _defaultPrevented: false…}
this error appears when my database is empty. If i have one record, then the erro disappears and as i said before the grid displays correctly, BUT the error returns if i insert another record.
Sorry for the long post, thanks for your time, any help would be very appreciated.
Regards

How to disable/hide/remove fields inside the kendo UI pop up editable for HTTP POST

I have this code for my schema:
schema: {
model: {
fields: {
col1: {
type: "string", editable: true, nullable: false,
validation:{ required: { message: "Name is Required." } }
},
col2: {
type: "string", editable: true, nullable: false,
validation:{ required: { message: "Please Select a Main Language." } }
},
col3:{
type: "Array[]", editable: true, nullable: false,
validation:{ required: { message: "Please Select Supported Language(s)." } }
},
col4: {
type: "string", editable: false, nullable: true
},
col5: {
type: "string", editable: false, nullable: true
}
}
}
}
Columns code snippet
{
field: "col4",
title: "Column4",
width:"200px",
editable:false,
nullable: true
},
{
field: "col5",
title: "Column5",
width:"200px",
editable:false,
nullable: true
}
I would like to disable the last two (status and unlocalized count). As you can see I have already used the editable and nullable. My goal is to send an HTTP post without the two which has this JSON format
{"col1":"string", "col2":"string","col3":["string"]}
UPDATE:
I used a editor that has a function.
function(container){
$('label[for=status]').parent().remove();
}
which looks like this now
{
field: "status",
title: "Status",
editable:false,
editor:function(container){
$('label[for=status]').parent().remove();
}
}
The Kendo way to do it would be to add field called Edit in the kendoGridSource like so:
edit: function (e) {
e.container.find('[for="none"]').parent().remove();
e.container.find('[data-container-for="none"]').remove();
},
In there you would look for the fields the that have for="none" and remove all of them, same would go for the container.
Then in your schema, The field you want to edit out:
{
field: "none",
title: "Column5",
width:"200px",
},

kendo ui model is always null in parameter map

Im using kendo ui grid and everything is working fine except for update. When i click on the reviewed column the field changes to a check box and i can edit it, and the update gets called but no data is passed in the put request. If i put a breakpoint in the parameter map function the model is null. Javascript code is below:
var selfPayDataSource = new kendo.data.DataSource({
serverFiltering: true, // <-- Do filtering server-side
serverPaging: true, // <-- Do paging server-side
serverSorting: true,
autoSync: true,
pageSize: 100,
batch:false,
//filter: generateDsFilter(),
type: 'odata', // <-- Include OData style params on query string.
sortable: {
mode: "multiple",
allowUnsort: true
},
pageable: {
refresh: true
},
schema: {
data: function (data) {
return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
},
total: function (data) {
return data["Count"]; // <-- The total items count is the data length.
},
model: {
id: "SelfPayId",
fields: {
resp_ind: { type: "string", editable: false },
cstsv_resolved: { type: "string", editable: false },
cstsv_rep: { type: "string", editable: false },
cstsv_comp_date: { type: "string", editable: false },
region: { type: "string", editable: false },
db: { type: "string", editable: false },
personid: { type: "string", editable: false },
legacyid: { type: "string", editable: false },
account__: { type: "string", editable: false },
deceased: { type: "string", editable: false },
patient_name: { type: "string", editable: false },
account_balance: { type: "number", editable: false },
pat_last_paid_date: { type: "date", editable: false },
pat_last_paid_amt: { type: "number", editable: false },
acct_stat: { type: "string", editable: false },
bill_type: { type: "string", editable: false },
acct_score: { type: "number", editable: false },
tu_status: { type: "string", editable: false },
scoring: { type: "number", editable: false },
coll_ltr: { type: "string", editable: false },
HighestPriPlan: { type: "string", editable: false },
HighestSecPlan: { type: "string", editable: false },
HighestTerPlan: { type: "string", editable: false },
Max_DOS_Aging_Group: { type: "string", editable: false },
Reviewed: { type: "boolean", editable: true },
Collector_Name: { type: "string", editable: false}
}
}
},
transport: {
read: {
url: "/api/SelfPayData/Get", // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
update: {
url: "/api/SelfPayData/PUT",
dataType: "json", // <-- The default was "jsonp"
contentType: "application/json; charset=utf-8",
type: "PUT"
},
parameterMap: function (data, operation) {
if (operation != "read") {
return JSON.stringify(data.models);
} else {
var paramMap = kendo.data.transports.odata.parameterMap(data);
var orderBy = paramMap.$orderby;
if (orderBy == undefined) {
orderBy = "account__";
}else {
orderBy = orderBy + ",account__";
}
paramMap.$orderby = orderBy;
var filter = paramMap.$filter;
if (filter == null || filter == '') {
delete paramMap.$filter;
}
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
}
}
});
$(function () {
$("#grid").kendoGrid({
sortable: true,
pageable: true,
scrollable: true,
resizable: true,
editable: true,
navigatable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [
{
field: "cstsv_resolved",
title: "Cstsv Resolved",
width: "5em",
filterable: true
},
{
field: "cstsv_rep",
title: "Cstsv Rep",
width: "8em",
filterable: true
},
{
field: "cstsv_comp_date",
title: "Cstsv Comp Date",
width: "6em",
filterable: true
},
{
field: "region",
title: "Region",
width: "5em",
filterable: true
},
{
field: "db",
title: "DB",
width: "4em",
filterable: true
},
{
field: "personid",
title: "Person ID",
width: "6em",
filterable: true
},
{
field: "legacyid",
title: "Legacy ID",
width: "6em",
filterable: true
},
{
field: "account__",
title: "Account #",
width: "6em",
filterable: true
},
{
field: "deceased",
title: "Deceased",
width: "5.2em",
filterable: true
},
{
field: "patient_name",
title: "Patient Name",
width: "6em",
filterable: true
},
{
field: "account_balance",
title: "Account Balance",
width: "5em",
filterable: true,
format: "{0:c2}"
},
{
field: "pat_last_paid_date",
title: "Pat Last Paid Date",
width: "6em",
format: "{0: MM-dd-yyyy}",
filterable: true
},
{
field: "pat_last_paid_amt",
title: "Pat Last Paid Amt",
width: "6em",
filterable: true,
format: "{0:c2}"
},
{
field: "acct_stat",
title: "Acct Stat",
width: "5em",
filterable: true
},
{
field: "bill_type",
title: "Bill Type",
width: "5em",
filterable: true
},
{
field: "acct_score",
title: "Acct Score",
width: "4em",
filterable: true
},
{
field: "tu_status",
title: "TU Status",
width: "6em",
filterable: true
},
{
field: "scoring",
title: "Scoring",
width: "4em",
filterable: true
},
{
field: "coll_ltr",
title: "Coll Ltr",
width: "5em",
filterable: true
},
{
field: "HighestPriPlan",
title: "Pri Plan",
width: "5em",
filterable: true
},
{
field: "HighestSecPlan",
title: "Sec Plan",
width: "5em",
filterable: true
},
{
field: "HighestTerPlan",
title: "Ter Plan",
width: "5em",
filterable: true
},
{
field: "Max_DOS_Aging_Group",
title: "DOS Aging Group",
width: "5em",
filterable: true
},
{
field: "Reviewed",
title: "Reviewed",
width: "10em",
filterable: true
},
{
field: "Collector_Name",
title: "Collector Name",
width: "10em",
filterable: true
}
],
dataSource: selfPayDataSource
});
});
The models field is available only when the batch option is set to true. This doesn't seem to be the case here. The model fields are exposed in the data parameter when batch is set to false.

How do I bind the results of an AJAX GET call to a Kendo Grid?

Refer to the comment inside the AJAX done function below:
$("<div/>").appendTo(e.detailCell).kendoGrid({
reorderable: true,
resizable: true,
dataSource: {
transport: {
read: function()
{
$.ajax({
url: "http://x/y/api/Awards/directors/" + e.data.AwardTitleId,
type: "GET"
}).done(function()
{
//I'm not sure what to do here in order to bind the data returned by the GET to the grid.
});
},
},
schema: {
model: {
id: "namefirstlast",
fields: {
"namefirstlast": { editable: true, type: "string" },
"directorsequence": { editable: true, type: "number", validation: { min: 1 } },
"isonballot": { editable: true, type: "boolean" },
"concatenation": { editable: true, type: "string" },
"MoreNames": { editable: true, type: "number", validation: { min: 0 } },
},
},
}
},
columns: [
{ field: "namefirstlast", title: "Name", editor: namesAutoComplete },
{ field: "directorsequence", title: "Director Sequence", format: "{0:n0}" },
{ field: "isonballot", title: "On ballot?" },
{ field: "concatenation", title: "Concatenation" },
{ field: "MoreNames", title: "More names?", format: "{0:n0}" },
{ command: ["edit"], title: " ", width: 100 }],
sortable: true,
sort: { field: "namefirstlast", dir: "desc" },
editable: "inline",
toolbar: [{ name: "create", text: "Add New Director/Recipient" }]
});
Figured it out:
detailRow.find(".directorsOrRecipients").data("kendoGrid").dataSource.read();
detailRow.find(".directorsOrRecipients").data("kendoGrid").refresh();

Is there a way to add a placeholder to a text field in KendoUI Grid?

I tried the following to add the placeholder attribute to the input field using the following code,
dataSource: {
...
schema: {
data: "storeEmployeeData",
total: "storeEmployeeDataCount",
model: {
id: "ID",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
**Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
}
}
},
...
}
Also tried the following,
columns: [
{ field: "FirstName", title: "First Name", type: "string", width: "150px" },
{ field: "MiddleName", title: "Middle Name", type: "string", width: "150px" },
{ field: "LastName", title: "Last Name", type: "string", width: "150px" },
{ field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.
This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?
Am I missing something? Any help is appreciated!
There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?
Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.
The placeholder attribute is only supported in IE 10 and above.
Update: (due to comments)
To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.
columns: [
{ field: "Email", title: "Email", width: 250, sortable: false,
editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.attr("placeholder", "(optional)");
input.appendTo(container);
}
}
]
If your looking for a place holder for when there are no records then,
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
noRecords: true,
dataSource: []
});
</script>
or
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
dataSource: {
data: [{name: "John", age: 29}],
page: 2,
pageSize: 10
}
});
</script>

Resources