I have a layout page inside which i have a table with delete button
when i press a delete button it is showing some thing like .
my ajex option is like.
#{
AjaxOptions xPost = new AjaxOptions();
xPost.HttpMethod = "POST";
xPost.Confirm = "Do you wish to submit this form ?";
xPost.OnBegin = "OnBegin";
xPost.OnComplete = "OnComplete";
xPost.OnFailure = "OnFailure";
xPost.OnSuccess = "OnSuccess";
xPost.LoadingElementDuration = 1000;
xPost.LoadingElementId = "divProgress";
xPost.UpdateTargetId = "divResponse";
xPost.InsertionMode = InsertionMode.Replace;
}
and on delete i am subbmiting the form to a controll like
public ActionResult Delete(int id)
{
ContactPersonManager.Delete(id);
return RedirectToAction("List");
}
As you are using ajax, you could return the URL from your action and have it redirected in javascript:
Controller
public ActionResult Delete(int id)
{
ContactPersonManager.Delete(id);
return Json(new { success = true, redirecturl = Url.Action("List") });
}
Then add something like this to your OnSuccess handler in javascript:
Javascript
function anOnSuccessFunction (data)
{
if (data.success == true)
{
window.location = data.redirecturl;
}
}
Markup
Make sure you point your Ajax options to the javascript function.
xPost.OnSuccess = "anOnSuccessFunction";
I'm using this demo to display text and dropdown list filters in the columns of a JqGrid. The grid has a remote data source and with each sort, filter, or page view etc, it grabs the data from the remote source.
The problem I am having is that when the new data arrives, the grid is refreshed, and the filters revert to default. I've looked at a few examples by Dr Oleg but I can't get it to work with remote data and persistence. Any setting of datatype to "local" or loadonce to true breaks the remote datasource.
Does anyone have any ideas of how to get this to work?
I've tried the following, but as I said, this stops the JqGrid from making API requests:
loadComplete: function () {
var $this = $(this);
var postfilt = $this.jqGrid('getGridParam', 'postData').filters;
var postsord = $this.jqGrid('getGridParam', 'postData').sord;
var postsort = $this.jqGrid('getGridParam', 'postData').sidx;
var postpage = $this.jqGrid('getGridParam', 'postData').page;
console.log(postfilt);
console.log(postsord);
console.log(postsort);
console.log(postsort);*/
if ($this.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$this.jqGrid("setGridParam", {
datatype: "local",
postData: { filters: postfilt, sord: postsord, sidx: postsort },
search: true
});
$this.trigger("reloadGrid", [{ page: postpage}]);
}, 25);
}
}
I think the issue has something to do with the select2 dropdown menus. Here you can see it destroys the filter menu and recreates it.
var options = colModelOptions, p, needRecreateSearchingToolbar = false;
if (options != null) {
for (p in options) {
if (options.hasOwnProperty(p)) {
if (options[p].edittype === "select") {
options[p].editoptions.dataInit = initSelect2;
}
if (options[p].stype === "select") {
options[p].searchoptions.dataInit = initSelect2;
}
$grid.jqGrid("setColProp", p, options[p]);
if (this.ftoolbar) { // filter toolbar exist
needRecreateSearchingToolbar = true;
}
}
}
if (needRecreateSearchingToolbar) {
$grid.jqGrid("destroyFilterToolbar");
$grid.jqGrid("filterToolbar", filterToolbarOptions);
}
}
If there was a way this could be done just once per JqGrid load rather than per every request, then that may be a step in the right direction.
The answer to this was quite simple, it just didn't present itself to me until the next morning. I simply wrapped the code that built the search bar in a boolean check, so that it only loaded once.
// somewhere in the class
var gridLoaded = false;
// and in the JqGrid initialization
loadComplete: function (response) {
if (!gridLoaded) {
var options = colModelOptions, p, needRecreateSearchingToolbar = false;
if (options != null) {
for (p in options) {
console.log(p);
if (options.hasOwnProperty(p)) {
if (options[p].edittype === "select") {
options[p].editoptions.dataInit = initSelect2;
}
if (options[p].stype === "select") {
options[p].searchoptions.dataInit = initSelect2;
}
$(this).jqGrid("setColProp", p, options[p]);
if (this.ftoolbar) { // filter toolbar exist
needRecreateSearchingToolbar = true;
}
}
}
if (needRecreateSearchingToolbar) {
$(this).jqGrid("destroyFilterToolbar");
$(this).jqGrid("filterToolbar", filterToolbarOptions);
}
}
gridLoaded = true;
}
}
Thanks again to Dr Oleg for the help.
I've just introduced SSL to my MVC website. I made the whole default AccountContorller use it. It works fine unless I'm currently on http page and try to log on with ajax (the logon action is vredirected to httpS). This popup logon window doesn't even show up.
For the controller a used a custom attribute:
public class RequireSSL : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (filterContext.ActionDescriptor.IsDefined(typeof(NoSSL), true) ||
filterContext.ActionDescriptor.IsDefined(typeof(OptionalSSL), true))
{
base.OnActionExecuting(filterContext);
return;
}
HttpRequestBase req = filterContext.HttpContext.Request;
HttpResponseBase res = filterContext.HttpContext.Response;
//Check if we're secure or not and if we're on the local box
if (!req.IsSecureConnection && (!req.IsLocal || Properties.Settings.Default.UseSSLForLocalRequests))
{
var builder = new UriBuilder(req.Url)
{
Scheme = Uri.UriSchemeHttps,
Port = Properties.Settings.Default.HttpsPort,
};
res.Redirect(builder.Uri.ToString());
}
base.OnActionExecuting(filterContext);
}
}
How can I make it work?
EDIT
The whole rest was generated by MVC. (Project with built in authentications)
That's the link.
#Html.ActionLink(#Labels.LogOn, "LogOn", "Account", routeValues: null, htmlAttributes: new { id = "logonLink", data_dialog_title = "Identification" })
JS somehow hooks into that link and performs ajax logon . Probably with this code: (JajaxLogin.js - also out of the box)
/// <reference path="jquery-1.6.2.js" />
/// <reference path="jquery.validate.js" />
$(function () {
// Cache for dialogs
var dialogs = {};
var getValidationSummaryErrors = function ($form) {
// We verify if we created it beforehand
var errorSummary = $form.data('validation-summary-errors');
if (!errorSummary) {
errorSummary = $('<div class="validation-summary-errors"><span>Please correct the errors and try again.</span><ul></ul></div>')
.insertBefore($form);
// Remember that we created it
$form.data('validation-summary-errors', errorSummary);
}
return errorSummary;
};
var formSubmitHandler = function (e) {
var $form = $(this);
// We check if jQuery.validator exists on the form
if (!$form.valid || $form.valid()) {
$.post($form.attr('action'), $form.serializeArray())
.done(function (json) {
json = json || {};
// In case of success, we redirect to the provided URL or the same page.
if (json.success) {
location = json.redirect || location.href;
} else if (json.errors) {
var errorSummary = getValidationSummaryErrors($form);
var items = $.map(json.errors, function (error) {
return '<li>' + error + '</li>';
}).join('');
var ul = errorSummary
.find('ul')
.empty()
.append(items);
}
});
}
// Prevent the normal behavior since we opened the dialog
e.preventDefault();
};
var loadAndShowDialog = function (id, link, url) {
var separator = url.indexOf('?') >= 0 ? '&' : '?';
// Save an empty jQuery in our cache for now.
dialogs[id] = $();
// Load the dialog with the content=1 QueryString in order to get a PartialView
$.get(url + separator + 'content=1')
.done(function (content) {
dialogs[id] = $('<div class="modal-popup">' + content + '</div>')
.hide() // Hide the dialog for now so we prevent flicker
.appendTo(document.body)
.filter('div') // Filter for the div tag only, script tags could surface
.dialog({ // Create the jQuery UI dialog
title: link.data('dialog-title'),
modal: true,
resizable: true,
draggable: true,
width: link.data('dialog-width') || 300
})
.find('form') // Attach logic on forms
.submit(formSubmitHandler)
.end();
});
};
// List of link ids to have an ajax dialog
var links = ['logonLink', 'registerLink'];
$.each(links, function (i, id) {
$('#' + id).click(function (e) {
var link = $(this),
url = link.attr('href');
if (!dialogs[id]) {
loadAndShowDialog(id, link, url);
} else {
dialogs[id].dialog('open');
}
// Prevent the normal behavior since we use a dialog
e.preventDefault();
});
});
});
I am working on the MVC3 with ADO.Net Connectivity, an then i am updating the div with jQuery
Here i my code
Controller
public ActionResult GetData()
{
return this.Json(_db.MYMOVIELISTs, JsonRequestBehavior.AllowGet);
}
public void Insert(string Id)
{
var movieToInsert = new MYMOVIELIST { Title = "Ben", Director = "LEMe", ID = Id };
// Save new movie to DB
_db.AddToMYMOVIELISTs(movieToInsert);
_db.SaveChanges();
}
ClientSide
function insertCallback(result) {
readData();
}
function readData() {
info.empty();
$.ajax({
type: "GET",
url: 'Home/GetData',
async: false,
success: function (data) {
for (var i = 0; i < data.length; i++) {
var panel = $("<div class='panel' ></div>")
var d = data[i];
panel.append("ID: " + d.ID + "</br>");
panel.append("Title: " + d.Title + "</br>");
panel.append("Director: " + d.Director + "</br>");
panel.append("<hr>");
panel.data("info", d);
panel.appendTo(info);
}
}
});
}
$("#btnAdd").click(function () {
$.post("Home/Insert", $("form").serialize(), insertCallback);
});
This is works Fine, my problem is i want to update the Database table in "Save" buttom click. i tried to call the _db.SaveChanges(); in save button click instead of the Insert it is not adding the movieToInsert to table, here i want to know is how to save the database later, Here any thing am doing wrong or is there any best approach for DB connectivity
You are serializing a form, so eventually you may want below... which will bind your serialized form to the a movie model/entity:
[AcceptVerbs("POST")]
public void Insert(MovieEntity movie)
As for database practice, I recommend reading about the repository pattern and dependency injection as it pertains to ASP.NET MVC.
I'm attempting to use jqGrid in my ASP.Net MVC application and have a requirement that some columns arre editable in the Add dialog but not the Edit dialog. Apparently the way to do this is to use the beforeShowForm javascript event and set the properties on the particular input field.
So far I can't manage to get the beforeShowForm event to fire. Below is an example I found on another SO question but so far I haven't managed to get it working. Is there some trick I'm missing? I'm using the latest 3.8 version of jqGrid.
Controller:
[Authorize]
public ActionResult Index()
{
var gridModel = new MyGridModel();
SetUpGrid(gridModel.MyGrid);
return View(gridModel);
}
private void SetUpGrid(JQGrid grid)
{
grid.DataUrl = Url.Action("GridDataRequested");
grid.EditUrl = Url.Action("EditRows");
grid.ToolBarSettings.ShowSearchToolBar = false;
grid.ToolBarSettings.ShowEditButton = true;
grid.ToolBarSettings.ShowAddButton = true;
grid.ToolBarSettings.ShowDeleteButton = true;
grid.ToolBarSettings.ShowRefreshButton = true;
grid.EditDialogSettings.CloseAfterEditing = true;
grid.AddDialogSettings.CloseAfterAdding = true;
grid.EditDialogSettings.Modal = false;
grid.EditDialogSettings.Width = 500;
grid.EditDialogSettings.Height = 300;
grid.ClientSideEvents.GridInitialized = "initGrid";
}
Model:
public class MyGridModel
{
public JQGrid MyGrid { get; set; }
public MyGridModel()
{
MyGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn { DataField = "id",
PrimaryKey = true,
Visible = false,
Editable = false },
new JQGridColumn { DataField = "username",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100},
new JQGridColumn { DataField = "domain",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100}
}
}
}
}
View:
function initGrid() {
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(frm) {
alert("beforeShowForm edit");
}
},
{ // add options
beforeShowForm: function(frm) {
alert("beforeShowForm add");
}
},
{ }, // del options
{ } // search options
);
}
<div>
<%= Html.Trirand().JQGrid(Model.MyGrid, "myGrid") %>
</div>
It seems to me that the answer to your question you will find here and here (look at the example also).
UPDATED: I don't know commertial version of jqGrid. If you don't solve your prblem you should post your question better in the forum http://www.trirand.net/forum/default.aspx.
If I understand your code correct you can try to remove definition of the attributes readonly and disabled (JQGridEditFieldAttribute) from the EditFieldAttributes. Instead of that you can try to do following
If you want to show readonly fields 'username' and 'domain' in the edit dialog you can do following
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
});
or without the usage of recreateForm: true option:
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
},
{ // add options
beforeShowForm: function(frm) {
$('#username',form).removeAttr('readonly');
$('#domain',form).removeAttr('readonly');
}
});
If you want not to show the fields 'username' and 'domain' in the edit dialog you can do
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).hide();
$('#domain',form).hide();
}
});
It should work in the free version of the jqGrd, but because you use SetUpGrid which setup ome settings of jqGrid navigation bar (like grid.ToolBarSettings.ShowEditButton = true). You use also
grid.ClientSideEvents.GridInitialized = "initGrid"
I am not sure what you can do inside of initGrid function. Probably you should define some additional callbackes instead of calling of jQuery("#myGrid").jqGrid('navGrid', ...);. Look at http://www.trirand.net/documentation/aspnet/_2s20v9uux.htm and http://www.trirand.com/blog/phpjqgrid/docs/jqGrid/jqGridRender.html#methodsetNavOptions
I ended up buying the paid for version of jqGrid - the time I save by being able to use a clean .Net object model compared to javascript will pay for itself in no time.
The answer to this question direct from Trirand support is.
You can use the client-side events AfterEditDialogShown and AfterAddDialogShown to disable/enable edit fields for both dialogs. The field for editing/adding will have the same ID is the DataField (case-sensitive). Example:
Model:
JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";
JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";
View:
<script type="text/javascript">
function disableFields() {
//jQuery("#fieldname").attr("disabled", "disabled");
$("#Source").attr("disabled", "true");
$("#ProgramName").attr("disabled", "true");
$("#Division").attr("disabled", "true");
$("#Medium").attr("disabled", "true");
$("#content").attr("disabled", "true");
}
function enableFields() {
$("#Source").attr("disabled", "false");
$("#ProgramName").attr("disabled", "false");
$("#Division").attr("disabled", "false");
$("#Medium").attr("disabled", "false");
$("#content").attr("disabled", "false");
}
</script>
Current Solution: jqGrid 4.5.4 - jQuery Grid
After this lines at editGridRow (line 7447)
if (rowid === "new") {
rowid = "_empty";
frmoper = "add";
p.caption=rp_ge[$t.p.id].addCaption;
} else {
p.caption=rp_ge[$t.p.id].editCaption;
frmoper = "edit";
}
I put this modification
$t.p.custom_frmoper = frmoper;
Then I can decide what to do whith elements at Popup EDIT and Popup ADD
$.ajax($.extend({
url: $.isFunction(options.dataUrl) ? options.dataUrl.call($t, rowid, vl, String(options.name)) : options.dataUrl,
type : "GET",
dataType: "html",
data: $.isFunction(postData) ? postData.call($t, rowid, vl, String(options.name)) : postData,
context: {elem:elem, options:options, vl:vl},
success: function(data){
var ovm = [], elem = this.elem, vl = this.vl,
options = $.extend({},this.options),
msl = options.multiple===true,
a = $.isFunction(options.buildSelect) ? options.buildSelect.call($t,data) : data;
if(typeof a === 'string') {
a = $( $.trim( a ) ).html();
}
if(a) {
$(elem).append(a);
setAttributes(elem, options, postData ? ['postData'] : undefined);
// CUSTOM CODE
$.each($t.p.colModel, function (i, current) {
if (current.not_editable) {
if ($t.p.custom_frmoper == 'edit') {
$("#" + current.name).attr('readonly', 'readonly');
$("#" + current.name).attr('disabled', 'disabled');
}
else {
$("#" + current.name).removeAttr('readonly');
$("#" + current.name).removeAttr('disabled');
}
}
});
I also added a custom not_editable attribute to the column model to decide that a specific column is editable when ADDING and readonly when MODIFIYING
{ name: 'ID', index: 'ID', not_editable: true }
I hope it helps. I created this modification because SELECT elements does not work with the current solutions in this thread.