Setting Default Data for Add New operation using .NET MVC JQGrid

Capture

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&#8221; />
<link rel=”stylesheet” type=”text/css” href=”http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css&#8221; />
<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js&#8221; type=”text/javascript”></script>
<script type=”text/javascript” src=”http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js”></script&gt;
<script type=”text/javascript” src=”http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js”></script&gt;
<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.

Advertisements

One thought on “Setting Default Data for Add New operation using .NET MVC JQGrid

  1. Appreciating the hard work you put into your website and detailed information you provide.
    It’s awesome to come across a blog every once in a while that isn’t the same old
    rehashed information. Excellent read! I’ve bookmarked your site and I’m including your
    RSS feeds to my Google account.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s