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.
Related
I used fancybox v2.1.5.
I have a layout_popup used to load content of these fancyboxs. Content of two fancyboxs is two view files in CodeIgniter.
Step 1: From page I have a button to popup the first fancybox (type iframe).
Step 2: From the first fancybox, I have a link to popup the second fancybox (type iframe).
I finished step 1.
Please show me how to execute step 2!
Code layout_popup:
<a id="addmore" class="hand-pointer" onclick="add_more();">Add more product...</a>
<script type="text/javascript">
function CreateFancyBox(selector, url, width, height) {
$(selector).fancybox({
'href': url,
'titleShow' : false,
'titlePosition' : 'none',
'openEffect' : 'none',
'closeEffect' : 'none',
'openSpeed' : 'fast',
'type' : 'iframe',
'padding' : 0,
'preload' : true,
'width' : width,
'height' : height,
'fitToView' : false,
'autoSize' : false,
});
}
function add_more() {
var url = base_url + 'ctl_product/add_more_product';
CreateFancyBox('a#addmore', url, '50%', 205);
}</script>
From here, I click "Add more product...", popup first fancybox displays, content of first fancybox (from a view file):
<div style="background-color: white;">
<form id="frmAddMoreProd" method="post" action="">
<table id="tblAddMoreProd" cellpadding="0" cellspacing="10" width="100%" border="0">
<tr><th><h3 style="margin-top: 0px;">Add new product</h3></th></tr>
<tr>
<td>Fill Product Name</td>
<td><input class="input-short" style="width: 250px;" type="text" id="prodname" /></td>
</tr>
<tr>
<td></td>
<td class="t-right">
Cancel
<a id="add_next" class="b-next hand-pointer">Next</a>
</td>
</tr>
</table>
</form>
</div>
I want when I click link "Next" inside first fancybox, then popup the second fancybox showed. Code contain the content of the second fancybox in another view file, its code is still inside the div same as the first fancybox.
How must I do?
I try to insert js script the same as script in layout_popup into the first fancybox, but I do not get any results.
The view you want to open in the iframe is actually a method inside a controller. You got the first step by building a method. For the second (iframe) step you just build another method and call the second method from the first one. I hope I said that in an understandable way :D
Here is an example:
<?php if (!defined('BASEPATH')) die ('No direct script access allowed!');
class Custom extends CI_Controller
{
function first_method() {
// my code
// ...
// echo the first view file
}
function second_method() {
// my code
// ...
// echo the second view file
}
}
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 ?
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();
});