Hi,
We are using the latest (release from 12.01.2016) Kendo UI together with Angular 2 beta and in general they are working really nice together.
Unfortunately I just noticed a major problem: when I'm hiding a column from the column menu the whole grid layout is messed up (e.g. first column is overlapped and space is left all the way to the right - see attached screenshot).
We are also loading bootstrap css in the index.html but I followed the steps from your site on how to integrate these two together.
Below is all the code from the Angular component which is handling the grid. Please advise - thank you.
@Component({
selector: 'customers-list',
directives: [FORM_DIRECTIVES],
providers: [RestService],
template: `
<div class="container-fluid">
<kendo-grid [options]="gridOptions">
</kendo-grid>
</div>
`
})
export class CustomersListComponent implements OnInit {
public gridOptions: kendo.ui.GridOptions;
public gridDataSource: kendo.data.DataSource;
constructor(private _restService: RestService) {
this.gridDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
url: "http://localhost:8080/eTaxi/rest/customer/query",
type: "POST",
contentType: "application/json",
},
//this is used to transform the request to a JSON format!
parameterMap: function(data, type) {
return kendo.stringify(data);
}
},
schema: {
//this is used to set the response to the right JSON node (customersList in this case)
data: function(response) {
return response.customersList; //
},
///this is used to to tell the pager which the total number is.
total: function(response) {
return response.totalNumberOfCustomers; //
},
model: {
fields: {
// ID: { type: "number" },
status: { type: "string" },
customerNumber: { type: "number" },
gender: { type: "string" },
firstName: { type: "string" },
lastName: { type: "string" },
username: { type: "string" },
email: { field: "primaryContactDetails.mailBusiness", type: "string" },
country: { field: "primaryAddress.country", type: "string" },
zipCode: { field: "primaryAddress.zipCode", type: "string" },
city: { field: "primaryAddress.city", type: "string" },
street: { field: "primaryAddress.street", type: "string" },
phoneNumber: { field: "primaryContactDetails.phoneNumber", type: "string" },
mobile: { field: "primaryContactDetails.mobileBusiness", type: "string" },
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
});
this.gridOptions = {
dataSource: this.gridDataSource,
groupable: false,
sortable: true,
pageable: true,
selectable: true,
filterable: {
mode: "row"
},
columnMenu: true,
resizable: true,
reorderable: true,
columns: [
{
field: "status",
title: "Status",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "customerNumber",
title: "Customer #",
filterable: {
cell: {
showOperators: false,
operator: "equals"
}
}
},
{
field: "gender",
title: "Gender",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "firstName",
title: "First name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "lastName",
title: "Last Name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "username",
title: "Username",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "email",
title: "Email",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
}, {
field: "country",
title: "Country",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "zipCode",
title: "Postal Code",
hidden: true,
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "city",
title: "City",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "street",
title: "Street",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "phoneNumber",
title: "Phone Number",
hidden: true,
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{
field: "mobile",
title: "Mobile",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
}
]
};
}
1 Answer, 1 is accepted
You posted this question in the AppBuilder forums but it refers to the Kendo UI Professional product. Please note that you should post such questions in the Kendo UI forums, in a support ticket or to a community platform like Stack Overflow, so you can get help from the product specialists.
I did a quick research about your issue and here is what I found.
The columns would behave like that if you give them fixed widths. The documentation here states "Column resizing and hiding trigger the following behavior when scrolling is enabled: if all currently visible columns have explicit widths, the Grid applies a pixel width to its table elements, so that the widths of all remaining columns, i.e. except the column that is currently resized or hidden, are maintained. "
As for the pager, this issue seems to appear in IE in Quirks mode only and Quirks mode is not supported by the Kendo UI widgets (browser support info available here).
If the problems persist, please write to the Kendo UI team (in the forums or a ticket), so that they can assist you further.
Regards,
Tsvetina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.