I am using kendo grid with virtual scrolling, with the following angular JS code in the controller:-
$scope.options = {
dataSource: {
type: "json",
serverPaging: true,
pageSize: 100,
transport: {
read: "/rest/error/grid",
dataType :"json"
},
schema:{data:"data",total:"total"}
},
height: 543,
scrollable: {
virtual: true
}
};
The json output of my service is :
{data :[{name:"name0",age:0},
{name:"name1",age:1},
....,
{name:"name1000",age:1000}
],
total:1000
}
The kendo Grid initialized on the UI has:-
<div>
<div kendo-grid="grid" k-options="options" k-rebind="options"></div>
</div>
However facing a issue like once i reach 99 record, the call to get next 100 records is made.
However after that second request to get first 100 record also triggered and grid reset to first record.
In effect unable to scroll beyond page 1(or beyond 100 records).
Any ideas to resolve the same
Finally figured out the issue,
The grid works fine when i removed 'k-rebind' from the html.
It seems the k-bind trigger a rebind action, since data in the options is changed during the scrolling. Thus initializing the grid each time.
Thanks all
Related
I have a grid that displays a comma-separated list of values, and it has an array that gets used in a template editor for the grid. (On the server, I transform the comma-separated list to an array for the Kendo multiselect AngularJS directive). I have almost everything working: display, edit, and adding values in the multiselect.
There's just one weird thing happening: after I add a value in the multiselect, click Save in the editor, and reopen the editor, the multiselect then only displays one of the most-recently entered values. I know that the values are there and going through the pipeline, because the values make it into the database. I can refresh the page, open the editor, and all the values display in the multiselect correctly, including the one I just added.
It's as if kendo "forgets" most of the values when I reopen the editor. How can this be prevented? Does the MultiSelect need to be rebound to the values? If so, how?
I have tried adding this onChange event, but it had no effect. I've added valuePrimitive to no effect. I tried specifying k-rebind, but it caused an error.
Here's the directive being used in the text/x-kendo-template:
<select kendo-multi-select
id="zipCode"
k-placeholder="'Enter zip codes...'"
style="width: 225px"
k-on-change="dataItem.dirty=true"
k-auto-bind="false"
k-min-length="3"
k-enforce-min-length="true"
k-data-source="options.zipCodeDataSource"
k-data-text-field="'text'"
k-filter="'startsWith'"
k-filtering="options.zipCodeFiltering"
k-no-data-template="'...'"
k-ng-model="dataItem.zipArray"
k-highlight-first="true" />
And this is the DataSource:
options.zipCodeDataSource = new kendo.data.DataSource({
severFiltering: true,
transport: {
read: {
url: serviceUrl + "ZipCode/Get",
type: "GET",
dataType: "json",
contentType: jsonType,
data: function (e) {
// get your widget.
let widget = $('#zipCode').data('kendoMultiSelect');
// get the text input
let filter = widget.input.val();
// what you return here will be in the query string
return {
filter: filter
};
}
},
},
schema: {
data: "data",
total: "Count",
model:
{
id: "text",
fields: {
text: { editable: false, defaultValue: 0 },
}
},
parse: function (response) {
return response;
}
},
error: function (e) {
}
});
If I display {{dataItem.zipArray}} in a <pre> all of the expected values are there.
I wonder if something needs to be added to the edit event handler in the kendo grid definition, but I'm not sure what it would be. I've had to do binding like that for the dropdownlist directive.
edit: function (e) {
if (e.model.marketId === 0) {
e.container.kendoWindow("title", "Add");
} else {
e.container.kendoWindow("title", "Edit");
}
// re-bind multi-select here??
// These two lines actually cause the multiselect to lose pre-existing items in dataItem.zipArray
// var multiselect = kendo.widgetInstance(angular.element('#zipCode'));
// multiselect.trigger('change');
}
...
Update:
This dojo demonstrates the issue.
Run the dojo
Edit the first record in the Contracts grid
Add a zip code such as 22250
Click Save
Then click Edit on the first row again
Only zip code 22250 is displayed in the editor
Also, I notice that if I change k-min-length="3" to k-min-length="1", then the issue goes away. But in the scenario I'm working on, it needs to be 3.
This seems to be an issue with kendo itself. Back then this issue was reported here.
Ok based on the reply from telerik, this issue has been fixed in 2017 R3 SP1 release (2017.3.1018). You can verify it by using this updated dojo example:
http://dojo.telerik.com/IREVAXar/3
I am using Data-Grid for listing of my grid data. However, I have to say maximum item per page from the grid. I have gone through the Data-Grid library function and changed the parameters from there to select the customize / selact my default value. But, I am failed. It's appearing here in some way
Here the problem is it's not selecting the default page size when loading. So I have done so to select the default page size in this way
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
itemsPerPage:5,
};
However it's still not working. But, once, when I select any item from the dropdown like 5/10 then the pagination appears and obey by the the item per pages this way.
So, now, my question is how can I start from this way which will select a default pagesize rather than coming with a empty value with all items. Thank you.
Ohh, I got the solution by myself. I have added the default itemsPerPage in the wrong way. it will be this way.
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
pagination: {
itemsPerPage: '10'
}
};
Here the pagination support is coming from the another angular module as there are 2 js file(datagrid, and pagination). Source file
I have a grid with Ext.grid.plugin.RowWidget. When I expand row I have to load some data via ajax using row record data as request parameters and display loaded data in a row body component.
How I can get row record data upon row body component creation? I've tried initComponent and afterrender listener, but I understand that it is not appropriate place because data is not binded yet. I have to listen for another event or?
Here is simple fiddle illustrating my problem and what I've tried already.
Thanks to Evan Trimboli, onWidgetAttach seems to work:
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'characterPanel',
bind: {
characterName: '{record.name}'
},
},
onWidgetAttach: function (plugin, bodyComponent, record) {
// Do stuff
}
}],
Check updated fiddle.
I have a grid with some columns with filters.
columns defination:
columns:[{
text: "Number",
dataIndex: 'clientreference',
width: 200,
filter: true,
sortable: true
},
here is filter feature defination
features: [{
ftype: 'filters',
encode: true,
local: false
}],
The problem is: When i'm trying to save state of grid, filters are not working: When I adding this code to a grid:
stateful: true,
stateId: 'documentsGrid',
I refresh the page and all works fine, because i dont have state in my cookies.
But when I refresh the page second time - state loads from cookies and filters are not working.
If i remove stateful: true and refresh page, filters are working fine.
Any suggestions?
Also I noticed, that all examples in extjs site are only with filters or with stateful grid, but there is no one example with both.
UPDATED:
The most useful way was making my own method for saving state of elements I need and to restore it.
I think you are specifying features in grid.But you can specify filters in store directly.So try to define filters in store and stateful in grid config options.Hope you may get the solution to come out from this.
I'm trying to create a dynamic grid using ExtJS. The grid is built and displayed when a click event is fired then an ajax request is sent to the server to fetch the columns, records and records definition a.k.a store fields.
Each node could have different grid structure and that depends on the level of the node in the tree.
The only way I came up with so far is :
function showGrid(response, request) {
var jsonData = Ext.util.JSON.decode(response.responseText);
var grid = Ext.getCmp('contentGrid' + request.params.owner);
if (grid) {
grid.destroy();
}
var store = new Ext.data.ArrayStore({
id: 'arrayStore',
fields: jsonData.recordFields,
autoDestroy: true
});
grid = new Ext.grid.GridPanel({
defaults: {
sortable: true
},
id: 'contentGrid' + request.params.owner,
store: store,
columns: jsonData.columns,
//width:540,
//height:200,
loadMask: true
});
store.loadData(jsonData.records);
if (Ext.getCmp('tab-' + request.params.owner)) {
Ext.getCmp('tab-' + request.params.owner).show();
} else {
grid.render('grid-div');
Ext.getCmp('card-tabs-panel').add({
id: 'tab-' + request.params.owner,
title: request.params.text,
iconCls: 'silk-tab',
html: Ext.getDom('grid-div').innerHTML,
closable: true
}).show();
}
}
The function above is called when a click event is fired
'click': function(node) {
Ext.Ajax.request({
url: 'showCtn',
success: function(response, request) {
alert('Success');
showGrid(response, request);
},
failure: function(results, request) {
alert('Error');
},
params: Ext.urlDecode(node.attributes.options);
}
});
}
The problem I'm getting with this code is that a new grid is displayed each time the showGrid function is called. The end user sees the old grids and the new one. To mitigate this problem, I tried destroying the grid and also removing the grid element on each request, and that seems to solve the problem only that records never get displayed this time.
if (grid) {
grid.destroy(true);
}
The behaviour I'm looking for is to display the result of a grid within a tab and if that tab exists replaced the old grid.
Any help is appreciated.
When you are trying to add your grid to the tab like this:
html:Ext.getDom('grid-div').innerHTML,
Ext is not aware of it being a valid grid component. Instead, you are simply adding HTML markup that just happens to look like a grid, but the TabPanel will not be aware that it is a grid component.
Instead you should add the grid itself as the tab (a GridPanel is a Panel and does not need to be nested into a parent panel). You can do so and also apply the needed tab configs like this:
Ext.getCmp('card-tabs-panel').add({
Ext.apply(grid, {
id: 'tab-' + request.params.owner,
title: request.params.text,
iconCls: 'silk-tab',
closable: true
});
}).show();
BTW, constantly creating and destroying grids is not an ideal strategy if you can avoid it. It might be better to simply hide and re-show grids (and reload their data) based on which type of grid is needed if that's possible (assuming the set of grid types is finite).
A potential option is to use the metaData field on the JsonStore that allows dynamic reconfiguring of the grid columns as per new datasets.
From
One of the most helpful blog posts about this that Ive found is this one:
http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html and the original info is well documented at http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader