I am not getting the grid row index, so i am not able to use the buffered rendering plugin method of scrollto() .On using scroll position, the grid data is not fetched since the buffered rendering plugin doesn't get information that the grids scroll position has been changed, So my grid becomes blank and on physically scrolling the grid fetches data.
Please suggest some way to load the grid data using scroll position.
Here is the code:
/*Created a grid with buffered rendering*/
var LPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10
},
});
Ext.create('Ext.button.Button', {
text: 'Click to scroll to specified scroll position',
renderTo: Ext.getBody(),
listeners: {
click: function () {
/*On clicking the button, we will scroll the grid to a specified position*/
var LProcessGGridView = LPanel.getView();
var LPGGRidViewEle = LProcessGGridView.getEl();
var LScrollbarPos = LPGGRidViewEle.getScrollTop();
/*The actual position for scrolling will be calculated on the basis of an id*/
LPGGRidViewEle.scroll('top', LScrollbarPos );
}
}
})
On scrolling, the grid becomes blank and after scrolling manually, proper data is loaded.
Related
I am working on w2ui grid and I need to hide and show it based on certain condition. Grid is not showing back even though visibility:visible property is applied after it is hidden. It is just showing a line.
Please have a look at my code below:
HTML:
<div id="LastMileGrid" class="col-lg-6 col-sm-12 col-md-6" style="width: 100%; height: 150px"></div>
Javascript:
$('#LastMileGrid').w2grid({
name: 'LastMile',
show: {
toolbar: true,
footer: true,
toolbarReload: false,
toolbarColumns: false,
lineNumbers: true,
},
columns: [
{ field: 'recid', caption: 'ID', size: '10%', sortable: true },
//{ field: 'Header', caption: 'Header', size: '20%', editable: { type: 'text' }, sortable: true },
{ field: 'Description', caption: 'Description', size: '50%', editable: { type: 'text' }, sortable: true }
],
toolbar: {
items: [
{ id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' },
{ id: 'remove', type: 'button', caption: 'Remove Record', icon: 'w2ui-icon-cross' }
],
onClick: function (event) {
if (event.target == 'add') {
var Index = w2ui['LastMile'].records.length;
w2ui['LastMile'].add({ recid: w2ui['LastMile'].records.length + 1 });
}
if (event.target == 'remove') {
var grid = w2ui["LastMile"];
grid.method = 'DELETE';
grid.delete();
}
}
},
//records: [{ recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' }]
});
And when opening the pop up I call the function,
$('#popup').w2popup('open', {
onOpen: function () {
if ($("#ddlMode").val() == "AIR" && ($("#drpServiceScope").val() == "D2D" || $("#drpServiceScope").val() == "A2D")) {
$('#LastMileGrid').attr("style", "visibility:visible;height:160px:")
}
else {
$('#LastMileGrid').attr("style", "visibility:collapse;")
}
},
modal: true,
});
You can try to call w2ui["LastMile"].refresh() after hiding or showing.
Answering to help others as I am late :D.
After spending a lot of time to resolve the issue,I have formulize below 2 solutions for w2ui grid show hide issue or column size issue :
1.Change the size of columns to px instead of %.
ie. use
{ field: 'lname', caption: 'Last Name', size: '30px' }
instead of
{ field: 'lname', caption: 'Last Name', size: '30%' },
2. If you wish to keep column size in % due to some requirement:
Depending on where you are rendering grid,you need to handle the resizing.
Calling refresh on grid will send data request again to server.
I don't wanted grid to make call to server each time I show/hide grid, hence written the resize of my own.
To help understand the function please note that in my application,
I have followed naming convention as follows:
If I create a grid then it will be id+"_grid",
If create a form that it will be id+"_form",
same for layout id+"_layout".
So I can get the associated component to a id and establish relation between them.
Call resize() function after you call show().
If below function doesn't help, try adding some milli seconds delay between show and my function resize().
function resize(id){
var grid=id+"_grid";
var layout=id+"_layout";
var form=id+"_form";
if(w2ui[layout]){
if($(w2ui[layout].el("main")).hasClass("w2ui-grid")){ /*means in w2ui layouts main has grid hence call resize. Calling refresh on layout "main" will make grid to reload data again ,hence grid resizing is handled in next case */
w2ui[layout].resize();
}else{
w2ui[layout].refresh();/*means main has element other than grid so refresh */
}
}
if(w2ui[form])
w2ui[form].resize();
if(w2ui[grid])
w2ui[grid].resize(); //if grid is directly rendered without a layout resize helps
}
I am using ExtJS 6.0.1. I have my view port with center and east region configured with Ext.tab.Panel. I use a button to show and hide the center and north region. I could do that perfectly with show() and hide() methods. Is there a way to animate the view by sliding in any direction
xtype : 'app-main',
controller : 'main',
viewModel : {
type: 'main'
},
layout : {
type: 'border'
},
initComponent: function(){
var me = this;
Ext.applyIf(me,{
items : [{
region : 'center',
xtype : 'layoutP1',
split : true,
flex : 1
},{
region : 'east',
xtype : 'layoutP2',
layout : 'fit',
split : true,
hidden : true,
flex : 1
}]
});
I use a button at the footer to show/hide the panel in center and east region
onClickP1: function() {
this.getP2layout().flex = 2000;
this.getP1layout().show();
this.getP2.hide();
},
onClickP2View: function() {
this.getP2layout().flex = 2000;
this.getP1layout().flex = 2000;
this.getP1layout().hide();
this.getP2layout().show();
}
With this I can able to show and hide the panel but i need to animate sliding from left to right /right to left based on the region.
And is there a way to do the same using Splitters?. I can see Panel by default it comes with splitter to collapse and expand the panel.
For this you need to use slideIn on dom element (panel/veiw).
slideIn slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options.
Usage:
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the left with a 2-second duration
el.slideIn('l', { duration: 2000 });
// common config options shown with default values
el.slideIn('r', {
easing: 'easeOut',
duration: 500
});
In this FIDDLE, I have created a demo. I hope this will guide you to achieve your requirement.
Code Snippet
Ext.create('Ext.tab.Panel', {
height: window.innerHeight,
renderTo: document.body,
items: [{
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
itemId: 'p1',
layout: 'fit',
split: true
}, {
// xtype: 'panel' implied by default
title: 'East Region is collapsible',
layout: 'fit',
region: 'east',
itemId: 'p2',
xtype: 'panel',
split: true,
hidden: true
}],
buttons: [{
text: 'P1',
disabled: true,
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}, {
text: 'P2',
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}]
}],
//For hide/show view on basis of button click P1/P2
doHideShow: function (btn) {
btn.setDisabled(true);
if (btn.getText() == 'P1') {
this.down('#p1').show().setWidth('100%').getEl().slideIn('l');
this.down('#p2').hide();
this.down('[text=P2]').setDisabled(false);
} else {
this.down('#p2').show().setWidth('100%').getEl().slideIn('r');
this.down('#p1').hide();
this.down('[text=P1]').setDisabled(false);
}
}
});
I am trying to get a Kendo grid with a static height and width.
It absolutely must not change height and width when I page (which it currently does, due to variably-sized data).
If data increases ,I should provide the Scrolling.
The problem is that when the page is first loading with Data the kendo grid is not setting to that fixed height and width.
but if I resize the window it is getting that fixed height and Providing the Scroll option inside Kendo Grid
So I can I set the height Of kendo Grid at a fixed value when it loads for first time
Kendo Version : v2014.1.318
Code:
$("#ViewUnitContainerTracking").kendoGrid({
sortable: true,
height:"280px",
columns: [
{
field: "UnitCode",
title: "Unit",
width: "15%"
},
{
field: "UnitName",
title: "Unit Name",
width: "35%"
},
{
field: "Status",
title: "St",
width: "5%",
template: $("#TemplateViewUnitTrackingStatus").text()
},
{
field: "StartDate",
title: "Start Date",
//template: $("#TemplateViewUnitTrackingStartDate").text(),
width: "15%",
//type: "date"
},
{
field: "EndDate",
title: "End Date",
//template: $("#TemplateViewUnitTrackingEndDate").text(),
width: "15%",
//type: "date"
},
{
field: "AssessPrgress",
title: "%OAP",
width: "10%"
},
{
field: "Status",
title: "Status",
hidden: true
}
],
editable: false,
resizable: false,
mobile: true,
dataSource: data.UnitList
});
Html Page:
<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>
Answer of the problem is:-
dataBound: function() {
$('#ViewUnitContainerTracking .k-grid-content').height(280);
}
Adding this to the Kendo grid will Solve the issue.
As After Data Bound event we can set the custom Css property of the Grid as the Grid dynamic height is set previous to this event.
I m doing this dynamically, to set the Grid to 100%, means, minus bootstrap header and footer:
<script type="text/javascript">
var gridElement = $("#serviceGrid");
function resizeGrid() {
$("#serviceGrid").css("height", $(window).height() - $("#itheader").height() - $("#itfooter").height() - 2);
gridElement.data("kendoGrid").resize();
}
$(window).resize(function() {
resizeGrid();
});
</script>
The "- 2" is because of two 1px borders a top and bottom..
I find this more reliable option which works with locked/frozen columns as well. You can call below lines of code in window's resize event handler
var availableHeight = 500; // Calculate this value based on space available in grid's parent container
$('#YOUR_GRID_ID').data('kendoGrid').setOptions({ height: availableHeight})
I have an ExtJS 4 gridPanel as below:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'grid',
columns: [
{text: 'column 1', sortable: true, width: 70, dataIndex: 'column1'},
{text: 'column 2', sortable: true, width: 70, dataIndex: 'column2'},
{text: 'column 3', sortable: true, width: 70, dataIndex: 'column3'},
{text: 'column 4', sortable: true, width: 70, dataIndex: 'column4'},
],
renderTo: Ext.get('gridDiv'),
width: 800,
height: 600,
listeners: {
},
features: [{
ftype: 'grouping'
}]
});
I'm required to dynamically hide the column that the grid is being grouped by whenever the grid is grouped, and show all other columns - reshowing any previously hidden columns.
I understand that this would be a listener handler that catches the grouping changing, which would then fire column.hide().
Some pseudo-code:
...
listeners: {
groupchange: function(store, groupers, eOpts) {
groupers.forEach(function(group) {
grid.columns.forEach(function(column) {
if(column==group)
column.hide();
if(column==group)
column.show();
}
}
}
},
...
I'm not sure from the API documentation whether groupchange is an event that can be caught by the grid, rather than the store, how to access the contents of groupers, and what comparators are available to determine if a column is in groupers.
How should this listener event be structured? What are the correct events/methods/properties to use?
Found that the hiding is done on a store listener, despite the grid panel API making it look as though it can be done as a grid listener. I've worked off the first keys array value within the groupers, although you could just as easily use items[0].property value.
var store = Ext.create('Ext.data.Store', {
...
listeners:
{
groupchange: function(store, groupers, eOpts){
var column = groupers.keys[0];
productionItemGrid.columns.forEach(function(entry){
if(entry.dataIndex == column)
{
entry.setVisible(false);
}
else
{
entry.setVisible(true);
}
});
}
}
...
});
I want toolbar to take only nessasary \ auto size.. how can i do that?
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
layout: 'vbox',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton 1'
},
{
xtype: 'button',
text: 'MyButton 2'
}
]
}
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
Because a toolbar is just that, a bar, it will expand to fill all available space. Buttons placed inside a toolbar will occupy as much space as they need, but the toolbar will still expand to fill the maximum width possible.
The Ext.Toolbar has a property called autoWidth, but this will only cause the toolbar to use the css width: auto property. This is not perfect, but it's probably your best bet.