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();
});
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");
I am use Jqgrid.
In which i use inine nav for add new rows.
My Inline nav code
jQuery("#list").jqGrid('inlineNav','#Pager',
{
editParams : {
extraparam : {
extraParamId : function() {
return allExtraId;
}
}
}
});
So my Question is that when i am use inlineNav so this code navGrid is require or not
jQuery("#list").jqGrid('navGrid','#Pager', {
edit : false,
add : false
});
Please Reply....
Thanks in Advance..
The call of navGrid is really required before calling of inlineNav. The reason is that the pager creates per default only three parts: left, center and right. The parts as as <td> elements of the row of table in the pager. For example if you don't call navGrid you will have empty left part of the pager like below:
<td align="left" id="pager_left"></td>
If you call navGrid for example in the form
$("#grid").jqGrid("navGrid", "#pager",
{add: false, edit: false, del: false, search: false, refresh: false});
the left part of the pager will be changed to
<td align="left" id="pager_left">
<table class="ui-pg-table navtable"
style="float: left; table-layout: auto;"
border="0" cellspacing="0" cellpadding="0">
<tbody><tr></tr></tbody>
</table>
</td>
The current implementation of inlineNav just uses navButtonAdd to add additional buttons to the navigator which must be created before. How you will see from the line of code the method navButtonAdd uses $(".navtable", "#pager") to find the navigator table inside of the pager. Only if the navigator will be found the method navButtonAdd add additional buttons inside of it.
So you really need first create the navigator bar in the pager before you call inlineNav.
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:
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>
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 ?