Related
I'm using JqGrid with inline editing and i dont use navigation, pager or footer. I want to add empty row at the bottom to added. I mean empty row will be always there after editing an exsiting row, after adding new row.
I added row in loadComplete event, but i just adds empty row at beginning not anymore.
jQuery("#tableContents").jqGrid({
postData: { orderId: '139358' },
mtype: "POST",
url: "test.asmx/GetContents",
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
colModel: [
{
name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
},
{
name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
editrules: {
required: true
}
},
{
name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
editrules: {
number: true,
required: true
}
},
{
name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
//pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
regional: 'tr',
height : '100%',
caption: "Manipulating Array Data",
editurl: 'test.asmx/EditContent',
loadonce: true,
sortable: true,
//footerrow: true,
onSelectRow: function (rowid) {
var $self = $(this),
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
extraparam: { orderId: '139358', staffId : '111' },
aftersavefunc: function (rowid) {
alert("Saved");
}
});
},
loadComplete: function () {
var $self = $(this)
$self.jqGrid('addRowData', undefined, {});
}
});
How can we do that?
You try to use jqGrid in the way which is opposite to the standard behavior. It's very bad idea. You will have to write a lot of code and have minimal difference to the standard way.
The main problem is: jqGrid hold data inside of the grid. You try to add an empty row inside of the data which is not loaded from the server, which is not in editing mode (like addRow do for example) and which is not saved on the server. So you try to use the grid in the way contradicting to jqGrid logic. It sounds simple, but it is really bad and the implementation will be complex.
I would recommend you to follow the standard way. You will have clean and simple code and the most of the users can use the grid intuitive. For example you can do add navigator toolbar where you add "+"/"Add" button with respect of inlineNav. The user will intuitively understand what need be done to add new row. The difference whether the user clicks on empty row at the bottom of the grid or if the user clicks on "Add new row" button, existing also at the bottom of the grid, is very small. After the click on the button the new row will be added and the user can insert the data. By press of Enter the row will be saved and by press on Esc the empty row will be removed. The code will be simple and it will do almost the same what you try to implement now.
When do inline edit in jqgrid row, then it allows to do but, again click on another row then, it is not cancelling earlier row and both will remain in edit mode.
I need it to be cancel last one if user has clicked new row to edit as at single time, single row should be open for edit.
(if user click on next row to edit then, last row should be cancel out and new row only should open for edit).
Problem is here, it switch to the new row to edit but, "edit" and "cancel" button of last row remain as it is. Hence, simultaneously user can see two two row's edit, cancel buttons.
$("#SamplesGrdList").jqGrid({
url: '#Url.Action("ActionName", "Controller")/',
datatype: "json",
colNames: ['Category Name','ValueToChange','Edit'],
colModel: [
{ name: 'CategoryName', index: 'CategoryName', sortable: true, sorttype: 'text', width: 140, classes: 'bStyle' },
{
name: 'ValueToChange', index: 'ValueToChange', width: 82, align: "right", editable: true, editrules: { number: true, required: true, custom: true, custom_func: Deductions }, formatter: 'currency',
formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00', prefix: '$ ' },
editoptions: {
style: 'width:70px;', dataEvents: [
{
type: 'blur',
fn: function (e) {
CalculateDeductions($(this).val());// SOme DB Operation
}
}
]
}
},
{
name: 'act', index: 'act', width: 60, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: false,
delbutton: false,
onEdit: function (rowid) {
},
onSuccess: function (jqXHR) {
$("#SamplesGrdList").trigger('reloadGrid');
return true;
},
onError: function (rowid, jqXHR, textStatus) {
},
afterSave: function (rowid) {
},
afterRestore: function (rowid) {
$("#SamplesGrdList").trigger('reloadGrid');
}
}
}
],
rowNum: 10, rowList: [10, 20, 30],
sortname: 'CategoryName',
shrinkToFit: true,
sortable: true,
viewrecords: true,
sortorder: "desc",
footerrow: true,
width: '780',
height: '100%',
jsonReader:
{
root: 'List',
page: 'Page',
total: 'TotalPages',
records: 'TotalCount',
repeatitems: false,
id: 'Id'
},
editurl: '#Url.Action("ActionName", "ControllerName")'
});
Please guide how to resolve this so, at a time, single row is avaialble for edit/save/cancel.
NOTE: jqgrid version is Jquery.jqgrid-4.1.2.min.js
Thanks
I think that the only problem which you have: the usage of very old version jqGrid 4.1.2. I recommend you update to jqGrid 4.7 or free jqGrid 4.8.
Just try the demo for example. It uses formatter: "actions" which you need. You can verify that it works like you need.
I have a customer details where I am showing the customers bill status which is working fine,
Is it possible to rebind the grid once we loaded the data in grid for example:
when I am coming from another page how to apply search on the existing grid data and rebind it to grid.
Below is my colmodel and other properties which I am using but not working properly,
$("#BillDetails").jqGrid({
url: '../Handler.ashx,
datatype: "json",
colNames: [ 'S.No', 'Bill NO', 'Customer Name', 'Customer Type', 'Bill Date',Bill Status'],
colModel: [
{ name: 'SERIAL', sortable: false, search: true, stype: 'text', width: 40, hidden: false,
align: 'right', sorttype: 'int' },
{ name: 'BILL_NO', sortable: false, search: true, width: 80, hidden: false,
align: 'right',formatter: editLink,},
{ name: 'CUSTOMER_NAME', search: true, align: 'left', width: 150, aligh: 'left',
sortable: false },
{ name: 'CHECK_TYPE', align: 'left', width: 150, search: true, aligh: 'left',
sortable: false},
{ name: 'BILL_DATE', width: 85, sortable: false, search: true, align: 'center',
sorttype: 'date', formatter: "date", formatoptions: { newformat: 'd/m/Y' } },
{ name: 'BILL_STATUS', width: 90, align: 'left', search: true, stype: 'select',
searchoptions: { value: 'Pending:Pending;
On Hold:On Hold;Clear:Clear;Incompelete:InComplete,sortable: false } },
],
width: '980',
height: '450',
shrinkToFit: false,
sortable: true,
mtype: 'GET',
scrollbar: true,
sortname: 'BILL_NO',
sortorder: 'asc',
hidegrid: false,
loadonce: true,
ignoreCase: true,
rowNum: 50,
pager: '#Pager',
viewrecords: true,
// Search on page load from grid data
gridComplete: function () {
var searchFilter = "Clear"; // In this I will receive the the status from query string,
//for now i have provided the the hard core value to test
var gridData = $("#jQGridDemo").jqGrid('getGridParam', 'data');
console.log(gridData);
if (searchFilter != "") {
var grid = $("#BillDetails"), f;
f = { rules: [] };
f.rules.push({ field: "STATUS", op: "eq", data: searchFilter });
grid[0].p.search = true;
$("#BillDetails").setGridParam({ data: gridData, postData: { filters: f },
datatype: "local", });
}
}
});
If you want to reload jqGrid when coming from another page with search parameters you could use postData property of jqGrid.
Something like this:
$("#BillDetails").jqGrid({
url: '../Handler.ashx',
datatype: "json",
mtype: 'GET',
postData:
{
Page: 'Dashboard',
strUserID: strUserID,
}
You can populate this property with js or on server side as you need.
UPDATE
You also can use setGridParam method of jqgrid:
$("#BillDetails").jqGrid('setGridParam',
{
postData: {
Page: 'Dashboard',
strUserID: strUserID,
}
});
$("#BillDetails").trigger("reloadGrid");
But as i understand this way you also just add values to postData property.
Also you can try it this way:
$("#BillDetails").trigger('reloadGrid', [{page:1}]);
You can pass there your new params as on grid init.
In my jqGrid I want to pass in 5 rows from my model and display 3 of them in the grid but have all 5 show up in the edit and add popup window that jqGrid generates. I know I can add the hidden: true attribute in the colModel settings to prevent it from showing up but this also hides it from the popup window. Is there some way of hiding columns from the grid but show it when adding or editing data?
My Grid code:
<script type="text/javascript">
$( document ).ready( function ()
{
$( '#Sections' ).jqGrid( {
url: '#Url.Action("GetData")',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', 'RouteName', 'Title', 'File', 'Description'],
colModel: [
{ name: 'ID', index: 'ID', width: 10, sorttype: 'int' },
{ name: 'RouteName', index: 'RouteName', width: 50, editable: true, edittype: 'text'},
{ name: 'Title', index: 'Title' },
{ name: 'File', index: 'File', hidden: true },
{ name: 'Description', index: 'Description', hidden: true }
],
autowidth: true,
height: '100%',
pager: $( '#SectionsPager' ),
sortname: 'ID',
viewrecords: true,
loadonce: true,
ignoreCase: true,
multiSort: true,
} );
$( '#Sections' ).jqGrid( 'navGrid', '#SectionsPager',
//enabling buttons
{ add: true, del: false, edit: true, search: true },
//add options
{ width: 'auto' },
//edit options
{ width: 'auto' },
//delete options
{}
);
} );
</script>
Via Oleg's answer at
Sending additional parameters to editurl on JQgrid
hidden: true, editable: true, editrules: { edithidden: true}, hidedlg: true
The editrules: { edithidden: true} section will "turn on" your column when editing.
u can use beforeShowForm in your add/edit and make it hidden or not
beforeShowForm: function(form) {
$("#tr_columnname").hide();
$("#tr_columnname").show();
}
I've following Grid to display data, now when I want to add new record it gives the error 'NO URL IS SET'
$(document).ready(function () {
$('#PRGrid').jqGrid({
//url from wich data should be requested
url: '#Url.Action("BindData")?FillType=' + getFillType(),
//event for inline edit
onSelectRow: function (currentSelectedRow) {
if (currentSelectedRow && currentSelectedRow != $.lastSelectedRow) {
//save changes in row
$('#PRGrid').jqGrid('saveRow', $.lastSelectedRow, false);
$.lastSelectedRow = currentSelectedRow;
}
//trigger inline edit for row
},
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Code', 'Name', 'No_Rooms', 'Dept_Code', 'Total_Items'],
//columns model
colModel: [
{ name: 'Code', index: 'Code', align: 'left', width: '120px', editable: true, edittype: 'select', editoptions: { maxlength: 25, dataUrl: '#Url.Action("GetRooms")',
dataEvents: [{
type: 'change', fn: function (e) {
var ret = $.ajax({
url: '#Url.Action("selectRoom")?id=' + $(this).val(),
async: false,
success: function (ret) {
$('#Name').val(ret.Name);
$('#No_Rooms').val(ret.qty);
$('#Dept_Code').val(ret.DeptCode);
$('#Total_Items').val(ret.Total_Items);}
});}
}]
}},
{ name: 'Name', index: 'Name', align: 'left', formatter: "text", width: '185px', editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'No_Rooms', index: 'No_Rooms', align: 'left', formatter: "text", width: '102px', integer: true, editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'Dept_Code', index: 'Dept_Code', align: 'left', formatter: "text", width: '78px', editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'Total_Items', index: 'Total_Items', align: 'left', formatter: "text", width: '82px', integer: true, editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
],
//pager for grid
pager: $('#PRGridPager'),
//number of rows per page
rowNum: 5,
//initial sorting column
sortname: 'Code',
//initial sorting direction
sortorder: 'asc',
recreateForm:true,
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
$('#PRGrid').jqGrid('navGrid', '#PRGridPager',
{ add: true, del: true, edit:false, search: true },
{width: '330', url:'#Url.Action("InsertPRGridRecord")', closeAfterAdd: true },
{width: '330', url:'#Url.Action("DeleteGridRecord")'});
var dialogPosition = $(this).offset();
Problem arrise when I want to add or delete the record from the grid,
Here I've defined both the methods InsertPRGridRecord() and DeleteGridRecord(), but it gives the same error 'NO URL IS SET' at the time of submitting the data on Add Record or Delete Record dialog.
I think the problem exist because you use incorrect the parameters of navGrid. Your current code uses '#Url.Action("DeleteGridRecord")' as URL of "Add" and '#Url.Action("InsertPRGridRecord")' as URL of "Edit". The URL of "Delete" is not specified.