I'm working on a project that requires Kendo UI. We are currently working with the Q1'12 beta. My appliction must have a footer that is always visible. The content of the application would be in all remaining space above the footer. Please note that I do NOT want the footer on TOP of content. I want two distinct sections (Content and Footer).
For some reason, when I use a Kendo grid with a larger data set, grid grows larger than the space alotted for it. While my footer is where I need it to be, the grid appears to grow behind the footer. Because of this, my users cannot interact with the scroll bar. I have included my code below. How do I fix this? I keep spinning my wheels on this and it seems like an easy/common problem. But I can't find a solution.
<body>
<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
<div id="contentArea" style="background-color:Silver;">
<div id="myList"></div>
<script type="text/javascript">
var myDataSource = new kendo.data.DataSource({
type: "json",
pageSize: 50,
transport: { read: "/myDataSource/" }
});
$(window).load(function () {
$("#myList").kendoGrid({
scrollable: { virtual: true },
dataSource: myDataSource,
sortable: true,
columns: [
{ title: "Field 1" },
{ title: "Field 2" },
{ title: "Field 3" },
{ title: "Field 4" },
{ title: "Field 5" },
{ title: "Field 6" },
{ title: "Field 7" }
]
});
});
</script>
</div>
<div id="footer" style="background-color:Silver;">
Footer information
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#rootLayout").kendoSplitter({
orientation: "vertical",
panes: [
{ scrollable: false, collapsible: false, size: "90%" },
{ collapsible: true, size: "10%" }
]
});
});
</script>
</body>
Thank you for any and all help.
I adapted your sample and swapped out the data source for one provided by the Telerik team to build this implementation:
http://jsfiddle.net/latenightcoder/GZjN5
The code is fairly self-explanatory but all I do is manipulate the grid height based on that of the footer.
Related
I create a similar demo relate with my situation. What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
It's possible to do like this without using column template for the checkbox.
DEMO IN DOJO
Example like this screen shot. (this one manually checked)
p/s: I found a similar demo, but this one using column.template for the checkbox.
This example code (which is based on your sample code) answers your requirement, which is...
What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
Try this in the Telerik DOJO. We need to wait for Kendo to finish expanding the detail row (making sure all HTML elements are fully built), hence the setTimeout in detailExpand. Change the delay depending on your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>
I adapted your first snippet based on the second one that you provided. Check out this revised demo.
Basically, you need to call getKendoGrid() and assign its return value (the actual grid) to the grid variable.
After that, add the change event listener as shown in the second demo snippet that you provided.
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
Also note that it's not .master as in the second demo, but .k-checkbox, as you are not providing a template in the first column (which the second demo does and the checkbox there has the master class).
I am using materialize data table in my application, using which I have implemented fixed header functionality. This is working fine for default page scroll bar.
Fixed Header with default scroll bar
HTML Code:
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
JS Code:
$(document).ready(function(){
var data2 = {
"results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
]
};
$('#myTable').dataTable({
data: data2.results,
"order": [],
"bSort": false,
"bInfo": false,
"paging": false,
"searching": false,
columns: [
{ data: 'Name', title: "Name" },
{ data: 'Amount', title: "Amount" },
{ data: 'Profit', title: "Profit" },
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"},
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"}
],
"columnDefs": [
{ "width": "200px", "targets": [0] },
{ "width": "100px", "targets": [1] },
{ "width": "100px", "targets": [2] },
{ "width": "100px", "targets": [3,6] },
{ "width": "100px", "targets": [4,7] },
{ "width": "200px", "targets": [5,8] }
],
"fixedHeader": {
header: true
}
});
});
But when I set width for table and used custom scrolling means fixed header is not changing based on scroll.
Fixed Header with custom scroll bar
In the above code, I changed my HTML part like this and added this css. But fixed header is not working.
HTML Code:
<div class="row">
<div class="col s8 m5">
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
</div>
</div>
CSS Code:
#myTable_wrapper {
overflow-x:auto;
}
I have attached my two example JSFiddle here. How to achieve fixed header for custom scoll bar in materialize data table?
Apparently datatables' fixed header does not support scoll-x at all. I tried one or two moths ago, but couldn't find a solution. Read the topic here
Yet, i managed to solve this by changing my page design. I did not use a fixed header. But put my table at the top of the div, meaning no search box or pagination or anything on top of the table. Just like your first JSFiddle example.
After that, i gave an height to scrollY, and my header became fixed. What i mean is;
get rid of
"fixedHeader": {
header: true
}
and put these lines instead.
"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400
Try this on JSFiddle
Also, you can make the height dynamic, like:
"sScrollY": calcDataTableHeight(),
And function
var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};
you can play with the numbers, but dont forget to declare the function before initiating it.
I am wanting to just display an icon instead of using text on the tabstrip tabs (the titles of the tab, not the content that pops up when you press the tab).
I have this tabstrip:
$('#filterTabStrip').kendoTabStrip({
//animation: false,
collapsible: true,
dataTextField: 'text',
dataImageUrlField: 'imageUrl',
dataContentField: 'content',
dataSource: [
{
text: 'Users',
//imageUrl: $('#user_tab_image').html(),
content: $('#user_filter_template').html()
},
{
text: 'Location',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#location")}'
content: $('#location_filter_template').html()
},
{
text: 'Description',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/action-sprite/svg/symbols.svg#description")}'
content: $('#description_filter_template').html()
},
{
text: 'Type',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#picklist")}'
content: $('#type_filter_template').html()
},
{
text: 'Custom',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#apps")}'
content: $('#user_filter_template').html()
}
]
});
I have attempted to use static resource URL as well as setting the svg image in an html template, then setting the imageURL to that template, but that didn't work either.
I am hoping this is possible. Thank you for any help.
You can probably try to have an empty text for the dataTextField and provide the imageUrl of the icon which needs to show up. Something similar to this might help!
I'm developing an application in ExtJS 4.2.0 and using Chrome as my development browser. I've noticed that when I hide dropdown menus black squares appear in their place. I'm assuming this isn't supposed to happen! Has anyone else experienced this?
I'm using ExtJs 4.2.0 and Chrome 27.0.1453.94 m.
Thanks!
UPDATE
After some investigation I've found that it happens when using ExtJS in conjunction with the Javascript Infovis Toolkit (http://philogb.github.io/jit/). I've managed to recreate the problem reliably here:
<html>
<head>
<title>Black Box Experiment</title>
<script type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//some data to put in the chart
var data = {
"name": "Test1",
"data": {
"id": "1"
}
};
//Create a new ST instance
var st = new $jit.ST({
injectInto: 'infovis',
duration: 0,
levelDistance: 50,
orientation: "top",
Navigation: {
enable:false,
panning:true
},
Node: {
height: 30,
width: 150,
autoHeight: false,
autoWidth: false,
type: 'rectangle',
overridable: true
},
NodeStyles: {
enable: true,
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Edge: {
type: 'bezier',
overridable: true
}
});
//load json data
st.loadJSON(data);
st.compute();
//emulate a click on the root node.
st.onClick(st.root);
//create our extjs panel for the buttons
Ext.create(Ext.panel.Panel,{
title: "Test panel",
width: 300,
height: 100,
items: [
{
xtype: 'button',
text: 'Open/Close Menu',
menu: [
{text: 'button 1'},
{text: 'button 2'},
{text: 'button 3'},
{text: 'button 4'},
{text: 'button 5'},
{text: 'button 6'}
]
},
{
xtype: 'button',
text: 'Click to open an alert - a black square will appear',
handler: function(){
Ext.Msg.alert("Test","A black box should now be appearing where the menu button is.");
}
}
],
renderTo: Ext.getBody()
});
});
</script>
<div id="infovis" style="width: 300px; height: 300px; margin: auto; overflow: scroll; border: 1px solid black;"></div>
</body>
</html>
In the example above, take the following steps to recreate the problem:
1. Click on the "Open/Close Menu" button twice (once to open, once to close)
2. Click on the "Alert" button. A black box should appear in the position of the menu that we've just closed.
Does anyone else see this?
We had this exact same problem. It seems to be a (Windows only) Chrome bug relating to the the visibility: hidden css rule Ext uses by default to hide the dropdown.
A workaround is to change the css hide technique in the menu config:
{
...
menu: {
items: [
...
],
hideMode: 'display'
}
}
Im going thru the exact same thing with Ext js 4.0.1
Other browsers than Chrome behave as expected.
Thanks for the workaround.
To apply this fix to all menus, rather than having to set it individually, you can just override the Ext.menu.Menu class:
Ext.override(Ext.menu.Menu,{
hideMode: 'display'
});
This completely solved the problem for me, as there were actually a lot of menus affected by this.
Good day, I am extjs newbie, I am using extjs 3, I had problem with my layout,I have the tabpanel and inside of the tab 1 will be the viewport, and the tab 2 is just a simple content, but when i click tab2, the viewport doesnt disappear, supposed to be the viewport is only at tab 1 or first tab. Below are my code, Please help, what if there is something wrong with my codes.
var Tabs;
var chatUi;
var content = "centerpanel";
var viewport1 = new Ext.Viewport({
//id: 'chatUiLayout',
layout: 'border',
//renderTo : 'liveChatTextLiveHelp',
items: [{
width: 150,
region: 'east',
title: 'east'
}, {
region: 'center',
title: 'center'
}]
});
Tabs = new Ext.TabPanel({
id: 'liveChatTextLiveHelp',
renderTo: 'div-live-chat',
activeTab: 0,
//region: 'center',
//hieght: 200,
plain: true,
items: [{
title: 'Live help',
items: [ //viewport1
],
html: "<div id='" + content + "' class='90pers' ></div>"
}, {
title: 'Tab 2',
html: "tab 2 content"
}
],
scope: this,
listeners: {
afterrender: function () {
viewport1.render(content);
},
scope: this
}
});
Viewports are special containers that represent the entire browser window. They will always render themselves to the body, making them bad candidates for being inside something else. Instead of a viewport you should try a panel or container instead.
You are probably looking for a border layout inside tab 1, similar to Windows with Layouts example.
Viewport cannot be hidden as it is bound to the browser window.