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>
Related
Using latest version of free jqgrid.
I am using the below code for my jqgrid.
I have some issues and question:
1) When I go to next page and previous page not sure what happens but my grid items keep moving up and down.
2) When I add/edit an item for form field I want the grid to refresh and get updated from the server but this does not happens and again my newly added data is lost in the grid as mentioned in my point1. I tried to add navOptions: { reloadGridOptions: { fromServer: true } } but still nothing.
3) When the user clicks on edit button on my pager it opens the user form field. I want the submit button to show edit instead of "Add" which it shows currently.
Here is my code below:
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
emptyrecords: "No Users found.",
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
guiStyle: "bootstrap",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "empid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true,
caption: "Search",
Find: "Search"
},
editurl:'#Url.Action("GetDetails", "Home")',
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 460,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13],
addCaption: "Add",
editCaption: "Edit",
bSubmit: "Add"
},
formDeleting: {
width: 320,
caption: 'Delete'
},
navOptions: { reloadGridOptions: { fromServer: true } }
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
</script>
The first two items above I was able to resolve using below code:
navOptions: { reloadGridOptions: { fromServer: true } }
But the 3rd item I am still not able to resolve where I am not able to change the text of the Add button to change it to edit when the edit toolbar button is clicked
How to do edit on popup dialog in jqgrid.
Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog.
To popup dialog, we already have dialog which can be popup.
To achieve this, I need to call - javascript function which can allow to popup dialog.
please guide me how I could call javascript function on click of edit icon ?
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, key: true },
{ name: 'Code', index: 'Code', width: 170},
{ name: 'Description', index: 'Description', width: 170},
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: true,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '500',
height: '100%',
viewrecords: true,
multiselect: false,
caption: "Categories",
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });
Pleae guide me.
To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid.
Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:
$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#CategoriesGrdPager', {
title: "Edit",
caption: "Edit",
buttonicon: "ui-icon-pencil", // JQuery UI Icon
onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
position: "last" // Position of the button on Nav
})'
By default jqGrid considers the text value to set the selected option in a combo box. How can I add a column for the key value and have jqGrid selecting the right option using the key value?
I've been using the custom formatter, but some pages are displaying undefined when the rows are not editable, and when the inline edit modes is enabled, they display the right option.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#Grid').jqGrid({
autowidth: true,
datatype: 'json',
height: '100%',
pager: '#pager',
rowNum: 10,
sortname: 'Description',
url: '/AppUrl/Service',
viewrecords: true,
gridComplete: function () { OnGridComplete() },
onSelectRow: function (rowid, status) { grid.EditGridRow(rowid) },
colModel: [
{
name: 'ID',
hidden: true,
key: true,
index: 'ID'
}, {
name: 'ModuleId',
formatter: formatAsDropDown,
label: 'Módulo',
sortable: true,
width: 300,
editable: true,
edittype: 'select',
editoptions: { "value": "1:Modulo 1;2:Modulo 2;3:Modulo 3" },
index: 'ModuleId'
}, {
name: 'Description',
label: 'Description',
sortable: true,
width: 300,
editable: true,
index: 'Description'
}
]
});
function formatAsDropDown(cellvalue, options, rowObject) {
return rowObject.ModuleName;
}
});
</script>
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 have the below code in my jqgrid
<script type="text/javascript">
jQuery(document).ready(function() {
var grid = jQuery("#list");
$("#editBtn").click(function() {
alert("hi"); });
jQuery("#list").jqGrid({
url: '<%= Url.Action("DynamicGridData") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['checkbox', 'Id','col1','col2' ],
colModel: [
{ name: 'checkbox', index: 'checkbox', sortable: false, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
{ name: 'Id', index: 'Id', search: false, stype: 'text', sortable: true, sorttype: 'int', hidden: true },
{ name: 'col1', index: 'col1', search: false, stype: 'text', sortable: true, sorttype: 'int', search: false, hidden: true },
{ name: 'col2', index: 'col2', sortable: true, search: false, width: 30, stype: 'int' } ],
pager: jQuery('#pager'),
rowNum: 40,
rowList: [20, 40, 60, 100],
sortname: 'Id',
sortorder: 'asc',
gridview: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
toppager: true,
height: "100%",
width: "100%",
caption: 'Grid Data'
});
});
I can fire the test alert in the editBtn function, how can a user access the id column of the records that have their checkboxes selected by the user?
use the following code to get the Id column data of which checkboxes are ticked...
var grid = jQuery("#list");
$("#editBtn").click(function() {
var str = '';
var data = grid.getRowData();
for(i=0;i<data.length;i++){
if(data[i].checkbox==='Yes')
str += data[i].Id+',';
}
alert(str);
});
str variable consists of the values of Id column for which checkbox is selected by user.