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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • amitabha82
    Member

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

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


    Minko
    Blocked

    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,
    Minko

    jQWidgets Team
    http://jqwidgets.com/


    amitabha82
    Member

    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.


    Minko
    Blocked

    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,
    Minko

    jQWidgets Team
    http://jqwidgets.com/


    sindc
    Participant

    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,
    SindC


    Dimitar
    Participant

    Hello SindC,

    Have you checked the demo Popup Editing? I think it may help you achieve your requirement.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    sindc
    Participant

    Hi Dimitar ,

    Thanks Dimitar I was able to do that.

    Thanks,
    SindC

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.