It seems Pager functionality is currently disabled for treegrid. But I would like to add some custom icons like export icon, refresh to the top pagination as shown below. Are there any other alternatives to achieve this functionality for treegrid as well. Thanks in advance...
First of all I would recommend you to read the answer which describe how to add toppager to the grid. You can do the same with tree grid.
The id of the toppager will be constructed from the grid id. If the grid id for example is "treegrid", then the id of the toppager will be "treegrid_toppager". The pager will hold tree parts: left, center and right. Because the toppager of the tree grid will be always empty you can save the place on the pager if you remove or hide the center part:
$('#treegrid_toppager_center').hide();
The next improvement in position of the texts in the navigator bar you can archive if you would include the text inside of <span> element which CSS styles you can define yourself. For example
$grid.jqGrid('navGrid', '#treegrid_toppager',
{add: false, edit: false, del: false, search: false,
refreshtext: '<span class="ui-pg-text">Refresh</span>'});
$grid.jqGrid('navButtonAdd', '#treegrid_toppager', {
caption: '<span class="ui-pg-text">Columns</span>',
buttonicon: "ui-icon-wrench",
onClickButton: function () {
this.jqGrid("columnChooser");
}
});
and
.ui-jqgrid-toppager .navtable .ui-pg-div .ui-pg-text {
position: relative;
top: 1px;
padding-right: 3px;
float: left;
}
Additionally I find better to include one more additional CSS definition
.ui-jqgrid-toppager .navtable {
padding-top: 1px;
padding-bottom: 0px;
}
which can a little improve the position of the buttons in the toppager.
The results you can see on the following demo:
Related
It is possible to make kendo template popup when add/edit in a full screen or maximize mode based on size of the screen?
I try using css, but still not perfectly fullscreen (contain scoll)
.k-widget.k-window {
width: 100%;
height: 100%;
}
.k-edit-form-container{
width: 100%;
}
Demo in Dojo
You can adjust popup window through editable.window field of kendoGrid. To make popup full screen you should call window.maximise() method.
$("#grid").kendoGrid({
editable: {
mode:"popup",
template: $("#template").html(),
window:{
open: function (e){
e.sender.maximize();
}
}
},
...
I had this kendo grid with popup editing here. How to setting Update/Cancel button and textbox size so it have a same size with k-window?
Here I provide a demo
You can tell Kendo how big the window is supposed to be, no need for some CSS or JavaScript: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.window
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "800px",
height: "400px"
}
},
Additionally, you have to set the width of the input elements to 100%. Make sure to put this declaration after you've loaded the CSS files from Kendo! Otherwise these changes will not be applied.
<style type="text/css">
.k-edit-form-container {
width: initial;
}
.k-edit-form-container input,
.k-edit-form-container textarea,
.k-edit-form-container .k-datepicker,
.k-edit-form-container .k-timepicker,
.k-edit-form-container .k-numerictextbox {
width: 100%;
}
</style>
When you zoom in AmCharts scroll bar, "Show all" button appears and overlays with link to AmCharts website. Is there a way to force AmCharts link or "Show all" button to be shown in left corner?
Found nothing in docs.
It's possible to hide "Show all" button by setting chart's zoomOutText property to empty string:
var chart = AmCharts.makeChart('chartdiv', {
type: 'serial',
zoomOutText: ''
...
});
and place your own custom button anywhere you wish:
HTML
<div class="container">
<div id="chartdiv"></div>
<button class="show-all-button">Show all</button>
</div>
CSS
.container {
position: relative;
...
}
#chartdiv {
position: relative;
width: 100%;
height: 100%;
}
.show-all-button {
position: absolute;
top: 15px;
left: 15px;
...
}
To make the button working add the following click event handler:
var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
chart.zoomOut();
});
This approach is useful when you need to add custom controls over your chart.
Indeed, there are no config options to move the "Show all" button.
However, you can set the position of branding link using creditsPosition
I.e.:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"creditsPosition": "bottom-left",
...
});
In my kendo mobile app I have some listviews that require more than one action. I need something like what is show in the Link Items & Detail Buttons demo but more flexible. In my case, I need to cover the following scenarios (all sections clickable):
[icon][text of the item]
[text of the item][icon]
[icon][text of the item][icon]
...where [icon] is some font icon.
I've started on a solution but before I go any further, I want some feedback to make sure I am not overlooking a better approach or something already built into Kendo.
Each "part" of the <LI> needs to perform a distinct action when clicked. To handle this, I have a click binding on the <UL>. I also have a data-command-name attribute on each element in the <LI> template so that I know what the user tapped/clicked.
I have put together a fiddle but jsFiddle is reformatting the HTML part when it loads (I think because of the template script tags). Once you load the fiddle please replace the HTML with the following to get it working:
HTML
<div id="itemsView" data-role="view" data-model="vm">
The red, silver and blue sections along with the X & Y are not part of the design, they are there just to make my intent more obvious.
<ul data-role="listview" data-bind="source: items, click: clickHandler"
data-template="itemsTemplate"></ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<div class = "left-column" data-command-name="left (red)" > X </div>
<div class="right-column" data-command-name="right (blue)">Y</div >
<div class = "content-column" data-command-name="content (silver)"> #=Name# </div>
</script>
</div>
CSS
div.left-column {
float: left;
width: 25px;
margin-top: -5px;
padding-top: 5px;
margin-left: -5px;
padding-left: 5px;
cursor: default;
background-color: red;
}
.content-column {
margin-top: -5px;
margin-left: 25px;
margin-bottom: 0;
margin-right: 25px;
padding-top: 5px;
cursor: default;
background-color: silver;
}
.right-column {
float: right;
width: 25px;
margin-top: -5px;
padding-top: 5px;
cursor: default;
background-color: blue;
}
JavaScript
var vm = kendo.observable({
items: [{
Selected: false,
Name: "Item1"
}, {
Selected: false,
Name: "Item2"
}, {
Selected: false,
Name: "Item2"
}],
clickHandler: function (e) {
var cmd = e.target.context.attributes["data-command-name"]
if (cmd) {
alert(cmd.value);
}
},
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide",
platform: 'android'
});
Here is the fiddle: http://jsfiddle.net/8Kydw/
So to summarize my questions:
1) Is there a better/built-in way of doing this?
2) If not, any tips on the CSS? For instance, why in Android is the height of the list items smaller than prior to my customization?
1) I think the strategy that you are using is completely fine and acceptable for Kendo UI Mobile.
2) Kendo UI Mobile applies some pretty specific styling in the way of line-height and a few other items that will affect how the list item is displayed if you then customize margin or padding with your own CSS. I wouldn't worry too much about it though.
Column contains long multiline texts which make row height too big.
I tried styles below based on Tony's answer in
http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/
but those do not limit row maximum height: Row height is still equal to by number of lines in column.
How to limit maximum height of row to some value? Text should not wrap (as it already is using jqGrid default settings) and remaining rows should not shown. (Whole text can examined in edit mode if edittype textarea is used).
jqgrid tr.jqgrow td {
max-height : 100px;
}
ui-jqgrid tr.jqgrow td {
max-height : 100px;
}
td {
max-height : 100px;
}
tr {
max-height : 100px;
}
You can't use max-height on td or tr elements, but you can place the multiline text inside of the <div> having the same style. To do this you can use for example the following custom formatter:
formatter: function(v) {
return '<div style="max-height: 100px">' + v + '</div>';
}
or place the <div style="max-height: 100px">...</div> inside of your JSON/XML data. As the result you will have something like
(I displayed tooltip during I made the screenshot to show that the data in the cell contain more lines as displayed in the grid)
See the corresponding demo here.
I know this is late, but you can use this CSS for ALL columns:
.ui-jqgrid tr.jqgrow td {
white-space:nowrap;
}
Or, for an individual column:
.no-wrap-col {
white-space: nowrap;
}
Then in your ColModel, on whichever column you want to prevent wrapping on, apply the class:
classes: "no-wrap-col"