I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing
Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here
Related
I'm looking at this template to build a web application: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = [];
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the server to retrieve data
$scope.getTestData = () => {
$scope.testData.length = 0;
result.forEach(e => {
$scope.testData.push(e);
);
$scope.pivotGridDataSource.reload();
}
$scope.getTestData();
The problem is that when the data are loaded, in the Fields below it shows just the fields written at the beginning (so the name, the count and the country). But I saw in the demo that it should be display ALL parameters of the object.
For example, if the object is so structured:
{ "name": "Test1", "country": "Germany", "creationDate": "xxx", "surname": "yyy" }
So, I expect that in the fields there should be ALL parameters, so name, country, creationDate, surname. So, I did this at the beginning:
I changed $scope.testData = [] into:
$scope.testData = [{ "name": "", "country": "", "creationDate": "", "surname": "" }]
so the component will preparare all fields. And this works. But what if the server gives me back an Object that has another parameters? How can I display them?
I tried so after the calling and before the reload():
let fields = $scope.pivotGridDataSource.fields();
let newField = {
llowExpandAll: false,
allowFiltering: true,
allowSorting: true,
allowSortingBySummary: true,
caption: "This is a new field",
dataField: "newField",
dataType: "string",
displayFolder: "",
index: fields.length
}
$scope.pivotGridDataSource.fields().push(newField);
$scope.pivotGridDataSource.reload();
But it doesn't work yet. Worse, it does not even initialize the Pivot.
The fieldChooser uses the store fields, in this case $scope.testData fields, in your code I see your store is first declared (as null or with some format as you described) and then you have a function to fill it.
I don't know how your code looks and why you create your store that way, but that is basically your problem (the flow).
In the sample code the flow is:
Store with data (static in this case)
PivotGridDataSource
FieldChooser
In your code the flow is:
Store (empty)
PivotGridDataSource
FieldChooser
Store (fill) --> at this point your FieldChooser has been initialized with the fields of the empty version of your store so not much to do (in Jquery you could re-create your object, you dan do it using Jquery within AngularJs see a simple code sample here and below)
$('#chartContainer').dxChart('instance').dispose();
$('#chartContainer').dxPieChart({
...
});
To avoid all of this you can just use the DevExpress.data.CustomStore and your flow will be basically identical to the demo.
I have one column in kendo grid but if i'm filtering opposite the server API i need to filter against two values.
It means something like this:
{
"entityName": "client",
"data": {
"take": 10,
"skip": 0,
"page": 1,
"pageSize": 10,
"filter": {
"logic": "and",
// IN FILTER IS IMPORTANT TO HAVE 2 OBJECTS
"filters": [
{
"operator": "eq",
"value": "test",
"field": "client.name"
},
{
"operator": "eq",
"value": "test",
"field": "client.surname"
}
]
},
"group": []
}
}
I tried it by this way:
filterable : {
cell :
[
{
dataTextField : "client.name",
operator : "contains"
},
{
dataTextField : "client.surname",
operator : "contains"
}
]
}
But without luck.
How can i do it please?
Many thanks for any advice.
In order to do this, you'll have to intercept the dataSource data request and change the filter inside the readOptions before it get to the server. You'll have to create a custom transport.read and each time the dataSource will request some data, it will pass the readOptions parameter to that function.
myGrid.kendoGrid({
dataSource: {
serverFiltering: true,
transport: {
read: function (readOptions) {
readOptions.filter.filters = [{
operator: "eq",
value: "test",
field: "client.name"
}, {
operator: "eq",
value: "test",
field: "client.surname"
}];
//Insert you logic to retrieve the data from the server
//You may also try to call the dataSource original read function and pass the modified readOptions
//The ajax is just an example...
$.ajax({data: readOptions}).done(function(data){
readOptions.success(data);
});
}
}
}
Remember that if you overwrite the read function, you are responsible to call the readOptions success / error function to notify the dataSource about the data callback.
I have a Nested View bound to a Tree Store.
If I use static data within the store, the view gets populated with this data.
But, If I try to load the store via ajax proxy (JSON), I can see that the store has got the data but the view does not populate this data !
I have been stuck on this for days now. Help !
Tree Store
Ext.define('MyApp.store.CategoriesNested', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.CategoriesNested',
defaultRootProperty: 'data',
autoLoad: true,
autoSync: true,
data:[{
"category_id": 1,
"text": 'Clothing',
"data":[{
"category_id": 11,
"text": 'Tops and Tees',
"leaf":true,
}]
}, {
"category_id": 2,
"text": 'Footwear',
"data":[{
"category_id": 22,
"text": 'Casual Shoes',
"leaf":true,
},{
"category_id": 23,
"text": 'Sports Shirts',
"leaf":true,
}]
}],
}
});
The above works fine. But if i try to load from JSON, this populates the store (inspected the store using chrome web inspector). But the view does not reflect this !
Ext.define('MyApp.store.CategoriesNested', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.CategoriesNested',
autoLoad: true,
autoSync: true,
proxy:{
type: 'ajax',
url:'categories.json',
reader:{
type: 'json',
rootProperty: 'data'
}
}
}
});
categories.json
{
"data": [{
"category_id": 1,
"text": 'Clothing',
"data":[{
"category_id": 11,
"text": 'Tops and Tees',
"leaf":true,
}]
}, {
"category_id": 2,
"text": 'Footwear',
"data":[{
"category_id": 22,
"text": 'Casual Shoes',
"leaf":true,
},{
"category_id": 23,
"text": 'Sports Shirts',
"leaf":true,
}]
}]
}
What am i doing wrong ?
EDIT
Ok, I realize that if this Nested List is set directly on the viewport, then it shows the data.
But , currently the structure is like this:
Viewport > Tab Panel > Navigation View > Panel > Nested List
Again, the nestedlist shows data when I hardcode the data within the store. But when i read from JSON, it does not show the data. BUT, if I try to set the view directly on the viewport, then the data is shown !
Why does this happen ?
OK solved it. I applied the config
layout: 'fit'
for the parent panels. This worked.
Im reading values from a javascript file. Im trying to bind a particular field into a kendo dropdown. i'm able to read the values but i could't assign them in the kendo dropdownlist.
var json = [
{
"Type": "ABC",
"Icon": "Ro.png"
}
},
{
"Type": "DEF",
"Icon": "Po.png",
}
}];
HTML :
<select id="ListCurrencyDiv" class="testdiv"> </select>
Function:
function BindValue() {
$(".testdiv").kendoDropDownList({
dataSource: {
transport: {
read: function (BindValue) {
operation.success(json);
}
}
},
dataTextField: "Type",
dataValueField: "Type",
value: "No notification"
});}BindValue();
First, fix your json object:
var json = [
{
"Type": "ABC",
"Icon": "Ro.png"
},
{
"Type": "DEF",
"Icon": "Po.png",
}];
Now that it becomes valid, try reading it directly in the dataSource option:
dataSource: json,
If this first demo from Kendo and your code are right, it should work.
I have a ExtJS grid with a store mapped to it.
The JSON response for the store contains 20 fields, but I have mapped only 10 fields in the store. Is it possible for me to obtain the other 10 fields without me having to map them in the store or is it necessary for me to map all the fields to the store. Doing this on row select event of the grid. As for the code, I am able to create the grid, map the store, fire the event and even get the record for the selected row with the mapped 10 field.
Any suggestions ??
As requested by Shekhar :
Store definition
Ext.define('gdoc.store.PrintPaperStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'PrintPaperStore',
proxy: {
type: 'ajax',
url: 'urlToRetrieveTheJSON',
reader: {
type: 'json',
root: 'root'
}
},
fields: [{
mapping: 'value',
name: 'value'
},
{
mapping: 'display',
name: 'display'
}
]
}, cfg)]);
}
});
The JSON Response :
{
"root": [{
"value": "COATED115",
"display": "Coated recycled paper (115gms)",
"description": "Good quality",
"extra": "EXTRA INFO"
}, {
"value": "COATED135",
"display": "Coated recycled paper (135gms)",
"description": "Good quality"
}, {
"value": "OFFSET",
"display": "Offset recycled paper (80gms)",
"description": "Good quality",
"extra": "EXTRA INFO"
}, {
"value": "OTHER",
"display": "Other paper (client to order)",
"description": "Good quality",
"extra": "EXTRA INFO"
}]
}
As you can see I have mapped only value and display from the JSON response in the store.
Is it possible for me to retrieve values of description and extra without me having to map them in the store.
You can access the .raw property on the model, which will contain the raw JSON from the reader.
No. The model, or store, must set all the fields you want to have available from the JSON data.
I'm confused as to why you don't want to map the extra fields? It's it purely time saving and hoping there was a quicker way to get access to the data? Or are you expecting the fields names to be dynamic?
If it's the dynamic reason, take a look at this post for a solution. Dynamic model with ExtJS 4