In the AngularJS UI-grid I would like to auto resize columns after I click to one column hiding, because now if I click to hide clumn there will be a empty place at the place where the column was.
This will most probably because you are setting the column width in you columnDef. The reason the demos work are because they dont specify the column width and they just resize after the columns are hidden. Check you column def and make sure you are not setting the column width.
columnDefs: [
{ name: 'name',width:150 },
{ name: 'gender', enableHiding: false,width:150 },
{ name: 'company',width:150 }
],
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
There will be differences in the behavior with the above configs.
Related
I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:
suppressMovable: true
The above code I used here:
columnDefs: [
{
headerName: 'Athlete', //the generic name of header
children: [
{
field: 'athlete', //children header from generic header
width: 150,
suppressMovable:true
},
{
field: 'age',
lockVisible: true,
cellClass: 'locked-visible',
suppressMovable:true
},
{
field: 'country',
width: 150,
},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
],
...
suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?
Out of the box answer is you can't.
If any child is fixed, then AG Grid doesn't allow moving the group.
you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)
I am using a dgrid that has a horizontal scroll bar and column sorting. When the user scrolls to the last column and sorts the column, the scroll position is not retained by dgrid. How can I retain the scroll bar position after the sort is completed ?
var grid = new (declare([OnDemandGrid, DijitRegistry, ColumnResizer]))({
id: "grid",
store: storeForGrid,
maxRowsPerPage: 3,
columns: [ {
field: "Name",
label: "Name"
}, {
field: "LastName",
label: "Last Name"
}, {
field: "BookNumber",
label: "Book Number"
}, {
field: "MaxDays",
label: "Max. Days"
}, {
field: "MinDays",
label: "Min. Days"
} ]
}, this.grid);
I tried to implement the 'dgrid-sort' event callback. By this time the scrollLeft position is reset-ted to 0.
Thanks.
Passing keepScrollPosition: true in your constructor arguments object should do exactly what you are asking for.
https://github.com/SitePen/dgrid/blob/v0.4.0/doc/components/core-components/OnDemandList-and-OnDemandGrid.md#property-summary
{
field: 'community_name',
displayName: 'Community Name',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a tooltip="{{row.getProperty(col.field)}}" tooltip-placement="right" ng-cell-text class="override-link">{{row.getProperty(col.field)|truncate}}</a></div>',
cellClass: 'cellToolTip',
width: 150
}
I want this column to be resized when dynamically adding more columns to grid. I can not remove the fixed width of 150. It should be there for the first loading of the grid. But when adding more column to the grid, this should be reduced. Is it possible?
You can update column width like this:
$scope.columnDefs = [
{
field: 'id',
displayName:'Id',
width: 80
},
{
field:'name', displayName:'Name'
}
]
$scope.gridOptions = {
data: 'myData',
columnDefs: $scope.columnDefs
};
$scope.changeColumnWidth = function() {
$scope.gridOptions.$gridScope.columns[0].width = 300;
}
Example: Plunker
I am using Kendo library for grid. I want to have a toolbar in that grid.
I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top
I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.
There are two ways of getting it:
You let Kendo UI generate in the top and then you move it to the bottom
You generate it to the bottom.
The first approach is fast and if you don't need header toolbar is the best. Just add the following code:
$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));
See it here : http://jsfiddle.net/OnaBai/WsRqP/1/
The second approach -using as base the example that you mention in your original question- would be something like this:
Step 1: Define a template, you might use the same than in the example:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize : 20,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
height : 430,
sortable : true,
pageable : true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
}).data("kendoGrid");
Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.
dataBound : function () {
initFooterToolbar(this, kendo.template($("#template").html()));
}
Step 4: Implement this initFooterToolbar:
function initFooterToolbar(grid, template) {
if (!this._footer) {
this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
.append(template);
grid.wrapper.append(this._footer);
// Other code for initializing your template
...
}
}
What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.
Finally append the toolbar to grid.wrapper.
So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.
The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/
I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.
For example,
#Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")
transport: {
read: {
url: '#Url.Action("_List", "Applications")',
data: refreshGridParams,
type: 'POST'
},
function refreshGridParams() {
return {
Year: $('#Year').val()
};
}
$('#Year').change(function () {
theGrid.dataSource.read({
Year: $('#Year').val()
});
});
Then in my controller,
[HttpPost]
public JsonResult _List(int? Year, int skip, int take)
{
Last
_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });
This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.
Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.
http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp
$("#grid").kendoGrid({
columns:[{
field:'name',
footerTemplate : "Row Count: #= data.name.count #"
},{
field:'age'
}],
dataSource: new kendo.data.DataSource({
aggregate: [{
field:"name",
aggregate: "count"
}],
data: [{
name: "Jane",
age: 31
}, {
name: "John",
age: 33
}]
}),
dataBound: function() {
var footer = this.wrapper.find('.k-footer-template');
footer.children(":first").attr('colspan', this.columns.length);
footer.children().not(':first').remove();
}
});
Have a pretty common task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.
I have already searched and the common ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.
I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.
Here is the config Im using on the view
Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
items:[
{
fullscreen:true,
scroll:false,
xtype:'panel',
title:'Search',
items:[
{
xtype:'searchfield',
name:'search',
label:'Search',
},
{
xtype:'container',
layout:'hbox',
width:'100%',
margin:'3 0 0 0',
defaults:{
flex:1
},
items:[
{
xtype:'selectfield',
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
},
{
xtype:'button',
text:'Search',
action:'search'
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
}
]
},
],
}
});
This image describes what Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.
This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.
Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
fullscreen:true,
layout:'card'
items:[
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'searchfield',
name:'search',
flex:6
},
{
xtype:'button',
action:'search',
iconCls:'search',
iconMask:true,
ui:'simple',
flex:1
}
]
},
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'selectfield',
flex:1,
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
},
],
}
});
As you can see I have two toolbars docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.
Thanks for your time.
did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha.com/touch/2-0/#!/guide/layouts right from the docs!
Panel should have vbox layout, list should have fit layout and set flex option.
As seen if example bellow, if flex value is not set to a button, it should get default size.
From the documentation:
Flexing means we divide the available area up based on the flex of
each child component...
Here is an example:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
html: [
"Some content"
].join("")
},
{
title: "About",
iconCls: 'star',
layout: "vbox", // this card has vbox layout
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List'
},
{
xtype: "list",
layout: "fit", // take as much space as available
flex: 1, // define flex
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
],
itemTpl: '{name} is {age} years old'
},
{
xtype: 'button',
text: "Button"
}
]
}
]
}
});
And screenshot:
Note: I am learning Sencha Touch so I am not sure that written is correct.