Aplologies if this has been posted before somewhere, I cannot see a problem which describes this issue….
I’m using mvc3/razor with jqGrid, and it seems it is not calculating the width properly – It is cutting off the Last column.
Could anyone tell me why?
I am using an unchanged ui.jqgrid.css and and jQueryUI themeroller theme, if that makes a difference!
My Index.cshtml :
@{
ViewBag.Title = "Index";
}
<h2>@ViewBag.Message</h2>
<div id="content">
<div id="content-left">
@Html.Partial("SearchPanel")
</div>
<div id="content-main">
<table id="jpgCustomers" cellpadding="0" cellspacing="0"></table>
<div id="jpgpCustomers" style="text-align:center;"></div>
<div id="dlgCustomer"></div>
</div>
</div>
<div id="CustomerEdit"></div>
@section JavaScript
{
<script type="text/javascript">
$(document).ready(function ()
{
$('#jpgCustomers').jqGrid({
//url from wich data should be requested
url: '@Url.Action("Customers")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns model
//columns names
colNames: ['No Of Banks','Name', 'FullName', 'Description', 'Enabled', 'Tranbase', 'Group ID', 'Email Address', 'Phone', 'Pager', 'Fax', 'Comments', ' '],
colModel: [
//displayed Columns
{ name: 'BankLinks', index: 'BankLinks', align: 'center', width:40, editable:false },
{ name: 'LogonName', index: 'LogonName', align: 'left', width:80, editable:true },
{ name: 'FullName', index: 'FullName', align: 'left', editable:true, width: 200 },
{ name: 'Description', index: 'Description', align: 'left', width: 200, editable:true, edittype:'textarea'},
{ name: 'Enabled', index: 'Enabled', align: 'center', width: 60, editable:true},
{ name: 'IsTranbase', index: 'IsTranbase', align: 'center', width: 60, editable:true, formatter: YesNoFormatter, unformat:YesNoUnformatter, edittype:'checkbox', editoptions:{value:'1:0'}},
//Hidden Columns
{ width: 60,name: 'GroupID', index: 'GroupID', hidden: true, editable:true, editrules:{required:false, edithidden:true} },
{ width: 60,name: 'Email', index: 'Email', hidden: true, editable:true, editrules:{required:false, edithidden:true}, editype:'email' },
{ width: 60,name: 'Phone', index: 'Phone', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
{ width: 60,name: 'Pager', index: 'Pager', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
{ width: 60,name: 'Fax', index: 'Fax', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
{ width: 60,name: 'Comments', index: 'Comments', align: 'left', hidden: true, editable:true, edittype:'textarea'},
//Action column
{ name: 'myac', width:80, fixed:true, sortable:false, resize:false, editable:false, formatter:'actions', formatoptions: {
keys:true,
delOptions: { url : encodeURI('@Url.Action("Delete")') }
}
}
],
//pager for grid
pager: $('#jpgpCustomers'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'FullName',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%',
editurl: encodeURI('@Url.Action("Edit")'),
//subgrid
subGrid: true,
//subrid model
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
url: encodeURI('@Url.Action("BankLinks")' + '?id=' + row_id),
datatype: 'json',
mtype: 'POST',
colNames: ['Bank', 'Folder', 'Enabled'],
colModel:
[
{name:"Bank",index:"Bank",width:20,key:true},
{name:"Folder",index:"Folder",width:20},
{name:"Enabled",index:"Enabled",width:10,align:"left"}
],
rowNum:20,
pager: pager_id,
sortname: 'Bank',
sortorder: "asc",
viewrecords: true,
height: '100%'
});
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
},
});
$("#jpgCustomers").jqGrid('navGrid', '#jpgpCustomers',
{ add: true, del: true, edit: true, search: false},
{ width: 'auto', url: '@Url.Action("Edit")'},
{ width: 'auto', url: '@Url.Action("Edit")' },
{ width: 'auto', url: '@Url.Action("Delete")' });
});
function YesNoFormatter(cellvalue, options, rowObject) {
var cellValueInt = parseInt(cellvalue);
if (cellValueInt == 1)
return "<img src='@Url.Content("~/Content/images/tick.gif")' title='"+ cellvalue + "' />";
else
return "<img src='@Url.Content("~/Content/images/cross.gif")' title='"+ cellvalue + "' />";
};
function YesNoUnformatter (cellvalue, options, cell) {
return $('img', cell).attr('title');
};
</script>
}
my controller actions:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customers(JqGridRequest request)
{
ISession session = NHibernateHelper.GetCurrentSession();
try
{
IEnumerable<Customer> customers = session.QueryOver<Customer>().List().Skip<Customer>(0).Take<Customer>(request.RecordsCount);
int totalRecords = customers.Count();
//Prepare JqGridData instance
JqGridResponse response = new JqGridResponse()
{
//Total pages count
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
//Page number
PageIndex = request.PageIndex,
//Total records count
TotalRecordsCount = totalRecords
};
//Table with rows data
foreach (Customer customer in customers)
{
response.Records.Add(new JqGridRecord(Convert.ToString(customer.Id), new List<object>()
{
customer.Banks.Count(),
customer.LogonName,
customer.FullName,
customer.Description,
customer.Enabled,
customer.IsTB,
customer.GroupID,
customer.Email,
customer.Phone,
customer.Pager,
customer.Fax,
customer.Comments
}));
}
//Return data as json
return new JqGridJsonResult() { Data = response };
}
catch (Exception ex)
{
return HttpNotFound();
}
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult BankLinks(int Id, JqGridRequest request)
{
ISession session = NHibernateHelper.GetCurrentSession();
Customer customer = session.Get<Customer>(Id);
int totalRecords = customer.Banks.Count();
//Prepare JqGridData instance
JqGridResponse response = new JqGridResponse()
{
//Total pages count
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
//Page number
PageIndex = request.PageIndex,
//Total records count
TotalRecordsCount = totalRecords
};
foreach (Bank bank in customer.Banks.ToList<Bank>())
{
//IEnumerable<CustomerBank> bankLink = session.CreateQuery("from CustomerBank where Bank_ID = :bankId").SetParameter("bankId", bank.Id).List<CustomerBank>();
CustomerBank bankLink = session.QueryOver<CustomerBank>().Where(x => x.BankId == bank.Id).Where(y => y.CustomerId == customer.Id).List<CustomerBank>().FirstOrDefault();
//IEnumerable<CustomerBank> bankLink2 = session.QueryOver<CustomerBank>().List<CustomerBank>();
response.Records.Add(new JqGridRecord(null, new List<object>()
{
bank.BankCode,
bank.Folder,
bankLink.Enabled
}));
}
return new JqGridJsonResult() { Data = response };
}
Found the Answer while looking for Something else (resizing the Page edit box on the navigation bar)
See Resize the jqGrid page edit box
There Are some Stylesheet tweaks in here(for MVC) that Oleg has Added which as well as sorted out the Horizontal Scrollbar issue, also sorted out the Page edit box Sixing issue! – thanks Oleg!