Kendo Grid PopUp Editor Will Not Close - grid

I have a basic grid with
editable: "popup"
I have a command column with "edit" in it. I am using a remote data source with read, update, create and destroy defined. The grid works, and when I click Edit, the popup window appears with all my fields in it. If I enter some changes in the fields and click Update, the data gets submitted (I can see the ajax post) but the popup window does not close.
My Update button has these classes "k-button k-button-icontext k-grid-update".
My popup window has these classes "k-widget k-window".
The Cancel button closes the window and the X in upper right closes the window too.
Any ideas?
My datasource code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "myReadURL",
dataType: "json"
},
update: {
url: "myUpdateURL",
dataType: "json"
},
create: {
url: "myCreateURL",
dataType: "json"
},
destroy: {
url: "myDestroyURL",
dataType: "json"
}
},
schema: {
data: "data",
total: function(response){return $(response.data).length;},
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
location: { type: "string" },
username: { type: "string" },
host: { type: "string" },
model: { type: "string" },
newhost: { type: "string" },
newserial: { type: "string" },
newassettag: { type: "string" },
complete: { type: "boolean" }
}
}
},
pageSize: 10
});
My Grid init code:
$("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
filterable: true,
sortable: true,
resizable: true,
scrollable: true,
pageable: {
refresh: true,
pageSizes: [10,20,100]
},
columns: [{
hidden: true,
field:"id"
},{
command: "edit",
title: " ",
width: 90
},{
field: "location",
title: "Location",
width: 120,
filterable: {ui: cityFilter}
},{
field: "username",
title: "Username",
width: 120
},{
field: "host",
title: "Host",
width: 180
},{
field: "model",
title: "Model",
width: 180
},{
field: "newhost",
title: "New Host",
width: 180
},{
field: "newserial",
title: "New Serial",
width: 180
},{
field: "newassettag",
title: "New Asset",
width: 180
},{
field: "complete",
title: "Complete",
template: "<input type='checkbox' # if(complete){ # checked #} #/>",
width: 70
}
],
editable: "popup"
});
My html:
<div id="example" class="k-content">
<div id="grid" style="height: 380px"></div>
</div>

Your service needs to return a valid JSON document, even if it is empty. If your service does not respond anything or returns something not parseable as JSON, then it will not close the popup.
For example: Create a file called myUpdateURL that simply contains:
{}
and it should work.

Related

DevExpress GridView - Custom filter function for a cell/column

How to define a custom filter-function for a column or cell? Just as an example, assume we have a text value and in the header there is a search input
How to tell the gridview to call a function
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
And I would expect to use it like this:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
But the GridView doesn't support customFilter method, and nothing similar. Do you know how to achieve such custom filtering in devexpress, looks very simple but I'm struggling with this for hours. Thank you in advance.
This example shows how to filter data using the filter panel. You can use its check box to enable/disable the current filter expression, and clicking on this expression opens the integrated filter builder. Note that changes made in it are reflected in the filter row and header filter, and vice versa, from (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), Please see this:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
Also see this: https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
Also refer to this link(dxDataGrid - How to implement a custom filter for a date field):
https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
For the demo from DevExtreme, see this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/

Kendo grid displaying multiple page

This is my code for kendo the page is displaying multiple time given in
i tried every this but its still not working please suggest me what to do to solve this problem. picture.And validation message is also not showing its validation but not displaying message
$(document).ready(function() {
$("#production-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductAttributeList", "Production"))",
type: "POST",
dataType: "json",
contentType: "application/json"
},
create: {
url: "#Html.Raw(Url.Action("SettingAdd", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
update: {
url: "#Html.Raw(Url.Action("SettingUpdate", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
destroy: {
url: "#Html.Raw(Url.Action("SettingDelete", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
parameterMap: function(data, operation) {
if (operation != "read") {
return data;
} else {
//for some reasons only such "Filter" data be parsed
return JSON.stringify(data);
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Image: { editable: false, type: "string" },
IteamId: { editable: false, type: "number" },
ProductId: { editable: false, type: "number" },
UserName: { editable: false, type: "string" },
FoundInProductName: { false: true, type: "string" },
FoundInProductDescription: { editable: false, type: "string" },
TaggedKeyword: { editable: false, type: "string" },
TaggedComment: { editable: false, type: "string" },
AttributeName: { editable: true, type: "string" },
Comment: { editable: true, type: "string" },
ShelfID: { editable: true, type: "string" },
ShelfName: { editable: true, type: "string" },
ProductType: { editable: true, type: "string",
validation: { required: true , message: "Product Type is required" } } ,
Remark: { editable: true, type: "string" },
Id: { editable: false, type: "number" }
}
}
},
requestEnd: function(e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes:[ 50, 100, 150, 200, 250]
},
scrollable: true,
editable: true,
columns: [
{
field: "Id",
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50
},{
field: "Image",
title: "Image",
width: 300
},{
field: "IteamId",
title: "IteamId",
width: 300
},
{
field: "ProductId",
title: "ProductId",
width: 300
}, {
field: "UserName",
title: "UserName",
width: 300
}, {
field: "FoundInProductName",
title: "Keyword found(PN)",
width: 300
}, {
field: "FoundInProductDescription",
title: "Keyword found(PD)",
width: 300
}, {
field: "TaggedKeyword",
title: "Tagged Keyword",
width: 300
}, {
field: "TaggedComment",
title: "Tagged Comment",
width: 300
},
{
field: "AttributeName",
title: "Attribute Name(the attribute which is worked upon- E.g. Color)",
width: 300
},
{
field: "Comment",
title: "Comment",
editor: CommentTypeDropDownEditor,
template: "#:Comment#",
width: 300
},
{
field: "ShelfID",
title: "Suggested Shelf ID",
width: 300
},
{
field: "ShelfName",
title: "Suggested Shelf Name",
width: 300
},
{
field: "ProductType",
title: "Product Type",
width: 300
},
{
field: "Remark",
title: "Remarks (Free Text)",
width: 300
}
]
});
i can able to fingure out what the issue and validation message is also not displaying

After edit of Grid cell, the value is overlapped with a zero

When I edit a cell in my grid, a zero ("0") is placed in the cell, overlapping the cell value. This zero does not show when the grid loads, and it does not save to the database when the update happens. If I navigate away and come back, the zero is gone. It only happens if I edit the cell; if I only click in the cell and initiate the inline editing, no zero appears. This happens in every cell, even the dates.
My page is an SPA.
This is the code that builds the grid:
function fnLoadStorageVaults(storageid) {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: URL_GETVAULTS,
dataType: "json",
type: "GET",
data: { StorageID: storageid }
},
update: { dataType: "json", url: URL_UPDATEVAULTS, type: "POST" },
destroy: { url: URL_DELETEVAULT, type: "POST" },
create: { url: URL_INSERTVAULT, type: "POST" },
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
autoSync: true,
schema: {
model: {
id: "StorageVaultID",
fields: {
VaultNumber: { type: "string", editable: true },
Section: { type: "string", editable: true },
Row: { type: "string", editable: true },
DateFrom: { type: "date", editable: true },
DateTo: { type: "date", editable: true },
WarehouseID: { type: "number", editable: true }
}
}
}
});
$("#VaultGrid").kendoGrid({
dataSource: ds
, sortable: true
, editable: true
, navigable: true
, columns: [
{ field: "WarehouseID", title: "Warehouse", width: "60px" }
,{ field: "VaultNumber", title: "Vault Nbr.", width: "60px" }
, { field: "Section", title: "Section" }
, { field: "Row", title: "Row" }
, { field: "DateFrom", title: "Date In" }
, { field: "DateTo", title: "Date Out" }
]
});
}
My apologies, the update was not working after all. The zero was the response from the server. Still curious behavior though.

Having some trouble reading JSON response

I make an ajax request to the servlet that returns the result of a database query.
I can see with firebug the response and I want to put these results in a list (or other..) that I have already created.
I tried to read this post but it didn't help me..
Code:
this is the ajax request:
Ext.Ajax.request({
url: '/VIProject/Container',
success: function (action){alert('Lista caricata!'); console.debug(action); },
failure: function (){alert('Errore nel caricamento...');},
headers: {
'my-header': 'foo'
},
params: { action: "GETCONTAINERLIST" }
});
response from servlet(firebug):
{"message":"OK","container":[{"idOrdine":"1","numLotto":"123"},{"idOrdine":"2","numLotto":"321"},{"idOrdine":"3","numLotto":"876"}],"success":true}
list:
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: //???
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});
How can I do?
I've modified your code to use a store:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['idOrdine', 'numLotto']
})
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: store: {
model: MyModel,
autoLoad: true,
proxy: {
type: 'ajax',
url: '/VIProject/Container',
reader: {
type: 'json',
root: 'container'
}
}
},
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});
Even in this way it works:
var proxy=new Ext.data.HttpProxy({url:'/VIProject/Container'});
var reader=new Ext.data.JsonReader({},[
{name: 'idOrdine', mapping: 'idOrdine'},
{name: 'numLotto', mapping: 'numLotto'}
]);
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});
store.load();
I tried in every way.. but i don't know what to do!

kendogrid batch edit appending row causes to post data

This code populates datagrid with json formated data received from /api/notes/ by tornado app...
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
pageSize: 10,
autoSync: true,
transport: {
read: {
url: '/api/notes/',
dataType: 'json',
type: 'GET'
},
create: {
url: '/api/notes/',
dataType: 'json',
type: 'POST'
},
update: {
url: '/api/notes/',
dataType: 'json',
type: 'PUT'
}
},
schema: {
data: function(reply) { return reply.rows; },
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
author: { type: "string" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
editable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: 150 },
{ field: "name", title: "Book", width: 150 },
{ field: "author", title: "Author", width: 100 },
{ command: "destroy", title: " ", width: 110 }
],
});
});
if I click create instead of popping up a row, like here a post triggered with empty data parameter, what's wrong here
Try it with autoSync removed or set to false on the DataSource. According to the docs:
Enables (true) or disables (false) the automatic invocation of the sync() method for each change made.
So I think when you try to insert the row, it immediately puts it into the DataSource, causing it to do a sync(). The demo you linked to doesn't specify autoSync either.

Resources