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

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>

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”)

}

@Html.Trirand().JQGrid(Model.ResponderGrid, “CompanyGrid”);

</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.

One comment

récupérer son ex qui a une next says:

15 August 2014 at 2:56 am

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 Cancel reply