Related
I am working in a Jqgrid and have encountered a problem. I have looked at many examples and read alot of documentation but can't seem to determine why only 1 search option appears in the column header as opposed to the others such as "ge" "le" "eq" etc?
This is my code:
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status'],
colModel: [
{ name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", searchoptions: {sopt: ["ge","le","eq"]}, sortable: true},
{ name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
{ name: 'ShortAddress', index: 'ShortAddress', width: 200, align: "center", search:true, stype: 'text', searchoptions: {sopt: ["cn","ge","le","eq"]}, sortable: true},
{ name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
{ name: 'SchemeName', index: 'SchemeName', width: 80, align: "center", stype: 'text', sortable: true },
{name: 'PropertyType',width: 80, align: "center",},
{ name: 'TenureType', index: 'TenureType', width: 80, align: "center", sortable: true },
{ name: 'Status', index: 'Status', width: 75, align: "center", sortable: true },
],
beforeProcessing: function (data) {
//Create the filters
getDropDownValues(data, 'PropertyType')
getDropDownValues(data, 'TenureType')
getDropDownValues(data, 'Status')
$(this).jqGrid('destroyFilterToolbar')
.jqGrid('filterToolbar', {
stringResult: true,
searchOperators: true
});
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
jQuery('#jQGridDemo').jqGrid('editRow',id,true);
lastsel2=id;
}
},
height: 'auto',
width: 'auto',
rowNum: 30,
editable: true,
mtype: 'GET',
loadonce: true,
rowList: [30, 40, 50],
pager: '#jQGridDemoPager',
sortname: 'PropertyId',
viewrecords: true,
sortorder: 'desc',
caption: "Property Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
});
Experts,
I need horizontal scrollbar in my JQgrid. The scrollbar is visible but it does not work as the columns are getting wrapped. I do not want wrapping and allow user to scroll horizontally. I tried everything found on google but in vain. Going forward the number of columns would increase. Please help.
$("#test1").jqGrid({
url: hostPath + '/test/test',
postData: {
modelDataRequest: window.ModelPart
},
datatype: 'json',
mtype: 'Post',
height: 'auto',
colNames: ['Col1', 'Col2','col3','col4','col5', 'col6', 'col7','col8', 'col9', 'col10', 'col11', 'col12'],
colModel: [
{name: 'col1', index: 'col1', width: '150px', search: true, align: 'left'},
{name: 'col2', index: 'col2', width: '150px', search: true, align: 'left'},
{name: 'col3', index: 'col3', width: '150px', search: true, align: 'left'},
{name: 'col4', index: 'col4', width: '150px', search: true, align: 'left'},
{name: 'col5', index: 'col5', width: '150px', search: true, align: 'left'},
{name: 'col6', index: 'col6', width: '150px', search: true, align: 'left'},
{name: 'col7', index: 'col7', width: '150px', search: true, align: 'left'},
{name: 'col8', index: 'col8', width: '150px', search: true, align: 'left'},
{name: 'col9', index: 'col9', width: '150px', search: true, align: 'left'},
{name: 'col10', index: 'col10', width: '150px', search: true, align: 'left'},
{name: 'col11', index: 'col11', width: '150px', search: true, align: 'left'},
{name: 'col12', index: 'col12', width: '150px', search: true, align: 'left'},
],
gridview: true,
loadOnce: true,
sortable: true,
shrinkToFit: false,
//search: true,
pager: '#Pager',
jsonReader: { cell: "" },
rowNum: 50,
rowList: [10, 20, 50, 100, 500, 1000],
viewrecords: true,
emptyrecords: 'No record(s) to display',
caption: "Search Results",
altRows: true,
altclass: 'jqGridAltRow',
loadComplete: function () {
if ($(this).getGridParam("records") == 0) {
$(this).parents('div.ui-jqgrid-div').css("max-height", "0px");
$(this).html("<div style='padding:6px;background:#D8D8D8'>No records found</div>");
}
else {
$(this).parents('div.ui-jqgrid-div').css("max-height", "450px");
}
$(this).parents('div.ui-jqgrid-div').css("max-width", "100%");
},
gridComplete: function () {
$('#recordsCount').text($('#test1').getGridParam('records'));
},
},
{
closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: true, multipleGroup: true, showQuery: true,
sopt: ['cn', 'eq'],
defaultSearch: 'cn'
})
I am trying to catch the moment when the grid is reloaded ( grid.trigger('reloadGrid') ) so that I can scroll it to the position needed. What happens at the moment is when I scroll it down it fires the event on every ajax call (like load more rows).
I tried using different events, which one is the right?
The code is simple initialization, nothing special here
jQuery("#filtergrid").jqGrid({
scroll:true,
scrollrows:true,
datatype: 'json',
url: '/bo/filter/index.php?func=get-list',
mtype: 'POST',
colNames:[
'ID',
'Title',
'Domain',
'Random',
'Men',
'Women',
'Snails',
'Min Age',
'Max Age',
'Read Days',
'Click Days',
'Join Days',
'Master',
'<img src="/assets/duplicate.gif">'
],
colModel :[
{name:'flt_id', index:'flt_id', width:50, key:true, search: false, key: true, fixed: true},
{name:'flt_title', index:'flt_title', width:215, fixed: true, formatter: formatName},
{name:'dmn_name', index:'dmn_name', width:220, fixed: true},
{name:'is_random', index:'is_random', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_man', index:'is_man', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_woman', index:'is_woman', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_snals', index:'is_snals', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'min_age', index:'min_age', search: false, width:53, fixed: true, align: 'center', sortable: false},
{name:'max_age', index:'max_age', search: false, width:58, fixed: true, align: 'center', sortable: false},
{name:'read_days', index:'read_days', width:60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'click_days', index:'click_days', width: 60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'join_days', index:'join_days', width:58, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'flt_master', index:'flt_master', width:50, fixed: true, search: false, formatter: stsMasterFormatter, align: 'center', sortable: false},
{name:'editlink', index:'editlink', width:20, fixed: true, formatter: formatEditImg, search: false}
],
lastSel: null,
pager: '#pager',
rowNum: 150,
rowList: [150],
sortname: 'dmn_name',
height: 320,
autowidth:false,
gridview: true,
sortorder: 'asc',
viewrecords: true,
caption: 'Filters',
footerrow : false,
userDataOnFooter : false,
altRows : true,
//postData : '',
multipleSearch:true,
jsonReader : { repeatitems: false },
pager: '#pager',
width: 1130, //shrinkToFit: true
gridComplete: function(){
jQuery("#filtergrid").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition)
}
});
Thanks!
Instead of gridComplete use loadComplete. Look at this thread for difference between the two events
Grid Complete vs Load Complete
I've using JQgrid, and using inline edit all working fine but i need to disable the enter key press. Means if user entering values and click enter it not need to do any action. Now its trying to store the data as per edit url. But i don't need this functionality.
Just Disable enter key press on JQGrid.
Can any one help?
Hi Oleg As u asked i'm pasting my code its bit lengthy so i'm posting part which needed.
$("#RevenueReporttbl").jqGrid({
contentType: "application/json; charset=utf-8",
mtype: 'GET',
// url: '/AMForecast/Index/',
height: 'auto',
// width: 'auto',
width: '1150',
gridview: true,
datatype: "local",
loadonce: true,
data: search_result,
colNames: ['ForecastId', 'CustomerId', 'Customer Name', 'UserId', 'Person', 'ProjectId', 'Project Name', 'Edit', 'Ytd'],
colModel: [
{ name: 'ForecastId', index: 'ForecastId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerId', index: 'CustomerId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerName', index: 'CustomerName', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'UserId', index: 'UserId', width: 130, editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Manager', index: 'Manager', align: 'left', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'ProjectId', index: 'ProjectId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'ProjectName', index: 'ProjectName', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Edit', index: 'Edit', editable: false, width: 40, align: 'center', hidden: false, sortable: false, fixed: true },
{ name: 'Ytd', index: 'Ytd', editable: false, width: 40, align: 'right', sortable: false, summaryType: 'sum', fixed: true }],
rowNum: 99,
pager: '#pager',
footerrow: true,
userDataOnFooter: true,
altRows: false,
rowList: [100, 200, 300, 400, 500],
multipleSearch: true,
//multiselect: true,
multipleGroup: true,
shrinkToFit: true,
viewrecords: true,
sortorder: "desc",
subGrid: true,
grouping: true, //changed
groupingView: {
groupField: ['CustomerType'],
groupSummary: [true],
groupColumnShow: [false],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupDataSorted: true
},
jsonReader: {
root: "gridModel",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
subgrid: {
root: "gridModel",
repeatitems: true,
cell: "cell",
id: "id"
}
}
So i'm using subgrid also with read only option.
Please tell how to make enter key false? I dont want to do anything when i clicked enter in edit mode.
Did you see the part of the docs about the keys setting:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
It says:
If keys is true, then the remaining settings – successfunc, url,
extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed
as parameters to the saveRow method when the [Enter] key is pressed
(saveRow does not need to be defined as jqGrid calls it
automatically). For more information see saveRow method below.
Morning,
I am using jqGrid 4.4.1 - jQuery Grid. I have the next problem.
I have a custom search button, it permits filter data with some params
$('#BtnConsultar').click(function() {
parametros.NoSolicitud = $("#TxtNoSolicitud").val();
parametros.TipoSolicitud = $("#CbTiposSolicitud").val();
parametros.IdUsuario = $("#TxtIdUsuario").val();
parametros.Proveedor = $("#TxtProveedor").val();
parametros.FechaUltModificacionDesde = $("#TxtFechaUltModificacionDesde").val();
parametros.FechaUltModificacionHasta = $("#TxtFechaUltModificacionHasta").val();
parametros.FechaBorradoDesde = $("#TxtFechaBorradoDesde").val();
parametros.FechaBorradoHasta = $("#TxtFechaBorradoHasta").val();
jQuery('grid').jqGrid('clearGridData');
$("#GrdResultadoConsulta").jqGrid('setGridParam', { postData: { parametroJSON: JSON.stringify(parametros)} });
$('#GrdResultadoConsulta').trigger("reloadGrid", [{ current: true}]);
return true;
});
But if before filter data, i have a grid with 20 rows in group of 10 (2 pages) and the data that i want filter be in the second page the grid doesn´t show. I think is a sort problem because if i press colum sort the grid show the row.
Any one with some solution ?
This is my grid code
$("#GrdResultadoConsulta").jqGrid({
url: '<%= Url.Action("GridConsultaSolicitudeEliminadas")%>',
postData: { parametroJSON: JSON.stringify(parametros) },
datatype: 'json',
mtype: 'GET',
colNames: ['No.Solicitud', 'Tipo Solicitud', 'Usuario', 'Proveedor', 'Fecha Creación', 'Fecha Modificación', 'Fecha Borrado', 'Id Notificacion', 'SolicitudesEliminadasID'],
colModel: [
{ name: 'SolicitudID', index: 'SolicitudID', width: 75, align: 'left', sortable: true, resizable: false },
{ name: 'DescTipoSolicitud', index: 'TipoSolicitud', width: 75, align: 'center', sortable: true, resizable: false },
{ name: 'Usuario', index: 'IdUsuario', width: 200, align: 'left', sortable: true, resizable: false },
{ name: 'Proveedor', index: 'NumProv', width: 200, align: 'left', sortable: true, resizable: false },
{ name: 'FechaInicio', index: 'FechaInicio', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'FechaModificacion', index: 'FechaModificacion', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'FechaBorrado', index: 'FechaBorrado', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'IdNotificacion', width: 75, align: 'right', sortable: false, resizable: false },
{ name: 'SolicitudesEliminadasID', hidden: true }
],
pager: $('#GrdResultadoConsultaPager'),
rowNum: 10,
sortname: 'SolicitudID',
sortorder: 'asc',
autowidth: true,
height: '250px',
viewrecords: true,
caption: 'Resultado de consulta solicitudes eliminadas',
loadtext: "Cargando información ...",
hidegrid: false,
loadComplete: function() { },
onSelectRow: function(id) { }
}).navGrid('#GrdResultadoConsultaPager', { edit: false, add: false, search: false, del: false });
Thanks..
PD: Excuse for me english
I found my error.
The error wasn't in the grid, was in the stored procedure.
Solution: Moving the filters to CTE instruction and not in the final query result.
Regards