I have an external jsp page(a menu) and a DOJO table in my div. When I tried to applyoverflow:auto; on the div, I am seeing 2 scroll bars. One for the table and the other for the menu. How do I make the menu and the table scroll for a single scroll bar?
<div id="table">
<jsp:include page="searchgroup.jsp"></jsp:include>
<div id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ name: '*' }"
data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10">
</div>
</div>
This is my CSS
#grid1{
height: 85%;
width: 104%;
overflow-x:auto;
}
#table{
height:90%;
width:104%;
overflow-x:auto;
}
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [
{
name : "S. No.",
classes : "title",
width : "70%",
get : siFormatter,
filterable : false
}, {
name : "Site Id",
classes : "title",
field : "siteId",
width : "70%"
}, {
name : "IP/Phone No.",
classes : "title",
field : "devType",
width : "120%"
}, {
name : 'Site Name',
classes : "title",
field : "name",
fields : [ 'company', 'name' ],
formatter : formatLink,
width : "110%"
}
</script>
because you applied overflow: auto on both of them
you are supposed to use that on one of them not both of them
Related
I'm trying to use AgGrid to display a simple list/grid of text informations.
With the base example :
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
<ag-grid-angular
class="ag-theme-balham custom"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
and a css style :
{
.custom{
height: 100vh;
width: 100%;
}
}
I see that the container of the grid takes all the space, that's cool but in the documentation I don't see a way to make sure the cells are justified and take all the space in width
How can I achieve that ?
You should execute sizeColumnsToFit() method once gread is ready:
sizeColumnsToFit : Gets columns to adjust in size to fit the grid horizontally.
as gridOptions property
gridOptions:{
onGridReady(params) {
params.api.sizeColumnsToFit();
}
}
or as html tag
(gridReady)="onGridReady($event)"
I'm using the Kendo Ext library (https://github.com/jsExtensions/kendoui-extended-api) to render a Treeview inside of a Dropdown List. The problem I'm having is that the control get's hidden underneath the parent div. However when compared to the normal Kendo Dropdown List, that control does not suffer the same problem.
This is the example I have so far:
https://jsfiddle.net/6xxau9d4/1/
HTML
<div class="elm1">
<div id="dropDownTreeView"></div>
<input id="sample1" value="1" style="width: 150;" />
<input id="sample2" value="1" style="width: 150x;" />
</div>
JS
var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
treeview: {
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
}
}).data("kendoExtDropDownTreeView");
dropDownTreeView.dropDownList().text("Dropdown Treeview")
$(document).ready(function() {
$("#sample1").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample1",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
$("#sample2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample2",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
});
CSS
.elm1 {
width: 400px;
height: 100px;
background-color: grey;
position: relative;
overflow: scroll;
}
#customers-list .k-item {
line-height: 1em;
min-width: 300px;
background-color: white;
display: inline-block;
Where Sample1 and Sample2 perform how I would like, but Dropdown Treeview does not. I've been pouring over the source trying to understand what makes Sample1 and Sample2 work, but I have yet to come to a realization. Any help in the right direction is much appreciated.
By default, the Kendo UI DropDownLists, ComboBoxes, DatePickers and similar widgets, use a detached popup, which is a child of the <body> element. This ensures that these popups (or dropdowns, if you prefer) will be able to stay on top of the other page content and not be restricted by fixed-height or scrollable containers.
On the other hand, the ExtDropDownTreeView widget renders its dropdown in the same place, where the original widget element is placed. Since the widget element is located inside a fixed height scrollable container in your case, this causes the observed problem.
I have a kendo grid, defined as such:
$("#auditGrid").kendoGrid({
height: 650,
width: 650,
sortable: true,
filterable: true,
resizable: true,
columns: [
{ field: "ChangeTypeDescription", title: "Change Type" },
{ field: "LevelDescription", title: "Level" },
{ field: "Site.ShortName", title: "Site", width: "100px", },
{ field: "TimeStampLocal", title: "Date", type: "date", format: "{0: yyyy-MM-dd HH:mm:ss}" }
]
});
However, the column labelled "Site" does not display anything, even when I know there should be something there. Setting the field as "Site" instead of "Site.ShortName" shows a value of [object Object], but whenever I try to display ShortName off of Site, it shows an empty column. All other columns display properly.
Does anyone have any insight as to why this is happening?
The datasource schema, in case you need to see it:
schema: {
model: {
fields: {
ChangeTypeDescription: { type: "string" },
LevelDescription: { type: "string" },
Site: { type: "string" },
TimeStampLocal: { type: "date" }
}
}
},
You needs to use the template functionality for achieving it, just change the column description of the field Site as follows
{ field: 'Site', title: 'Site', template: '#= Site.ShortName# '}
I have a div which holds a DOJO table. The problem is, when I resize the browser, the DOJO table is not re-sized. How do I re-size it?? This is my div
<div id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ name: '*' }"
data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10"
style="height: 300px; width: 930px;"></div>
</div>
This is the DOJO table.
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser");
var gridLayout = [
{
name : "Capacity",
classes : "title",
field : "capacityKVA",
width : "90px"
}, {
name : "Date & Time",
classes : "title",
field : "date",
width : "140px"
}, {
name : 'Status',
classes : "title",
field : "statusMessage",
fields : [ 'statusMessage', 'statusMessageColor' ],
formatter : formatLink1,
width : "140px"
}];
I have kendo grid in my application.And in my grid filterable is true.In grid one row has numeric text-box in filter,when we click on spinners it is showing infinity values.So I want to give some limit for numeric text-boxes in filter.How to give some limit for numeric text boxes in grid filter.?
My grid code is
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
Once try this
filterMenuInit: function(e) {
var numeric = e.container.find("[data-role=numerictextbox]").data("kendoNumericTextBox");
if (numeric) {
numeric.min(0);
}
}