Of late I have been working with the .NET MVC JQGrid control for a relatively simple project and have found myself asking all sorts of questions of the technology which do not seem to be easily and readily supported without resorting to hacking around in HTML. One such example came up recently where I needed to default the value for a column upon creating a new Company record. After posting on the forums I was directed to a ‘sample’ which actually showed me nothing even though the forum poster had responded with an answer that was meaningful. I thus decided to document the actual methodology so that you don’t have to!
In short I have a Responder object which upon creation needs the ‘ResponderType’ property to be primed with the value ‘2’ to indicate what type of responder we are creating. I have included a full listing of the ‘MVC’ components although only the items highlighted in bold red are actually pertinent to this blog post. The rest is provided for completeness (although as the code has been derived in reality from some abstracted classes there may be some errors, so apologies in advance).
The controller code is as follows with the pertinent code residing in SetUpResponderGrid where we declare a client side javascript handler that we will utilise to intercept the load of the ‘Add Form’ only.
public class ResponderController : BaseController{
protected IResponderService responderService;
protected override string entityName {get { return “Company”; }}
public ResponderController(IResponderService svc) {
responderService = svc;
}
public ActionResult Maintain() {
ResponderGridModel gridModel = CreateGrid();
var kpiGrid = gridModel.ResponderGrid;
SetUpResponderGrid(kpiGrid);
return View(gridModel);
}
protected JsonResult GetAll(ResponderTypes respondersType) {
var gridModel = CreateGrid();
SetUpResponderGrid(gridModel.ResponderGrid);
IQueryable<ResponderModel> responders = responderService.GetAllRespondersOfType(respondersType).AsQueryable();
return gridModel.ResponderGrid.DataBind(responders);
}
protected virtual void SetUpResponderGrid(JQGrid grid) {
grid.Columns.Insert(0, new JQGridColumn {
EditActionIconsColumn = true,
EditActionIconsSettings = new EditActionIconsSettings {
SaveOnEnterKeyPress = false,
ShowEditIcon = true,
ShowDeleteIcon = true
},
HeaderText = “Edit Actions”,
Width = 10
});
var renameCols = grid.Columns.Where(c => c.HeaderText.Contains(“{0}”));
if (renameCols != null) {
foreach (var col in renameCols) {
col.HeaderText = string.Format(col.HeaderText, entityName);
}
}
grid.AutoWidth = true;
grid.Height = Unit.Percentage(100);
grid.ToolBarSettings.ShowRefreshButton = true;
grid.ToolBarSettings.ShowAddButton = true;
grid.ToolBarSettings.ShowEditButton = true;
grid.ToolBarSettings.ShowDeleteButton = false;
grid.ClientSideEvents = new ClientSideEvents() {
AfterAddDialogShown = “AfterAddDialogShown”,
AfterEditDialogShown = “AfterEditDialogShown”,
BeforeAddDialogShown=”BeforeAddDialogShown”,
};
grid.AddDialogSettings = new AddDialogSettings {
CloseAfterAdding = true,
ReloadAfterSubmit = true,
Resizable = true,
Modal = true,
};
grid.EditDialogSettings = new EditDialogSettings {
CloseAfterEditing = true,
ReloadAfterSubmit = true,
Resizable = true,
Modal = true,
};
grid.DeleteDialogSettings = new DeleteDialogSettings() {
Modal = true,
ReloadAfterSubmit = true,
Resizable = true,
};
}
protected override ResponderGridModel CreateGrid() {
return new ResponderGridModel();
}
}
Here is the Grid Model class which contains no pertinent code but is included for completeness.
public abstract class ResponderGridModel {
public ResponderGridModel() {
ResponderGrid = new JQGrid() {
Columns = new List<JQGridColumn>() {
new JQGridColumn(){
DataField=”ResponderID”,
PrimaryKey=true,
Editable=false,
Visible=false,
},
new JQGridColumn(){
NullDisplayText=”Please enter a (0) name”,
DataField=”ResponderName”,
HeaderText=”{0} Name”,
Width=100,
EditDialogRowPosition=1,
EditDialogColumnPosition=1,
Editable=true,
},
new JQGridColumn(){
NullDisplayText=”Please enter a {0} code”,
DataField=”ResponderCode”,
HeaderText=”{0} Code”,
Width=50,
EditDialogRowPosition=2,
EditDialogColumnPosition=1,
Editable=true,
},
new JQGridColumn(){
DataField=”BOID”,
Editable=true,
Visible=false,
}’
new JQGridColumn(){
DataField=”ResponderType”,
Editable=true,
Visible=false,
},
new JQGridColumn(){
DataField=”UpdateID”,
Visible=false,
Editable=true,
}
},
Width = Unit.Pixel(640),
Height = Unit.Percentage(100),
};
}
public JQGrid ResponderGrid { get; set; }
}
And finally here is the RAZR view which contains the javascript function that we declared in the server side code. This code finds the text controls that we need to initialise and does so with the values that we require.
@using Trirand.Web.Mvc
@using COCO.XXX.Models.Responder;
@model COCO.XXX.Models.Responder.HEIGridModel
@{
ViewBag.Title = “Maintain Companies”;
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link rel=”stylesheet” type=”text/css” href=”http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css” />
<link rel=”stylesheet” type=”text/css” href=”http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css” />
<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js”></script>
<script type=”text/javascript” src=”http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js”></script>
<link href=”@Url.Content(“~/Content/Site.css”)” rel=”stylesheet” type=”text/css” />
<link href=”@Url.Content(“~/Assets/css/site.css”)” rel=”stylesheet” type=”text/css” />
<link rel=”stylesheet” href=”@Url.Content(“~/Assets/css/bootstrap.min.css”)” />
<link rel=”stylesheet” href=”@Url.Content(“~/Assets/css/bootstrap-responsive.min.css”)” />
<script src=”@Url.Content(“~/Scripts/jquery.jqGrid.js”)” type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jquery.jqGrid.min.js”)” type=”text/javascript”></script>
</head>
<body>
<script type=”text/javascript”>
function AfterAddDialogShown() {
var TypeCol = $(“#tr_ResponderType”);
TypeCol.attr(“hidden”, “true”);
var responderType = $(“#ResponderType”)
responderType.val(“2”);
}
function AfterEditDialogShown() {
var TypeCol = $(“#tr_ResponderType”);
TypeCol.attr(“hidden”, “true”)
}
</script>
<div>
@Html.Trirand().JQGrid(Model.ResponderGrid, “CompanyGrid”);
</div>
</body>
</html>
I suspect I shall be publishing many more articles over the coming months with regard to the JQGrid as I am just getting to grips with it in a working environment and I find myself disappointed with the amount of documentation available specifically for the .NET MVC implementation.
Whilst coding a custom component for a complex SAP Design Studio Dashboard I was vaguely aware that coding one property per required column property was not exactly what you’d call, scalable! What I needed was to be able to capture arrays of data instead of just single properties, that way I could just have iterative code in the component which would take care of my component generation instead of these hardcoded single properties. In this instance I wanted to capture the colours for a given column header ( for a data table). In my situation I had 10 headers but as this is a customisable component I guess it would be better to express this as ‘n’ rather than 10. Despite posts to the contrary this is indeed made possible by use of the Array data type.
