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.
Related
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/
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
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.
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.
I am new to ExtJs and I am using ExtJs4.
Now As shown in below image, There is one textfield named keywords, What I want to do is When I click on the button it will pass data of textfield to servlet and display resulted record in grid.
Now I have no idea how to do this. I am receiving JSON data response from servlet but don't know how to reload the store and refresh the grid.
Below is code for my store and grid.
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
};
}
});
You could use:
{
xtype: 'button',
text: 'Search',
handler: function() {
store.clearFilter(); //clear previous search value
var searchValue = Ext.getCmp("textFieldId").getValue(); //get new value
store.load().filter('jsonGridFielName', searchValue); //load filtered data
}
}
And for for multiple textfield search:
//FILTERS
var searchValue1 = Ext.getCmp("textFieldId1").getValue(); //value1
var searchValue2 = Ext.getCmp("textFieldId2").getValue(); //value2
var noValue = "0000xxxx"; //no Value, for empty field, use value that you are sure it is not going to be searched!!!
var clear = store.clearFilter(); //shortcut
if (!searchValue1 && !searchValue2) {
clear;
store.load().filter("jsonGridFielName1", noValue);
} else if (searchValue1) {
clear;
store.load().filter('jsonGridFielName1', searchValue1);
//...else if(searchValue n...)...
} else {
clear;
store.load().filter('jsonGridFielName2', searchValue2);
}
ezdigrid.js
// Data store for grid start
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'GET',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
//id:'ms',
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Ezdi.Grid.superclass.initComponent.apply(this, arguments);
// load the store at the latest possible moment
this.on({
afterlayout: {
scope: this,
single: true,
fn: function() {
this.store.load({
params: {
start: 0,
limit: 30
}
});
}
}
});
} // eo function initComponent
});
demo.html
//handler for button click event
fbar: [{
xtype: 'button',
text: 'Search',
handler: function() {
var value = Ext.getCmp('_keyword').getValue(); //_keyword is textField
gridDataStore.load().filter('keywords', value);
}
}]
MyServlet
keyword = request.getParameter("keywords");
//code for quesry processing
Use extraParams in your model.
extraParams: {
keywords: 'your-value'
}
Put following code in your button click handler.
gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();