In this StackBliz I have a Kendo for Angular dropdown list. When you open the dropdown, the popup shows seven items. I just want to show three items. So I set the height in popupSettings to 30, but Kendo is ignoring it. How to change the popup height?
#Component({
selector: 'my-app',
template: `
<kendo-dropdownlist
[data]="listItems"
[popupSettings]="{
width: 100,
height: 30 }">
</kendo-dropdownlist>
`
})
export class AppComponent {
public listItems: Array<string> = [];
ngOnInit(){
for(var i=1;i<=100;i++)
this.listItems.push('Item ' + i);
}
}
I found the answer here. You have to set the listHeight property.
<kendo-dropdownlist
[data]="listItems"
[popupSettings]="{
width: 100,
height: 30 }"
[listHeight]="500">
</kendo-dropdownlist>
You will see Kendo generate a div for the dropdown if you can inspect the elements on your browser.
<div unselectable="on" class="k-list-scroller" style="max-height: 200px;">
Change the max-height for class k-list-scroller
Related
I'm currently trying to save a PDF for a web application with many pages. I call the partial views into one main page and use KendoUI to save the DOM into the PDF. Because some of these pages are very long and are variant depending on user input, I need the data to display over multiple pages. Whenever forcePageBreak is not called, KendoUI naturally does this by displaying all the data over multiple pages. Although when I turn on forcePageBreak and set page breaks at the beginning of each Partial in the main page, each Partial will only display one page in the pdf, and the rest of the data is cut off.
Here is an example of the main page's code:
<div class="myCanvas" id="myCanvas">
<div class="page-break">#{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
<div class="page-break">#{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
<div class="page-break">#{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
<div class="page-break">#{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
<div class="page-break">#{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
<div class="page-break">#{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>
<script>
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.
The answer seems to be dive deeper for the lowest possible class that can have a page break before.
I generally solved this issue by putting the page breaks on the header classes within each Partial View. For example:
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-header",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
Where the logic of my code would be similar to:
<div class="main">
<div class="page-header>
Header
</div>
<div class="ContentContainer">
Content
</div>
</div>
It was weird because I had set the page breaks at the global level where the partials were being called and also at the local level where main was being called, but I needed to dive even deeper to the page-header items to get it to work.
Here is my example working properly
Step 1: All CDNs
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
Step 2: Add div to data div which you have created
<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>
Step 3: JS code
kendo.drawing.drawDOM("#downloadPDF", {
paperSize: "A4",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm"
},
scale: 0.8,
forcePageBreak: ".page-break"
})
.then(function(group) {
kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
I would like to use a kendo drop-down list, which has a fixed size since is constrained by other fields in the page, but when it shows the drop-down items of the list, the drop-down area should resize to the maximum length of the items. Sort of fixed width for the item displayed, but auto width for the drop down list.
Something like
|my choice | <-- fixed width displayed on the page
|next choice |
|previous choice | <-- dropdown area to select another item
|dummy |
Is this possible through CSS or drop-down list properties set through jQuery?
You can set the width of a DropDown List both using a CSS or using a method.
If the id of you DropDownList is my-dropdown then you should write:
Using CSS
#my-dropdown-list {
width: auto !important;
}
NOTE: We have appended -list to the original id. The "!important" is important since you want to overwrite original width definition.
Using a method
$("#my-dropdown").data("kendoDropDownList").list.width("auto");
In addition to use "auto" for getting the width automatically adjusted to the text, you can use a fixed width:
#my-dropdown-list {
width: 300px !important;
}
or:
$("#my-dropdown").data("kendoDropDownList").list.width(300);
The above answer didn't work for me. I have a the advantage of knowing that my dropdown is inside of a div.
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
I found that the span has the class k-dropdown so I added the CSS
.myDivClass span.k-dropdown {
width: 300px
}
What worked for me is to render an extra class on the base element:
<input .. class="ExtraLarge ..
Which produced:
<span style="" class="k-widget k-dropdown k-header ExtraLarge" ..
With this ExtraLarge class in place, this worked great in FireFox and Chrome:
span.k-dropdown.ExtraLarge
{
width:400px;
}
Using the following code to be the template of the kendo dropdownlist:
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
you will initiate the kendoDropDownList using jQuery as follows:
$("#myDropDown").kendoDropDownList().data("kendoDropDownList");
Now, to set this controller to take up the full width, what you have to do, is to set the width of the select element to 100%, or whatever is your desire.
e.g.:
<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>
OR, is a css file:
#myDropDown { width: 100% }
If the id of you DropDownList is my-dropdown then you should write:
#my-dropdown-list {
width: auto !important;
-moz-min-width: 120px;
-ms-min-width: 120px;
-o-min-width: 120px;
-webkit-min-width: 120px;
min-width: 120px;
/*max-width: 210px;*/
}
Read the explanation below.
http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width
I wanted to know if I its possible to create a right click context menu which is activated on jqGrid's header row and has ability to add column to right or left or the column in question or hide the current column (without using ui-multiselect).
Any code in this respect would greatly be appreciated.
I suggest that you use contextmenu plugin which you would find in the plugins/jquery.contextmenu.js of jqGrid. In the answer and in this one for example are described how it could be used inside of jqGrid body. With the following code you can use it in the column header too:
var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column").contextMenu('myMenu1', {
bindings: {
columns: function(trigger) {
var $th = $(trigger).closest("th");
if ($th.length > 0) {
alert("the header of the column '" + cm[$th[0].cellIndex].name +
"' was clicked");
}
}
},
// next settings
menuStyle: {
backgroundColor: '#fcfdfd',
border: '1px solid #a6c9e2',
maxWidth: '600px', // to be sure
width: '100%' // to have good width of the menu
},
itemHoverStyle: {
border: '1px solid #79b7e7',
color: '#1d5987',
backgroundColor: '#d0e5f5'
}
});
where menu myMenu1 are defined as
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 200px">
<li id="columns">
<span class="ui-icon ui-icon-calculator" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Choose columns</span>
</li>
</ul>
</div>
The demo demonstrate how it could be used:
I have two questions reagarding context menu for jqGrid:
I have an empty grid, and I want a context menu to appear when I click on the grid itself, or on the columns header, currently the context menu is only when I have rows inside the grid. So how can I do this?
I have another grid inside a dialog window:
$('#company_grid').contextMenu('grid_contextmenu', {
bindings: {
'add_row': function(t)
{
},
'delete_row': function(t)
{
}
});
$(function()
{
$( "#company" ).dialog(
{
autoOpen: false,
height: 500,
width: 900,
modal: true,
resizable: false,
open: function(event, ui)
{
$("#company").setGridWidth($(this).width()-2 );
$("#company").setGridHeight($(this).height()-100);
}
});
});
<div id="company">
<table id="company_grid"></table>
</div>
<div class="contextMenu" id="grid_contextmenu">
<ul>
<li id="add_row"> Add Row </li>
<li id="delete_row"> Delete Row </li>
</ul>
</div>
When the dialog is opened, I can't see the context menu. I realized that it appears behind the dialog. So what am I doing wrong? How can I add a context menu to the dialog grids?
I'm guessing that all the dialog boxes in jQuery are controlled by CSS.
Maybe you could try changing the z-index value of your context menu to make it pop-over your dialog ?