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();
}
}
},
...
Related
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>
How can I hide paging in kendo ui listview ? I mean bottom page number and navigation do't show
Just don't add a pager or set a page size in the datasource. Then if you want it to scroll, set a height and the overflow:
var dataSource = new kendo.data.DataSource({
data: products,
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html())
});
#listView {
height: 400px;
overflow-y: auto;
}
DEMO
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",
...
});
I have kendo window its showing vertical and horizontal scrollbar both on grid, how i can just implement horizontal scrollbar and disable vertical , any suggetion.
code below
CONFIG.JS
sortable: true,
pageable: {
previousNext: false,
pageSizes: false
},
scrollable: true,
filterable: true,
To remove vertical scrollbar, you have to change the CSS on the Kendo UI Grid.
Replace #GridId with your grid id.
...
#GridID .k-grid-header
{
padding: 0 !important;
}
#GridID .k-grid-content
{
overflow-y: visible;
}
...
If you want to hide the vertical scroll bar on a kendo grid you can try this.
$("#grid .k-grid-content").css({
"overflow-y": "hidden"
});
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: