jqgrid add dialog have two buttons(submit and cancel). A message will be displayed when i click the cancel button. That message box have 3 buttons(yes, no and cancel). Now i want to remove the cancel button. any possibilities........?
Sorry for my bad english.
Thank you.
sample coding for jqgrid
<sjg:grid id="gridtable"
caption="Customer List"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="customerList"
rowNum="10"
autowidth="true"
editurl="%{editurl}"
editinline="false"
navigator="true"
navigatorAdd="true"
navigatorAddOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterAdd: true,
height: 275,
width: 600,
draggable: false,
resizable: false
}"
navigatorDelete="true"
navigatorEdit="true"
navigatorRefresh="true"
navigatorSearch="true"
navigatorEditOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterEdit: true,
height: 275,
width: 600,
draggable: false,
resizeable: false
}"
navigatorDeleteOptions="{ checkOnUpdate: true}"
navigatorViewOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
height: 225,
width: 620,
draggable: false,
resizeable: false
}"
navigatorSearchOptions="{
sopt:['eq','ne','lt','gt','in','ni','cn','nc'],
closeAfterSearch: true
}"
navigatorView="true"
rownumbers="true"
rowList="10,20,30"
viewrecords="true"
>
Thank you so much.
Here i am specifing that cancel button
how to remove this cancel button?
I need only yes and no buttons.
Using grid API how it can be possible i dont know but,using jquery you can hide this button in following way :
$("#gridtable #cNew).css({'display':'none'});
'#cNew' is id of that button or you can get id of Cancle button by right click on that button and select inspect element in mozila webbrowser or use firebug to get id of that button and then replace that id with #cNew.
I think you can apply it to each form add, edit, etc.
hide button cancel
onInitializeForm: function($form) {
$form.parent().find('#cData').hide();
}
or if you want hide button submit
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
},
Related
I am trying to add scrollbar to kendo witndow with fixed height but it is not worked.
Please help me , below are my code
var Employee= $('#EmpData');
Employee.kendoWindow(
{
title: "Employee Data",
width: "779px",
height: "700px",
animation: false,
resizable: false,
modal: true,
actions: [
"Minimize",
"Maximize",
"Close"
],
visible: true,
// scrollable: true
}).data('kendoWindow');
$('#EmpData').data('kendoWindow').center().open();
As if data is more than popup size then it cuts ,i need to show scrollbar to kendo window if data exceeds.
Please help me.
Thanks
When I add width to the edit modal in jqGrid, the parameters after it (i.e., add:false, closeAfterEdit: true, etc.) stop working. I've tried it in different places, and it doesn't work.
jQuery("#prodgrid").jqGrid('navGrid', '#pager', {width: 1000},{edit: true, add: false, del: false, search: false}, {closeAfterEdit: true}, {closeAfterAdd: true});
FYI:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
You use wrong options of navGrid. If you examine the documentation you will see that the position of the parameters which you use is wrong. The correct will be
$("#prodgrid").jqGrid('navGrid', '#pager',
{add: false, del: false, search: false},
{closeAfterEdit: true, width: 1000},
{closeAfterAdd: true, width: 1000});
(you can skip edit: true because it's already default value).
I see that you use free jqGrid. It makes specifying of jqGrid options easier. First of all you can skip '#pager'. In the case jqGrid will just use the pager which you already specified during creating of the grid. Seconds you can specify page: true in the option of the grid instead of usage pager: '#pager'. You will don't need to create empty <div id="pager"></div> in the case. By usage page: true free jqGrid will create the corresponding div automatically. Moreover the options of 'navGrid' are divided in independent parts: the navGrid option {edit: true, add: false, del: false, search: false} and the options of form editing: {closeAfterEdit: true, width: 1000} and {closeAfterAdd: true, width: 1000}. Free jqGrid allows to specify the options directly during creating the grid and then use simplified form of the call of navGrid:
$("#prodgrid").jqGrid({
// here there are all other standard option which you already use
pager: true,
navOptions: {add: false, del: false, search: false},
formEditing: {closeAfterEdit: true, closeAfterAdd: true, width: 1000}
}).jqGrid("navGrid");
You can read more about the style of coding the option of jqGrid here. I personally like much more named parameter as positioned parameter because everybody can better read the code.
I use free jqgrid 4.8.
I use the jqgrid inside a modal dialog.
When I try to use the delete button of the pager, all the dialogs are disabled.
http://jsfiddle.net/9ezy09ep
$(function ()
{
$("#Ecran").dialog(
{
dialogClass: 'Ecran',
autoOpen: false,
width: 500,
height:400,
modal: true,
open: function (event, ui) {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 480,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
del: true, add: false, edit: false,
beforeRefresh: function () {},
afterRefresh: function () {}},
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{}, // search options
{}
);
},
close:function () {}
});
});
Any ideas ? thanks
I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.
I recommend you to include the line
$.fn.jqm = false;
to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.
UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/
jqGrid should utilize ui-dialog class when it creates modal dialog.
you will have to modify jquery.jqGrid.min.js file.
As per version 5.0.0 ,
Just add ui-dialog class to follwing line,
modal: { modal: "ui-widget ui-widget-content ui-corner-all ",
e.g.
modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",
As per free jqGrid version,
Add ui-dialog class to following line,
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front",
...
e.g.
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
...
I have two panels. When I collapse the first one, the second does not fit the empty space. While if I collapse the second it works well.
this.firstpanel= new Ext.Panel( {
region: config.propertyRegion,
id: config.editorpropertytable,
border: true,
borderBody: false,
autoHeight: false,
autoScroll:true,
split: true,
collapsible: true,
height: 300, width: 600, minSize: minSize, maxSize: maxSize,
});
this.secondpanel= new Ext.Panel({
region: config.previewRegion,
id: Ext.id(),
autoScroll:false,
border: true,
borderBody: false,
collapsible: true,
split: true
});
I noticed that the arrow button for collapsing panels are different, but I don't why.
First panel collapsed
Second panel collapsed
In a BorderLayout, the collapsable space is always filled by the mandatory 'center' region.
I have to display an add modal form when the page loads. I do so thusly:
$('#lst_totals').jqGrid('editGridRow','new');
Problem is, I don't know how to set the navgrid when I call it in this way. I set the options on the add modal form in the navgrid like this:
// add options
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
},
But these properties are not set for the add modal form I called when the page loads. They only apply to add modal forms that are shown when the add button is clicked. How do I apply options to modal forms that are called from outside of the jqGrid?
Here's the solution. It's as simple as I knew it would be:
$('#lst_totals').jqGrid('editGridRow','new',
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
}
);
Basically, since I'm creating a new modal form that's not really part of the navgrid, I have to give it the properties I want it to have. Above, the 'editGridRow' accepts a third parameter {} which can contain these properties.