jqGrid is created in web page. If page width is decreased, rightmost columns are no more accessible.
How to add horizontal scrollbar to jqGrid so that if page width is small, jqGrid can scrolled
horizontally to allow access to all columns ?
grid.jqGrid({
url: '<%= ResolveUrl("~/Grid/GetData?_entity=Strings")%>',
datatype: "json",
mtype: 'POST',
scroll: 1,
autoencode: true,
height: 350,
autowidth: true,
You can try a similar approach but in this case you'll make use of the grid's scrollbars instead of the div overflow.
The idea is to resize the grid itself causing it to show scrollbars if its bouderies are smaller than its content. For this to work correctly the columns must have the option fixed:true otherwise they will resize themselfs to fit the grid's width.
Declare the DOM as follows:
<div id="grid1container" style="width: 100%;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
Then add the javascrip code to the page:
$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
$('#grid1container').height($(window).height() - 55);
$('#grid1').jqGrid()
.setGridWidth($('#grid1container').width() - 2)
.setGridHeight($('#grid1container').height());
}
Here I'm manipulating the grid's height too, if you don't want it just remove the setGridHeight line.
I've found this solution but its not perfec as in FF4 the window stops reporting width resize bellow 535px... couldn't figure out why.
My idea was to wrap the grid inside a DIV and set it to overflow: auto; width: 100%
<div id="grid1container" style="width: 100%; overflow: auto;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
Related
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");
So I've been trying to apply the plugin to the Body Element and for some reason it just doesn't work..
Things I've tried:
$(function() {
$('body, html').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
$(function() {
$('#body').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
Does anyone know what Im doing wrong ?
Thanks in advance for answering
"What If I dont have control of the body tag ? and Im embed a template into a 3rd party site? so the body has no id tag it only has view-source:avatars.imvu.com/LadyKonstantine"
Since you need to apply slim scroll on body you have to use the body selector for jQuery. The code will be like this :
<script type="text/javascript">
$(function(){
$("body").slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
</script>
Remember these
Make sure you have installed both jQuery and slimScroll plugin.
Scroll will be visible if your body have height above 100%
If you would like to use $("#body") instead of $("body") don't forget to add
<body id="body">
More Details
Click here! to read more about slim scroll.
Attaching slimScroll directly to Body tag is not a preffered solution in my view. Try it and you will find the slimScroll wraps your BODY tag inside it's own DIV tag; at least I found it that way when I attempted to attached slimScroll to the BODY element. As a result, you will find the HTML of your page is a complete mess. The sequence of tags will be HEAD - slimScrollDiv - BODY. Instead, I suggest to have a wrapper DIV inside BODY immediately after you open BODY tag and then attach slimScroll to this wrapper DIV.
SlimScroll only works on div element. To achieve this, add a main wrapper just after the opening body tag. In this case I will call it:
In the HTML:
<div id="body"></div>
Then calculate the viewport height, not the HTML, document height. Once done, pass this value to the height of the slimscroll plugin. Example:
In the JS:
var viewportHeight= $(window).height();
$('#body').slimScroll({
height: viewportHeight+'px',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
You can also use the new CSS value of vh to compute the height of slimscroll. Example:
$('#body').slimScroll({
height: '100vh',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
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:
According the the jqGrid documentation, I should be able to place the pager above or below the jqGrid by moving the pager div. Unfortunately, the pager always renders below the grid.
<div id="pager"></div>
<table id="list">
<tr>
<td />
</tr>
</table>
The jqGrid configuration (related to the pager) looks like:
pager: '#pager',
pginput: false,
pgbuttons: false,
Any suggestions?
You should use toppager:true jqGrid option instead. You don't need define <div id="pager"></div> and use pager: '#pager' parameter. The id of the pager from the top of jqGrid will be "list_toppager" (id of the table element appended with "_toppager").
If you want to add navigator you can use
$("#list").jqGrid('navGrid','#list_toppager');
If you use define <div id="pager"></div> and use pager: '#pager' parameter you will have two pager: one with id="list_toppager" on top of the grid and anothe with id="pager" on the bottom. If you want use both top and bottom pager you can use
$("#list").jqGrid('navGrid','#pager',{cloneToTop:true});
and then move or remove (see another answer for more details and the demo example). You can also very easy move buttons from one toolbar to the other using jQuery.insertAfter function (see here).
use a $ append. the html above table is like this
<div id="export"></div>
add the id and use a promise().done(): "exportButton"
$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" })
.promise().done(function() {
//reposition export button
$("#export").append($("#exportButton"));
$("#exportButton").addClass("pull-right").show();
});