How can i change the Caption "Edit Record" to "Edit Project Record"?
Thank you.
You can use editCaption or addCaption option of editGridRow. Default value of the options are defined in grid.locale-en.js
Dynamically:
beforeShowForm: function (formid) {
var mytitle = "My text to show"; // or whatever you want
$(".ui-jqdialog-title","#edithd"+mygridid).html(mytitle);
}
As part of the setup:
editGridRow(id,{editCaption: 'Edit caption', ...
Use addCaption property to change caption of addForm and use editCaption property to change caption of editForm.
jQuery('#gridId').jqGrid('navGrid', '#pagerId',
{ //navbar options
edit: true,
editicon: 'fa fa-pencil blue',
add: false,
addicon: 'fa fa-plus-circle purple',
del: false,
delicon: 'fa fa-trash-o red',
search: false,
searchicon: 'fa fa-search orange',
refresh: true,
refreshicon: 'fa fa-refresh green',
view: false,
viewicon: 'fa fa-search-plus grey'
},
{
editCaption:'Edit Project Record'
}, //Edit
{
}, //Add
{
addCaption:'Add Project Record'
},
{},
{});
Related
I am using JQGrid with Spring + Hibernate in my web application. I have created a functionality wherein JQGrid opens an edit dialog for editing a selected row, wherein I have created a custom button. When a user clicks this custom button, a dialog box opens and user selects a row from this dialog. When user clicks 'Ok' control moves back to JQGrid Edit dialog.
I just want the selected value from the dialog for a field to be copied in the field in JQgrid edit dialog. I am able to get the value from the dialog in a global javascript variable, but not able to set it in the JQGrid edit dialog field. Please help me doing this.
Relevent code from my javascript file is pasted below:
function JQDialog(title, contentUrl, params) {
var dialog1 = $("#codesdlg").dialog(
{
autoOpen: false,
modal: true,
title: title,
zIndex: 1000,
close: function (e, ui) { dialog1.remove(); },
buttons: { "Ok": function ()
{
alert("Selected A/c Code: " + selAccode + ' - '+selAcDescr);
$('#TblGrid_list').$('#tr_acccode').val(selAccode);
dialog1.dialog("close"); }
}
});
dialog1.load(contentUrl, function () {
dialog1.dialog('open');
});
// dialog1.load(contentUrl).dialog('open');
};
$("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:true,refresh:false},
{
recreateForm: true, dataheight: 375, width: 400, height: 450, zIndex:75,
beforeShowForm: function(form) {$('#tr_ccode',form).hide();
$('Select<span class="ui-icon ui-icon-search"></span>')
.click(function(rowid, iRow, iCol, cellValue, e) {
JQDialog("Test Dialog","../acctmstmgmt/opendlg",rowid);
// var rowData = jQuery(this).getRowData(rowid);
// rowData.acccode = selAccode;
// $('#list').jqGrid('setRowData', rowid, rowData);
// $("#list").jqGrid("setCell", rowid, "acccode", selAccode);
// alert(selAccode);
// $('#trv_acccode').val(selAccode);
// window.open("../acctmstmgmt/opendlg", 'Dialog', 'width=700,height=300', top=500, left=500 );
}).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.appendTo("#tr_acccode");
}
},
{
recreateForm: true, dataheight: 375, width: 400, height: 450, zIndex:75,
beforeShowForm: function(form) {$('#tr_ccode',form).show();
$('Select<span class="ui-icon ui-icon-search"></span>')
.click(function() {
alert('Clicked');
}).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.appendTo("#tr_acccode");
}
},
{
},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
});
});
$.jgrid.edit = {
addCaption: "Add Codes Master",
editCaption: "Edit Codes Master",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
bYes : "Yes",
bNo : "No",
bExit : "Cancel",
closeAfterAdd:true,
closeAfterEdit:true,
reloadAfterSubmit:true,
modal:true,
msg: {
required: "is mandatory or required",
number: "is a number field. Enter a valid number",
minValue: "should not be less than ",
maxValue: "should not be more than "
},
errorTextFormat: function (response) {
if (response.status !== 200) {
return '<div style="overflow-y: scroll;">'+
"Error encountered while processing. Please check the accuracy of data entered.-" + response.status + " "+response.responseText
+ '</div>';
}
},
I have resolved the issue with following code
simply placed following code in the "Ok" button function
$('#acccode').val(selAccode);
here acccode is colModel field and selAcccode is global javascript variable from where value is placed in the edit form field.
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 an MVVM Grid binded to the 'LabsViewVM' ViewModel, shown below.
Column commands 'activate', 'suspend', 'abolish' are binded through the 'click' event to the LabsViewVM's transitLab method/handler, which executes just fine.
<div id="labs_view"
data-role="grid"
data-bind="source: labs, visible: isVisible, events: {edit: createLab, dataBound: dataBound, dataBinding: dataBinding}"
data-detail-init="LabsViewVM.detailInit"
data-detail-template= 'lab_details_template'
data-selectable="row"
data-scrollable= "true"
data-resizable= "true"
data-sortable= "{'allowUnsort': false}"
data-pageable="{ 'pageSizes': [5, 10, 15, 20, 25, 30, 50],
'messages': { 'display': '{0}-{1} από {2} Διατάξεις Η/Υ',
'empty': 'Δεν βρέθηκαν Διατάξεις Η/Υ',
'itemsPerPage': 'Διατάξεις Η/Υ ανά σελίδα',
'first': 'μετάβαση στην πρώτη σελίδα',
'previous': 'μετάβαση στην προηγούμενη σελίδα',
'next': 'μετάβαση στην επόμενη σελίδα',
'last': 'μετάβαση στην τελευταία σελίδα' }}"
data-editable="{ 'mode' : 'popup', 'template': $('#lab_create_template').html()}"
data-toolbar="[{ 'template' : $('#lab_toolbar_template_labs_view').html() }]"
data-columns="[{ 'field': 'lab_id', 'title':'Κωδικός Διάταξης Η/Υ', 'width':'65px', 'hidden' : true},
{ 'field': 'lab_name', 'title':'Ονομασία', 'width':'440px'},
{ 'field': 'lab_type', 'title':'Τύπος', 'width':'150px', 'hidden' : true},
{ 'field': 'lab_state', 'title':'Λειτουργική Κατάσταση', 'width':'150px'},
{ 'field': 'rating', 'title':'Αξιολόγηση', 'template' : $('#labs_view_rating_column_template').html(), 'width':'85px'},
{ 'field': 'positioning', 'title':'Τοποθεσία', 'width':'180px', 'hidden' : true},
{ 'field': 'lab_special_name', 'title':'Ειδική Ονομασία', 'width':'180px', 'hidden' : true},
{ 'field': 'creation_date', 'title':'Ημερομηνία Δημιουργίας', 'width':'150px', 'hidden' : true},
{ 'field': 'last_updated', 'title':'Τελευταία Ενημέρωση', 'width':'150px'},
{ 'field': 'created_by', 'title':'Δημιουργία από', 'width':'130px', 'hidden' : true},
{ 'command': [{'text':'Ενεργοποίηση', 'click':LabsViewVM.transitLab, 'name':'activate'},
{'text':'Αναστολή', 'click':LabsViewVM.transitLab, 'name':'suspend', },
{'text':'Κατάργηση', 'click':LabsViewVM.transitLab, 'name':'abolish'}],
'title': 'Ενέργειες', 'width':'500px', 'hidden': LabsViewVM.hideLabTransitColumn() }
]">
</div>
var LabsViewVM = kendo.observable({
transitLab: function(e){
e.preventDefault();
var parent_grid = $(e.delegateTarget).data("kendoGrid");
var transition_dialog = $("#transition_dialog").kendoWindow({
modal: true,
visible: false,
resizable: false,
width: 500,
pinned:true,
open: function(){lots of code...}
}).data("kendoWindow");
var transitTemplate = kendo.template($("#lab_transit_template").html());
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
transition_dialog.content(transitTemplate(dataItem));
transition_dialog.center().open();
}
});
I'm quoting from https://www.packtpub.com/books/content/kendo-mvvm-framework, some information for the click property just to stress the way kendo differentiates its click event from the traditional one.
"The click property binds the click event of a button to a function inside of the View-Model. It is a shortcut to the events binding that we will see later. Unlike a traditional click event wire-up, the Kendo UI framework will pass context data to the event handler to allow for a richer event-handling experience. For example, when a click event is bound within a row template, the event argument passed to the event handler will have access to the item from the source collection. This allows the event handler to operate against that Model data directly without any further DOM exploration and keeps all of the observable functionality in place."
Having that in mind, I was able to access the parent grid, inside transitLab, through the event parameter 'e'.
I then had to change my implementation and use a kendo template for the column commands, because I needed to add some logic to the appearance of the command buttons.
So i replaced
{ 'command': [{'text':'Ενεργοποίηση', 'click':LabsViewVM.transitLab, 'name':'activate'},
{'text':'Αναστολή', 'click':LabsViewVM.transitLab, 'name':'suspend', },
{'text':'Κατάργηση', 'click':LabsViewVM.transitLab, 'name':'abolish'}],
'title': 'Ενέργειες', 'width':'500px', 'hidden': LabsViewVM.hideLabTransitColumn() }
with
{ 'command': [{'name':'commands', 'template': $('#labs_grid_command_column_template').html()}], 'title': 'Ενέργειες', 'width':'270px' }
and template :
<script id="labs_grid_command_column_template" type="text/x-kendo-template">
#if( some condition ){#
<a class="k-button k-button-icontext k-grid-activate" href="\#" data-bind="click: transitLab"><i class="fa fa-check"></i> Ενεργοποίηση </a>
<a class="k-button k-button-icontext k-grid-suspend" href="\#" data-bind="click: transitLab"><i class="fa fa-clock-o"></i> Αναστολή </a>
<a class="k-button k-button-icontext k-grid-abolish" href="\#" data-bind="click: transitLab"><i class="fa fa-ban"></i> Κατάργηση </a>
#}#
</script>
but it doesn't work.
My code crashes inside transitLab handler, because its event
parameter 'e' does not get populated with the same context data as before.
For example e.delegateTarget in the first case points to the grid, whereas in the second case points to the command button itself.
I don't get it. Shouldn't these two implementations have the same effect?? Please help!
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();
},
Can we change the default action of the "edit selected row" button?
Here is my code for the grid
jQuery("#detFlex62_1").jqGrid({
url: root + mod + '/detaillistview',
datatype: "clientSide",
colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '],
colModel:[
{name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true,delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100},
{name:'company_id',index:'company_id', width:100,hidden:true},
{name:'company_access_id',index:'company_access_id', width:100,hidden:true}
],
width: $('.body').width()-40,
height: 120,
pager: '#pagerFlex62_1',
sortname: 'user_id',
sortorder: "desc",
editurl: root + mod + '/detailpost',
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
activedf = "#detFlex62_1";
}
});
jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1});
I know I should put something in the editOptions part of the code. Right now I only put reloadAfterSubmit:false. What is the option to execute our own custom function ?
If you need just calling custom function when you press 'Edit' button in navigation bar, your navgrid should look like this:
jQuery("#detFlex62_1").jqGrid('navGrid', "#mainGridNavi", { edit: true, add: false, del: false, editfunc: function() { alert('test'); }})
Regards.