jQuery UI Widgets › Forums › Grid › Opening a new view from jqxgrid edit button
This topic contains 6 replies, has 4 voices, and was last updated by sindc 10 years ago.
-
Author
-
I have jqxgrid in whic i have placed a column type edit.From edit button I want to open a new view in edit mode with populating model’s data.But since there is no @Html.ActionLink(“Edit”, “Edit”) view is not opening.I am attaching my code here.Please help me.I am using razor view engine.
index.cshtml
@* *@
@model IEnumerable@{
ViewBag.Title = “Index”;
}Index
@Html.ActionLink(“Create New”, “Create”)
$(document).ready(
function () {
var data = {datatype: “json”,
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CompanyName’ },
{ name: ‘ContactName’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘PostalCode’ },
{ name: ‘Country’ },],
url: ‘Customer/GetCustomers’
};var editrowindex = -1;
$(‘#jqxgrid’).jqxGrid(
{
width: 1000,
source: data,
theme: ‘energyblue’,
columns: [
{ text: ‘CustomerID’, datafield: ‘CustomerID’, hidden: ‘true’ },
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Address’, datafield: ‘Address’, width: 150 },
{ text: ‘City’, datafield: ‘City’, width: 150 },
{ text: ‘Postal Code’, datafield: ‘PostalCode’, width: 150 },
{ text: ‘Country’, datafield: ‘Country’, width: 150 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘hyperlinkbutton’, width: 150, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {editrowindex = row;
var id = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, editrowindex, “CustomerID”);
$.ajax({url: ‘@Url.Action(“Edit”,”Customer”)’,
type: ‘GET’,
data: { id: id },}
);
}
}]
});
// $(‘#jqxgrid’).bind(“rowselect”, function (event) {
// var row = event.args.rowindex;
// var customerid = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “CustomerID”);
// $.ajax({
// url: ‘@Url.Action(“EditCustomerByID”, “Customer”)’,
// type: ‘POST’,
// data: { customerid: customerid },
//
// });
//// }
// );
}
);
Controller class
public class CustomerController : Controller
{
private NorthwindEntities db = new NorthwindEntities();
public JsonResult GetCustomers()
{
var dbresult = db.Customers.ToList();
var customers = from Customer in dbresult
select new { Customer.CustomerID, Customer.CompanyName, Customer.ContactName, Customer.Address, Customer.PostalCode, Customer.Country, Customer.City }; return Json(customers, JsonRequestBehavior.AllowGet);}
// GET: /Customer/Edit/5public ActionResult Edit(string id)
{
Customer customer = db.Customers.Find(id);
return View(customer);
}My question is How to open a view because view is not opening.
Hello,
You can achieve that with few little changes in your code. You have to change the columnType to ‘button’.
Another thing you have to change is the body of the callback – buttonclick.
Here is the example:$(document).ready(function () { var data = { datatype: "json", datafields: [ { name: 'CustomerID' }, { name: 'CompanyName' }, { name: 'Address' }, { name: 'City' }], url: 'Customers/GetCustomers' }; var editrowindex = -1; $('#jqxgrid').jqxGrid({ width: 620, source: data, theme: 'energyblue', columns: [ { text: 'CustomerID', datafield: 'CustomerID', hidden: 'true' }, { text: 'Company Name', datafield: 'CompanyName', width: 250 }, { text: 'Address', datafield: 'Address', width: 150 }, { text: 'City', datafield: 'City', width: 150 }, { text: 'Edit', datafield: 'Edit', columntype: 'button', width: 50, cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { editrowindex = row; var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "CustomerID"); window.location = '/Customers/Edit/?id=' + id; } }] }); });
Best regards,
MinkojQWidgets Team
http://jqwidgets.com/Many many thanks.I hope u will support me like this.It works great!
Could u plz suggest how to acquire solid depth in jquery and asp.net mvc3?
Looking forward ur reply.Hello,
I’m glad that I was helpful. For ASP.NET MVC 3 you can start with these materials of http://www.asp.net/mvc/tutorials.
If you want to go further you can look at the book section http://www.asp.net/mvc/books.
For jQuery I recommend you jQuery Docs at http://docs.jquery.com/Main_Page.Best regards,
MinkojQWidgets Team
http://jqwidgets.com/I am using jqxGrid with a column “Edit” I am using button for this column.
My grid displays 6 columns and when I click on edit it should navigate to a page where I have data from 3 columns from grid for selected row as well as remaining fields data from database for the selected row.
When clicked on Save it should update the grid only for those 6 columns
I cannot implement using a window. I am using MVC 5 and Bootstrap 3.
Thanks,
SindCHello SindC,
Have you checked the demo Popup Editing? I think it may help you achieve your requirement.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar ,
Thanks Dimitar I was able to do that.
Thanks,
SindC -
AuthorPosts
You must be logged in to reply to this topic.