I have a datable inside a tab. My application has a left pane and a center pane. Center pane displays the data table and left pane is used for browsing. My left pane is collapsible, but whenever I collapse my left pane the column width in datatables is not automatically re sized based on new width but when I click on any of the column headers it expands / collapse based on the new width. I am not sure how to fix this issue.
I tried using the below code, the table gets expanded properly but the columns are not getting expanded / collapsed unless I click the column headings.
function collapse () {
$("#"+elementId).css('width', '100%');
$("#"+elementId).datatable().fnAdjustColumnSizing();
} );
I figured out that we can use $.fn.dataTable.fnTables(true) to get all the table instances and then adjust the column size of each table.
something like below,
function onCollapse(e) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
for(var i=0;i<table.length;i++){
$(table[i]).dataTable().fnAdjustColumnSizing();
}
}
}
Thanks
Barani
Related
I would like to add another field to the collapsed view that appears on clicking a CSVLayer element when multiple items are present in that particular location.
Currently, its shown like this,
I want to add another column to this table. Now only the title of the PopupTemplate is shown.
I don't think adding an additional column is possible. The list however uses the PopupTemplate.title property so you can show additional information by adding it to the title:
var popupTemplate = csvLayer.createPopupTemplate();
// Dynamic popup title
popupTemplate.title = function(feature) {
return "Document basic info: " + feature.graphic.attributes["DocumentId"];
}
csvLayer.popupTemplate = popupTemplate;
See the following CodePen for a running version: https://codepen.io/arnofiva/pen/15438955c0e95b65fbeec1350c72204d
I have a Master-Detail set up with 2 grids. On the master grid, I have the ShowOnlyPredefinedDetails option set to false.
This means that I see a little + sign that allows me to expand the details of the detail grid (in the master grid). I would like to rename
some columns in that section as well as hide certain columns. I'm using VB.NET How do I go about this. See image.
You can accomplish this by using the grid control ViewRegistered event, from there you can modify the columns in that grid view that have columns within them that you want to modify, rename, or remove. Here is an example, I hope that it helps:
private void myGridControl_ViewRegistered(object sender, DevExpress.XtraGrid.ViewOperationEventArgs e)
{
if (e != null)
{
if (e.View != null)
{
//Inside of this statement you can adjust, add, and modify all of the columns inside of that grid that appears when you click on the +
(e.View as GridView).Columns["myHiddenColumn"].Visible = false;
(e.View as GridView).Columns.Add(new GridColumn() { Name = "AddColumn", Caption = "Name To Display", Visible = true, FieldName = "DataField"});
(e.View as GridView).Columns["DataField"].OptionsColumn.AllowEdit = false;
(e.View as GridView).Columns["DataField"].OptionsColumn.AllowFocus = false;
(e.View as GridView).Columns["DataField"].OptionsColumn.ReadOnly = true;
}
}
}
I think all you need to do is create a second grid view for your details. If you haven't already done this, do the following:
In your grid designer, click "Retrieve Details" if you have not already done so. This will cause the designer to recognize that you have a second level in your bound object:
Once you see the second layer, now you need a new grid view for it. Click on "Click here to change view" and select "Create a new view" and pick "GridView."
Now you will see both grid views from the designer, and clicking on one or the other will change the context of the menus to the left:
For example, if you have gridView2 selected, when you click on the "Layout" menu, it will show the current layout for your detail grid rather than the master grid. From here, you can remove or add columns as you see fit. Likewise, from the "Columns" menu you will see the new columns (you may have to add them to the view by dragging them over), and you can change the Caption property to change the text of the title.
I suggest you use the Data Annotation attributes with properties of your data-classes to declare how you data should be displayed in GridControl:
To skip column generation for the specific property you can mark this property with the <DisplayAttribute(AutoGenerateField := false)> declaration.
To prevent column from displaying you can mark this property with the <DisplayAttribute(Order := -1)> declaration. Later, user can show this column via Column Chooser UI.
To specify the column caption use the <DisplayAttribute(Name := "YOUR CAPTION")> declaration.
You can also control filtering/editing/formatting and validation capabilities.
Related Links:
Tutorial: Create and Manage Data in Code and Apply Data Annotation Attributes
Video Tutorial: Create and Manage Data in Code and Apply Data Annotation Attributes
I have set up a JFace CheckboxTableViewer in a wizard page with a single sorted column. There are enough entries in the table so that a vertical scrollbar is required.
When I open up the Wizard the majority of the first element in the table has already been scrolled beyond.
I can only see the bottom of that first table element.
The second table element is the first that is fully visible.
private void createCheckboxTable(Composite container) {
Composite tableContainer = new Composite(container, SWT.NONE);
TableColumnLayout tableColumnLayout = new TableColumnLayout();
tableContainer.setLayout(tableColumnLayout);
GridDataFactory.fillDefaults().grab(true, true).applyTo(tableContainer);
CheckboxTableViewer viewer = CheckboxTableViewer.newCheckList(tableContainer, SWT.BORDER | SWT.FULL_SELECTION
| SWT.MULTI);
ObservableListContentProvider listContentProvider = new ObservableListContentProvider();
viewer.setContentProvider(listContentProvider);
Table table = viewer.getTable();
table.setHeaderVisible(true);
table.setLinesVisible(true);// POS 1
TableViewerColumn tableViewerColumn = new TableViewerColumn(viewer, SWT.LEFT);
TableColumn column = tableViewerColumn.getColumn();
tableColumnLayout.setColumnData(column, new ColumnWeightData(1, ColumnWeightData.MINIMUM_WIDTH, false));
column.setText("Column");
tableViewerColumn.setLabelProvider(new DependencyInfoFileNameColumnLabelProvider());
TableSortConfigurator.newConfigurator(viewer, new Action() {
#Override
public void run() {
viewer.refresh();
}
}).add(column, new DependencyInfoNameComparator()).initialize(column, SWT.UP).configure(); //POS 2
}
As a test, and before the sorting occurs, I entered the following line at POS 1 above:
table.setSelection(0);
After opening the wizard again I saw that the selected element is the last which is visible at the bottom of the table. So it seems that this is the reason for the unusual initial vertical position in the table.
When I remove the code table.setSelection(0); from POS 1 and add it to POS 2 something strange happens. The first element in the table is selected as I expected, but I still observe the same initial vertical scrolling.
In other words, the first element of the table is correctly selected, but is only partially visible.
Does anyone know what is going on here? Alternatively is there some method I have missed which returns the view to the top of the table?
Thanks
I have a long tabBar which is horizontal scrollable , I want the selected tab to align at left most side. For example if I select the middle the tab it should be visible at the left most side. And I have next and previous buttons to select the next and previous tabs. So if any tab right to the Left most tab is selected by clicking the prev button now it should be visible at left most side. Overall i want the selected tab to be visible at left most side.
Any help would be greatly appreciated.
I worked around it and got a solution a little trick in the activeitemchange of the tabpanel will do the task
TabPanelActiveItemChange: function (container, value, oldValue, eOpts) {
var count = container.innerItems.length;
var currentIndex = Ext.Array.indexOf(container.innerItems, value);
var tabBar = container.getTabBar();
// to keep the selected item in left or visible in smaller width screen.
var totalWidth = container.innerItems[count - 1].tab.element.getX() - container.innerItems[0].tab.element.getX() + container.innerItems[count - 1].tab.element.getWidth();
if (totalWidth > window.innerWidth) {
var widthToScroll = container.innerItems[currentIndex].tab.element.getX() - container.innerItems[0].tab.element.getX();
var scroller = tabBar.getScrollable().getScroller();
scroller.scrollTo(widthToScroll, 0, true);
}
Easiest if you have a fix size of tabButtons.
That way you could calculate on how much you have to scroll to the side.
A good start will be to set the tabBar.setScrollable({direction:'horizontal'}).
But anyways. It seems bad design for phone's or tablets. You should come up with another idea.
I'm new to Datatables...
I'm making a grid of rows, each with sub (details) rows. I'm using server-side data from a mysql database. It is returned as JSON containing all sub rows.
I need to create the "main" grid rows, summing up columns from the sub rows. I'm not sure if Datatables can do this or how it is done...
I'm thinking about starting by getting the JSON in a JQuery function. Then using a loop to sum up data I need and pass that on to the grid as array-data. Lastly I render the grid.
Is this best practice or is Datatables capable of doing it in a smarter way?
-- the concept of sub rows can be seen here: http://datatables.net/blog/Drill-down_rows --
I have completed something like this. I returned all the data I needed and put the "details" information into the last column in a hidden div. Then used a row click to put that information into the details row.
//In the example the table the first column has a plus icon that gets replace with a minus icon
// the last column added a hidden div that contained the details.
$("#results").dataTable({
"fnCreatedRow": function (nRow, aData, iDataIndex) {
//Attach the on click event to the row
var oTable = this;
$("td:eq(0) span", nRow).on("click", function () {
//First column has a image with the jQuery UI plus icon
if ($(this).hasClass("ui-icon-circle-plus")) {
//The details information is stored in the last column in a hidden div with the class wrapper
//Grab the hidden information and append that to the new row.
oTable.fnOpen(nRow, $(".wraper", nRow).html(), "details");
} else {
oTable.fnClose(nRow);
}
$(this).toggleClass("ui-icon-circle-plus ui-icon-circle-minus");
});
}
});