locked
how to pass current jqgrid row value to combolist action method in Edit Form RRS feed

  • Question

  • 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

  • User-1330468790 posted

    Hi 9peculiar,

    Previous Suggestion:  

    I don't know which version of the jqgrid you are using but the event and the method 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. The return value of this callback function is an URL which you could use to retrieve 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:

      

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 7:24 AM
  • 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

All replies

  • 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 the HttpPost way.

      

    Hope this can help you.

    Best regards,

    Sean

    Monday, May 11, 2020 11:43 AM
  • 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
  • User-1330468790 posted

    Hi 9peculiar,

    Previous Suggestion:  

    I don't know which version of the jqgrid you are using but the event and the method 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. The return value of this callback function is an URL which you could use to retrieve 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:

      

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 7:24 AM
  • 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