I am using Angular slickgrid to display my data, issue is when we click on any cell, row or checkbox, page moves up to starting element. Instead of moveing up page should stay as it is.
From DOM I found active element is '<div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div>'
When I delete above line, then it stop moving page up on click on any cell and working properly as per proper behaviour.
Here is my code:
<section id="order-grid">
<div class="row">
<div class="col-12" id="demo-container">
<angular-slickgrid #slickGrid [gridId]="orderGrid" (onAngularGridCreated)="angularGridReady($event)"
[columnDefinitions]="orderTableColumns" [gridOptions]="orderGridOptions" [dataset]="orderItems"
(sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
(sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
</div>
</div>
</section>
Grid options are:
this.orderGridOptions = {
asyncEditorLoading: true,
autoCommitEdit: true,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
enableAutoResize: true,
editable: true,
enableCellNavigation: true,
enableFiltering: true,
enableRowSelection: true,
rowSelectionOptions: {
selectActiveRow: true
},
};
here is link for behaviour: https://app.box.com/s/gwoks1buvncz8q6bebd2t0bym4tf1tw7
I would appreciated when you give me some solution why this is happens
Related
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
I'm using Extjs and trying to create a layout that fill all the browser's window apart from the navigation bar.
I created a mapPanel with extjs / geoext which it renders to a div in my content:
Ext.create('Ext.panel.Panel', {
layout: "fit",
renderTo: "view",
width:1100,
height: 500,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, tree,
]
}
});
which works fine but the layout is rendered inside the "view" div.
Can I simply override all the content of the document apart from the navigation bar ?
You can use renderTo: Ext.getBody() or wrap everything in the Viewport.
Ext.create('Ext.container.Viewport',{
items:[{
layout: "border",
deferredRender: false,
items: [mapPanel, tree]
}]
});
However, neither solution will overwrite everything that is in the body already - you will have to destroy existing content manually.
For instance if you have a splash screen:
<div id="splash" style="text-align:center; vertical-align:middle;">
<br><br>
<img src="Loading.png">
<br><br>
<progress max=100></progress>
<br><br>
Loading...
</div>
you may want to destroy that screen in your launch method of Application.js:
launch: function() {
var splash = Ext.get('splash');
if(splash) splash.destroy();
}
I can resize dxDataGrid column, but that column overwriting beside column.
Is there any option to expand (resize) dxDataGrid when column resizing
$scope.dataGridOptions = {
bindingOptions: { dataSource: 'gridDataSource' },
allowColumnResizing: true,
columnAutoWidth: true,
hoverStateEnabled: true,
allowColumnReordering: true,
filterRow: {
visible: true
},
paging: {
enabled: false
},
..............
..............
I am using html 5 and angular:
<div id="gridContainer" dx-data-grid="dataGridOptions" ></div>
The DevExtreme team added this option out-of-the-box in v17.1. You can learn more about this from the following DevExpress blog post:
DevExtreme DataGrid - Advanced Column Resizing
I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
I have been working on an application using sencha touch 2 .
I have a toolbar on top which contains a button .
When i click this button i will have a panel overlay .
In this panel,i want to have two items :
var shareButton = {
xtype : 'button',
ui: 'action',
width:'36px',
height:'36px',
handler : function(){
var panel=Ext.create('Ext.Panel',{
right: 0,
top: 20,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%' ,
styleHtmlContent: true,
scrollable: true,
items: [
{html:'Tweet</body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
Ext.Viewport.add(panel);
panel.show();}};
But this is not working.
In fact,i want the first one to direct me to twitter to share the URL (www.google.com).
And the second one to facebook to share "test.com".
Unfortunately ,nothing is displayed in the panel .
Thank you.
Since the overlay is called after the page is loaded, the facebook and twitter buttons should rendered again
This is the code that should be added after the overlay is shown
FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter
This works for me. THe only problem is that the Facebook like button has not got a size, so you cannot see it.
Ensure your floating panel is not scrollable. If it is scrollable, give it a fixed width and height.
Update
Here is an example on Sencha Fiddle: http://www.senchafiddle.com/#jgXtj
Ensure you are adding the panel into Ext.Viewport.