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 };
}
