I have a Jqgrid with subgrid enabled in my MVC 2 project. Subgrid expands and populates data on the button click. I want to expand and show the subgrid data on page load. So i called exapandSubGridRow method on gridComplete event of the parent grid. Now the problem is, subgrid row is expanded on pageload, but with no data, an empty row appears below the parent grid row. Here is my code, Can anyone help me in fixing the problem.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/jqgrid/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
colModel: [
{ name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
{ name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'SurveyQnGrpId',
sortorder: "SurveyQnGroup1",
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridUrl: '/jqgrid/InnerGridData/',
subGridModel: [{
name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
'MandatoryQn','RadioOption3'],
width: [10,10, 100, 10, 10,10],
align: ['left', 'left', 'left', 'left'],
params: ['SurveyQnGrpId']
}],
gridComplete: function () {
var rowIds = $("#list").getDataIDs();
$.each(rowIds, function (index, rowId) {
$("#list").expandSubGridRow(rowId);
});
}
});
});
</script>
Thanks in advance,
Ancy
I don't know if this was available at the time this question was asked, but I found there is a subGridOptions property, takes an object. One of the properties in that object is expandOnLoad, which, when set to true, will make rows in the parent grid expand when the grid is loaded:
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/jqgrid/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
colModel: [
{ name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
{ name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'SurveyQnGrpId',
sortorder: "SurveyQnGroup1",
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridOptions: { expandOnLoad: true },
subGridUrl: '/jqgrid/InnerGridData/',
subGridModel: [{
name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
'MandatoryQn','RadioOption3'],
width: [10,10, 100, 10, 10,10],
align: ['left', 'left', 'left', 'left'],
params: ['SurveyQnGrpId']
}],
gridComplete: function () {
var rowIds = $("#list").getDataIDs();
$.each(rowIds, function (index, rowId) {
$("#list").expandSubGridRow(rowId);
});
}
});
});
See: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Related
I am new to jqGrid. I am working on creating a grid with edit functionality to each row. I was able to successfully create the grid and edit the rows. But i found that when there i space in my name column(editable column) in the grid. the edit doesn't work. The row remains disabled if i click on pencil icon.
For Example: the edit works if name is like 'test' but fails when name is 'test run'.
$(this.tableElement).jqGrid('GridUnload');
$(this.tableElement).jqGrid({
url: url1,
editurl: urledit,
mtype: 'POST',
datatype: 'json',
postData: {
id: ID
},
colNames: [
' Name',
' ID',
'QuoID',
''
],
colModel: [
{ name: 'Name', id: 'Name', width: 50, sorttype: 'text', sortable: true, editable: true },
{ name: 'ID', id: 'ID', hidden: true, editable: true },
{ name: 'QuoID', id: 'QuoID', hidden: true, editable: true },
{
name: 'Actions', index: 'Actions', width: 30, height: 120, formatter: 'actions',
formatoptions: {
keys: true,
onEdit: function (rowid)
{ alert(rowid); }
}
},
],
rowNum: 25,
rowList: [25, 50, 100],
sortname: 'PackageID',
sortorder: "desc",
firstsortorder: 'desc',
loadonce: !GetFeatureToggle("MultiplePackages"),
sortable: true,
viewrecords: true,
caption: "Packages",
width: 450,
height: 200,
hidegrid: false,
loadComplete: function (data) {
if (_this.firstLoad == true) {
setTimeout(function () { $(_this.elements.list).jqGrid('setGridParam', { page: 1 }).trigger("reloadGrid"); }, 1);
_this.firstLoad = false;
}
}
I'm using jqGrid in which i have a jsonReader property and inside that i'm using a function to show the pager of the grid.
My jsonReader page function is working when the grid binds some records. Its not getting called when the grid binds no records. But i have to disable the pager(Previous/Last) when the grid binds no records. Any ideas why?
//Code:
$("#AttachmentsGrid").jqGrid({
url: '#Url.Action("LoadTransactionAttachments", "Home")',
postData: { 'transactionId': selectedRowId },
ajaxGridOptions: { contentType: "application/json" },
hoverrows: false,
datatype: 'json',
hidegrid: false,
rowList: [10, 20, 30],
rownumbers: true,
viewrecords: true,
height: 'auto',
gridview: true,
autoencode: true,
autowidth: true,
shrinkToFit: false,
rowNum: 10,
pager: '#AttachmentsPager',
caption: "Attachments",
colNames: ['AttachmentName'],
colModel: [{ name: 'AttachmentName', index: 'AttachmentName' }],
jsonReader: {
repeatitems: false,
id: 'AttachmentId',
page: function (obj) {
//Not working
if (obj.length == 0) {
return "0";
}
}
}
});
Any help?
Can you explain what are these colnames and colmodel in jqgrid ?
Where are getting used ? defining columns , then ...how these 2 colnames / colmodels are inter related and all ??
and can please point why sorting is not happening in my below code:
<script type="text/javascript">
$('#grid').jqGrid({
url: '#(Url.Action("LoadIssues","Home"))',
datatype: 'json',
colNames: ['Category', 'Description', 'Issue_Title', 'LOGGED_BY', 'Notes', 'Priority', 'Status'],
mtype: 'GET',
colModel: [
{ name: 'Category', width: 100 },
{ name: 'Description', width: 100 },
{ name: 'Issue_Title', width: 100 },
{ name: 'LOGGED_BY', width: 100 },
{ name: 'Notes', width: 100 },
{ name: 'Priority', width: 100 },
{ name: 'Status', width: 100 }
],
jsonReader: {
id: 'id',
repeatitems: false
},
rowNum: 10,
rowList: [5, 10, 20, 30],
gridview: true,
pager: '#gridpager',
sortname: 'Description',
sortorder: "desc",
viewrecords: true,
shrinkToFit: true,
width: $('#gridContainer').width(),
height: 200,
hidegrid: false,
gridComplete: function () {
$('#gridContainer').find('.ui-jqgrid-titlebar').hide();
}
})
In a nutshell, colNames defines the names of your jqGrid columns on the page, and colModel specifies options for each column (name in the dataset, width, etc).
The documentation has more information:
colModel Array which describes the parameters of the columns.This is the most important part of the grid. For a full description of all valid values see colModel API.
colNames
An array in which we place the names of the columns. This is the text that appears in the head of the grid (header layer). The names are separated with commas. Note that the number of elements in this array should be equal of the number elements in the colModel array.
$("#grid").jqGrid({
datatype: 'local',
mtype: 'GET',
loadui: 'block',
altRows: true,
altclass: "myAltRow",
multiselect: false,
recordpos: "right",
pagerpos: "center",
pager: $('#gridt_summarypager'),
pginput: false,
rowNum: 100,
recordtext: "Showing {0} - {1} of {2}",
viewrecords: true,
sortname: 'Project',
sortorder: 'asc',
colNames: ['ProjectID', '<%: Project %>', '<%: ProjectTitle %>' , 'ProjectItemID', '<%: usProjectItem %>', 'Hours To Authorise', 'Hours Not Posted', 'Hours Rejected', 'Last 12 Months'],
colModel: [
{ name: 'ProjectID', index: 'ProjectID', width: 0, hidden: true},
{ name: 'Project', index: 'Project', width: 90, align: 'left', formatter: htmlEncodedString },
{ name: 'ProjectTitle', index: 'ProjectTitle', width: 90, align: 'left', formatter: htmlEncodedString },
{ name: 'ProjectItemID', index: 'ProjectItemID', width: 0, hidden:true },
{ name: 'ProjectItem', index: 'ProjectItem', width: 100, align: 'left', formatter: htmlEncodedString },
{ name: 'HoursToAuthorise', index: 'HoursToAuthorise', width: 125, align: 'right', formatter: timesheetsProjectToAuthoriseQueryFormat },
{ name: 'HoursNotPosted', index: 'HoursNotPosted', width: 125, align: 'right', formatter: timesheetsProjectUnpostedQueryFormat<% if (!(bool)ViewData["PostingEnabled"]) { %>, hidden: true <% } %> },
{ name: 'HoursRejected', index: 'HoursRejected', width: 125, align: 'right', formatter: timesheetsProjectRejectedQueryFormat },
{ name: 'HoursSubmitted12Months', index: 'HoursSubmitted12Months', width: 125, align: 'right', formatter: timesheetsProjectYearQueryFormat }],
imgpath: '../../Scripts/css/ui-lightness/images',
height: 145,
shrinkToFit: false,
hoverrows: false,
loadError: function (xhr, st, err) {
if (xhr.status == 200) {
window.location = '<%= loginPage %>';
}
else if (xhr.status == 500) {
$('#grid_summary_errors').html(xhr.statusText);
}
},
beforeSelectRow: function(rowid, e) {
/* disable row selection */
return false;
},
onSortCol: function (index, columnIndex, sortOrder) {
var col = $("#grid_summarygrid").getGridParam('colNames');
var label = "Ordered by " + col[columnIndex] + " " + sortOrder + "ending";
$("#gridsort").text(label);
}
});
$("#grid").setGridParam({ url: '<%= Url.Action(dataMethod, controllerName)%>?qid=xxx', page: 1, datatype: "json" })
.trigger('reloadGrid');
Currently using jqGrid 4.4.1 and it loads data fine but once sort is applied it updates the sort label buy grid data is not sorted. What is going on? Any help most appreciated...
If you set url and change datatype of grid to "json" then your server code is responsible for sorting of data like for paging too. If you want to load all data for the grid at once and want that jqGrid do sorting and paging for you then you should use loadonce: true option.
I recommend you additionally to include gridview: true option in jqGrid, replace pager: $('#gridt_summarypager') to pager: '#gridt_summarypager', remove not existing parameter imgpath and consider to use autoencode: true option of jqGrid which makes HTML encoding of strings in all columns which not contains custom formatter.
{
name: "name",
index:"name",
**sortable: true,**
editable: true,
**sorttype: 'text',**
key: true
},
Make sure that sorttype complies with the fields data type. for example if the grid field "name" contains int numbers, then you should have sorttype: 'int'.
Also as mentioned by Oleg, you need to set loadonce to true.
pager: "#pager",
gridview: true,
rowNum: 5,
loadonce:true,
multiSort: true,
rownumbers: true,
viewrecords: true,
rowList: [5, 10, 15],
include sortable: true in column as well as jqgrid property.
Chaning this parameter value worked for me.
loadonce: true
I have implemented a jqgrid using the code below. The grid works fine, but when I drag and change the order of columns (reorder), the textboxes below the last column(s) disappear on each reorder.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Content("/Contacts/DynamicGridData/")',
datatype: 'json',
mtype: 'GET',
colNames: ['Last Name', 'First Name', 'Country', 'Category'],
colModel: [
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' },
{ name: 'CountryId', index: 'CountryId', align: 'left' },
{ name: 'CategoryId', index: 'CategoryId', align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'LastName',
sortorder: "asc",
viewrecords: true,
sortable: true,
loadonce: true,
ignoreCase: true,
gridview: true,
autowidth: true,
rownumbers: true,
imgpath: '#Url.Content("~/Content/themes/jqgrid/smoothness/images")'
});
jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false }, {}, {}, {}, { multipleSearch: true });
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "", title: "Toggle Search Bar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { $("#list")[0].toggleToolbar() } });
});
</script>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
How can this be solved?
I can't reproduce your problem. See here my test. Which version of jQuery UI and jQuery you use?
Small remarks: The parameter imgpath is deprecated since many jqGrid releases and you should remove it. In the same way the class="scroll" will also not used. So you can reduce the HTML to
<table id="list"></table>
<div id="pager"></div>