how to pass current jqgrid row value to combolist action method in Edit Form (2023)

Archived Forums 201-220

>

jQuery for the ASP.NET Developer

  • Question

  • how to pass current jqgrid row value to combolist action method in Edit Form (1)

    Sign in to vote

    User1984354752 posted

    Hi developers.

    I have an Edit form coming from a jqgrid. In the Edit form I have a combox fed by a action controller which expects a parameter value from the selected row . In other words ...I want to pass the selected value of the below IdContract_Amounts row to the dataUrl of the combobox. I guess that I have to code a function on x event but I fail to reproduce something worth trying.

    View

    name: 'IdContract_Amounts', index: 'IdContract_Amounts', editable: true, hidden: true, editrules: { edithidden: true }, edittype: "select", editoptions: {
    dataUrl: '/Contract_Amounts/combolist_ContractAmounts', --> This dataURL is incorect as I have to pass a parameter ( see controller below).
    datatype: "json",
    aysnc: false,
    buildSelect: function (data) {
    var response = jQuery.parseJSON(data);


    var s = '<select>';
    // s += '<option value="0">---Select Service Provider---</option>';

    $.each(response, function () {
    s += '<option value="' + this.ID + '">' + this.Scope_of_Works + '</option>';

    });

    return s + '</select>';
    }
    }
    },

    Controller

    public ActionResult combolist_ContractAmounts(int IdContract_Amounts)
    {
    var query = (from i in basededatos.Contractamountsrepository.Getlist(filter: y=>y.IdContract== IdContract_Amounts) select i).ToList();

    var results = from i in query
    select new Contract_Amounts()
    {
    ID = i.ID,
    Scope_of_Works= i.Scope_of_Works
    };

    return (Json(results, JsonRequestBehavior.AllowGet));
    }

    Thanking you in advance.

    Regards

    Friday, May 8, 2020 12:38 PM

Answers

  • how to pass current jqgrid row value to combolist action method in Edit Form (3)

    Sign in to vote

    User-1330468790 posted

    Hi 9peculiar,

    Previous Suggestion:

    I don't know which version of the jqgrid you are using but the event and themethod should be the same for your case.

    The "dataUrl" property of the "editoptions" object could be defined as a callback function which contains (rowid, value, name) parameters. Thereturn value of this callback function is an URL which you could use toretrieve data from server side.

    Edited Suggestion:

    You could not use getRowData method when you are editing the row so that you have to use a workaround. Store the row data before editing the row.

    I tried to construct a demo to demonstrate how to access the other column's data in the same row.

    You could refer to below code for more details.

    View:

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><div id="jqgrid"> <table id="grid"></table> <div id="gridpager"></div></div>@section Scripts { <!-- JqGrid --> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script> <script type="text/javascript"> $(document).ready(function () { console.log("Start"); var lastsel2; var EditRow; $("#grid").jqGrid({ url: '/Contract_Amounts/getData', datatype: "json", mtype: 'GET', colNames: ['Id', 'IdContract Amounts'], colModel: [ { name: 'Id', index: 'Id', width: 55, sortable: false, editable: true }, { name: 'IdContract_Amounts', index: 'IdContract_Amounts', editable: true, edittype: "select", editoptions: { dataUrl: function (rowid) { var IdCell = $('#grid').getRowData(rowid); console.log(EditRow); return '/Contract_Amounts/combolist_ContractAmounts?IdContract_Amounts='+EditRow.Id; }, datatype: "json", aysnc: false, buildSelect: function (data) { var response = jQuery.parseJSON(data); var s = '<select>'; $.each(response, function () { s += '<option value="' + this.ID + '">' + this.Scope_of_Works + '</option>'; }); return s + '</select>'; } } } ], jsonReader: { repeatitems: false }, rowNum: 10, rowList: [10, 20, 30], pager: $('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", onSelectRow: function (id) { if (id && id !== lastsel2) { $('#grid').saveRow(lastsel2); EditRow = $('#grid').getRowData(id); $('#grid').editRow(id, true); lastsel2 = id; } }, }).navGrid('#gridpager'); }); </script>

    Contract_Amounts Model:

     public class Contract_Amounts { public int ID { set; get; } public string Scope_of_Works { set; get; } public int IdContract_Amounts { set; get; } }

    WorkModel Model:

     public class WorkModel { public int Id { get; set; } public string IdContract_Amounts { set; get; } }

    Controller:

    // GET: Contract_Amounts public ActionResult Index() { return View(); } public ActionResult combolist_ContractAmounts(int IdContract_Amounts) { var results = new List<Contract_Amounts>(); if (IdContract_Amounts == 1) { results.Add(new Contract_Amounts() { ID = 1, Scope_of_Works = "Scope1", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 2, Scope_of_Works = "Scope2", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 3, Scope_of_Works = "Scope3", IdContract_Amounts = IdContract_Amounts }); } else { results.Add(new Contract_Amounts() { ID = 4, Scope_of_Works = "Scope4", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 5, Scope_of_Works = "Scope5", IdContract_Amounts = IdContract_Amounts }); } return (Json(results, JsonRequestBehavior.AllowGet)); } public ActionResult getData() { List<WorkModel> lists = new List<WorkModel>() { new WorkModel { Id=1, IdContract_Amounts="Scope1-1" }, new WorkModel { Id=2, IdContract_Amounts="Scope2-1" } }; return Json(lists, JsonRequestBehavior.AllowGet); }

    Demo:

    how to pass current jqgrid row value to combolist action method in Edit Form (5)

    Best regards,

    Sean

    See Also
    Jqgrid table column Options edittype to text, checkbox, select, textarea, function, hyperlink, add custom Buttons __jqgrid
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

    Friday, May 15, 2020 7:24 AM

  • how to pass current jqgrid row value to combolist action method in Edit Form (6)

    Sign in to vote

    (Video) Power Apps Form Control Tutorial - New Edit Form

    User1984354752 posted

    Dear Sean:

    Apologies for the late feedback. This is what I was looking for …..thanks very much for your assistance.

    Best regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

    Wednesday, May 27, 2020 7:47 PM

(Video) How to Use a List Items Edit Form to Quickly Add or Edit Items in a Combo Box in Microsoft Access

All replies

  • how to pass current jqgrid row value to combolist action method in Edit Form (8)

    Sign in to vote

    User-1330468790 posted

    Hi 9peculiar,

    Do you mean passing the parameter through query string?

    For example,

    name: 'IdContract_Amounts', index: 'IdContract_Amounts', editable: true, hidden: true, editrules: { edithidden: true }, edittype: "select", editoptions: {dataUrl: '/Contract_Amounts/combolist_ContractAmounts?IdContract_Amounts=1', --> This dataURL is incorect as I have to pass a parameter ( see controller below).datatype: "json",aysnc: false,buildSelect: function (data) {var response = jQuery.parseJSON(data);

    That way, the parameter will be passed to the action as a query string named "IdContract_Amounts".

    As I can see that you are using HttpGet to fetch data, which is not as the same as theHttpPost way.

    Hope this can help you.

    Best regards,

    Sean

    Monday, May 11, 2020 11:43 AM

    (Video) How to use PATCH Function in Power Apps | Insert and Update data

  • how to pass current jqgrid row value to combolist action method in Edit Form (10)

    Sign in to vote

    User1984354752 posted

    Hi Sean:

    Thanks for your prompt assistance. I daresay I'm half way on this. I got I have to build the query string with the IdContract_Amounts . The issue is that I don't know how to get it from the selected cell in the jqrid. I mean I want to get the IdContractAmounts from the jqgrid. I don't know the method and the events of the jqgrid that allows me to get the value.

    Hope you can assist me further

    Best regards.

    ,

    Tuesday, May 12, 2020 7:53 PM

  • how to pass current jqgrid row value to combolist action method in Edit Form (12)

    Sign in to vote

    User-1330468790 posted

    Hi 9peculiar,

    Previous Suggestion:

    I don't know which version of the jqgrid you are using but the event and themethod should be the same for your case.

    The "dataUrl" property of the "editoptions" object could be defined as a callback function which contains (rowid, value, name) parameters. Thereturn value of this callback function is an URL which you could use toretrieve data from server side.

    (Video) Power Apps Gallery Edit Form Tutorial for Beginners

    Edited Suggestion:

    You could not use getRowData method when you are editing the row so that you have to use a workaround. Store the row data before editing the row.

    I tried to construct a demo to demonstrate how to access the other column's data in the same row.

    You could refer to below code for more details.

    View:

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><div id="jqgrid"> <table id="grid"></table> <div id="gridpager"></div></div>@section Scripts { <!-- JqGrid --> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script> <script type="text/javascript"> $(document).ready(function () { console.log("Start"); var lastsel2; var EditRow; $("#grid").jqGrid({ url: '/Contract_Amounts/getData', datatype: "json", mtype: 'GET', colNames: ['Id', 'IdContract Amounts'], colModel: [ { name: 'Id', index: 'Id', width: 55, sortable: false, editable: true }, { name: 'IdContract_Amounts', index: 'IdContract_Amounts', editable: true, edittype: "select", editoptions: { dataUrl: function (rowid) { var IdCell = $('#grid').getRowData(rowid); console.log(EditRow); return '/Contract_Amounts/combolist_ContractAmounts?IdContract_Amounts='+EditRow.Id; }, datatype: "json", aysnc: false, buildSelect: function (data) { var response = jQuery.parseJSON(data); var s = '<select>'; $.each(response, function () { s += '<option value="' + this.ID + '">' + this.Scope_of_Works + '</option>'; }); return s + '</select>'; } } } ], jsonReader: { repeatitems: false }, rowNum: 10, rowList: [10, 20, 30], pager: $('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", onSelectRow: function (id) { if (id && id !== lastsel2) { $('#grid').saveRow(lastsel2); EditRow = $('#grid').getRowData(id); $('#grid').editRow(id, true); lastsel2 = id; } }, }).navGrid('#gridpager'); }); </script>

    Contract_Amounts Model:

     public class Contract_Amounts { public int ID { set; get; } public string Scope_of_Works { set; get; } public int IdContract_Amounts { set; get; } }

    WorkModel Model:

     public class WorkModel { public int Id { get; set; } public string IdContract_Amounts { set; get; } }

    Controller:

    // GET: Contract_Amounts public ActionResult Index() { return View(); } public ActionResult combolist_ContractAmounts(int IdContract_Amounts) { var results = new List<Contract_Amounts>(); if (IdContract_Amounts == 1) { results.Add(new Contract_Amounts() { ID = 1, Scope_of_Works = "Scope1", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 2, Scope_of_Works = "Scope2", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 3, Scope_of_Works = "Scope3", IdContract_Amounts = IdContract_Amounts }); } else { results.Add(new Contract_Amounts() { ID = 4, Scope_of_Works = "Scope4", IdContract_Amounts = IdContract_Amounts }); results.Add(new Contract_Amounts() { ID = 5, Scope_of_Works = "Scope5", IdContract_Amounts = IdContract_Amounts }); } return (Json(results, JsonRequestBehavior.AllowGet)); } public ActionResult getData() { List<WorkModel> lists = new List<WorkModel>() { new WorkModel { Id=1, IdContract_Amounts="Scope1-1" }, new WorkModel { Id=2, IdContract_Amounts="Scope2-1" } }; return Json(lists, JsonRequestBehavior.AllowGet); }

    Demo:

    how to pass current jqgrid row value to combolist action method in Edit Form (14)

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

    Friday, May 15, 2020 7:24 AM

  • how to pass current jqgrid row value to combolist action method in Edit Form (15)

    Sign in to vote

    User1984354752 posted

    Dear Sean:

    Apologies for the late feedback. This is what I was looking for …..thanks very much for your assistance.

    Best regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

    Wednesday, May 27, 2020 7:47 PM

    (Video) Form Control in Power Apps | Must know features & properties

Videos

1. PowerApps Patch Function
(Shane Young)
2. Editable Grid in Power Apps | SharePoint List
(Reza Dorrani)
3. jQuery Ajax CRUD in ASP.NET Core MVC using Popup Dialog
(CodAffection)
4. ASP .NET Core MVC CRUD Operations with Foreign key using CodeFirst Approach
(CodeS)
5. jQuery data table implementation in ASP NET Core MVC | .NET Core 6.0 Full Tutorial
(Nihira Techiees)
6. Edit Detail Delete using Modal Popup in ASP.NET CORE
(ASP.NET MVC)

References

Top Articles
Latest Posts
Article information

Author: Dong Thiel

Last Updated: 17/10/2023

Views: 6643

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.