How to load jqgrid on button click and send parameters to the action in jqGrid 4.6.0 in MVC

Question

I want to load every year's data in jqgrid when I click on a button and after loading a modal form and selecting the year from drop down list. a diagram of the steps but i don't know how to do this.

And this is my source code :

<!-- Page content -->
<div class="w3-content" style="max-width: 100%">

    <div class="container" style="width:40%;margin-top:2%">

        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Filter</a>

        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content"> 
                    <div class="modal-header">
                        <a href="#" dir="ltr" class="close" data-dismiss="modal">&times;</a> 
                    </div> 
                    <div class="modal-body"> 
                        <form id="myForm" dir="rtl"> 
                            <div class="form-group">
                                <label>Year</label> 
                                @Html.DropDownListFor(model => model.YEAR_ABBR, ViewBag.YearList as MultiSelectList, "--select--", new { @class = "form-control", @id = "ddlYear", multiple = "multiple" })
                            </div> 

                        </form> 
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                        <input type="reset" value="GetRep" class="btn btn-success" id="btnSubmit" />

                    </div>   </div> 
            </div>    </div>    </div>

    <div dir="rtl" align="center" style="overflow:auto" class="tablecontainer">
        <div id="rsperror"></div> 
        <table id="list" cellpadding="0" cellspacing="0"></table>
        <div id="pager" style="text-align:center;"></div>
    </div>

Now my script is something like this:

 <script type="text/javascript">

        $(document).ready(function () { 
                bindData();
                $("#btnSubmit").click(function () {  
                        $('#list').trigger('reloadGrid');   }) 
        }); 
        var bindData = function () {

            $('#list').jqGrid({ 
                url: '@Url.Action("Get_RepContracts","Home")', 
                postData:  {  YEAR_ABBR: function () { return $('#YEAR_ABBR').val(); }   },
                datatype: 'json',
                jsonReader: {
                    root: "Rows",
                    page: "Page", 
                }, 
                mtype: 'GET',
                //columns names
                colNames: ['Vahed_Descript'   ], 
                colModel: [
    { name: 'Vahed_Descript', index: 'Vahed_Descript', align: 'right', width: 200, sorttype: "number",    }  
        ],
        pager: $('#pager'),
       rowNum: 800,
        rowList: [ 800 ,1000],
        sortname: 'Vahed_Descript',   
        hidegrid: false,
        direction: "rtl",
        gridview: true,
        rownumbers: true,
        footerrow: true,
        userDataOnFooter: true,
        loadComplete: function () {
            calculateTotal();
            $("tr.jqgrow:odd").css("background", "#E0E0E0");
        },
        loadError: function (xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }   , loadonce: true 
        })   ;

And here the button code ( My modal form works well. when I click the filter button, the filter options in my modal form appear, and then I select the year from year dropdownlist in modal and then i click the report button, after that the below code fires and I can see the selected year's data in action "Get_RepContracts" but it does not bind to my jqgrid):

Thanks in Advance...

UPDATE : Now My code is like below :

$(document).ready(function () { 
                bindData();

       $("#btnSubmit").click(function () {
         var myPostData = $('#list').jqGrid("getGridParam", "postData");
                    $('#list').trigger('reloadGrid');
                    $("#myModal").modal("hide");
                })    });

        var bindData = function () {

            $('#list').jqGrid({  
                url: '@Url.Action("Get_RepContracts","Home")',  
                postData: {
                   YEAR_ABBR : function () { return $("#YEAR_ABBR").val();}, 
                 } , 
                datatype: 'json',
                jsonReader: { ........

`$("#grid").trigger("reloadGrid")` and in the grid part add this `,beforeRequest: function () { jQuery('#grid').jqGrid('setGridParam', { postData: { year: $('#year').val() } }); }` — Steve, Apr 11 '18 at 13:02
The above was an example of how to send parameters to the server via the jqGrid ajax request. Obviously the year parameter will probably vary for you. — Steve, Apr 11 '18 at 13:06
@Steve Thank you so much for your answer , but I don't know why it did not work for me. — s.sam, Apr 15 '18 at 04:04
Use the F12 console to work out what's going in. Is your javascript being called? is your ajax being posted? — Nick.Mc, Apr 15 '18 at 04:34
@Nick.McDermaid Thank you , Yeah, It is called perfectly every time i click the filter button and even I can see the selected year's data in the action , but I don't know why it's not being binded to jqGrid. — s.sam, Apr 15 '18 at 05:11
So in the network tab when you click on the ajax post and check the reponse, there is data there in the format that you expect? — Nick.Mc, Apr 15 '18 at 05:22
If `bindData();` is what binds the data then that needs to go into `success`. You have it outside the ajax call at the moment so it's just going to run it without waiting — Nick.Mc, Apr 15 '18 at 05:23
All your ajax does is calls a web endpoint and hides some divs. It doesn't do anything with the data that is returned. Let me go check some of my old code — Nick.Mc, Apr 15 '18 at 05:27
I believe you need to use the jqGrid `postData` property _inside_ the jqGrid definition. This lets you dynamically attach parameters to the jqGrid data url. So you could use postdata to add the year as a parameter to the jgGrid post. This https://stackoverflow.com/questions/13149747/jqgrid-set-focus-to-clicked-cell-and-implement-datepicker-in-ie-and-firefox is an example of automatically adding a parameter `startDate` to the jgGrid post. This way you don't need to have the seperate ajax call. — Nick.Mc, Apr 15 '18 at 05:38
@Nick.McDermaid Thank you so much for the answers, yes, bindData() is what binds the data and that needs to go into success and I think I used it in a wrong way.If i don't use a seperate ajax call then how to open popup form?? because i have many filter options in that form . — s.sam, Apr 15 '18 at 06:57
Can you edit your question and clarify what you have achieved? I thought you had he modal form sorted out but looking at your code you don't, right? You need to clarify what you've managed so far, otherwise I will make incorrect assumptions — Nick.Mc, Apr 15 '18 at 10:30
The first thing you need to do is confirm you can use the `postData` property. Add it to your jQuery initialisation with a hard coded value and confirm it works. Then use a hidden div and confirm that works. Then set your hidden div from your popup — Nick.Mc, Apr 15 '18 at 10:37
@Nick.McDermaid Thank you so much ,I edited my question, ( My modal form works well. when I click the filter button, the filter options in my modal form appear, and then I select the year from year dropdownlist in modal and then i click the report button, after that the below code fires and I can see the selected year's data in action "Get_RepContracts" but it does not bind to my jqgrid) — s.sam, Apr 16 '18 at 07:43
Glad your modal works. Now try using the postdata property as described in my prior comment. This is how I would make it work: 1. User sets year in modal popup. 2. Ok pressed in modal popup. 3. Modal popup calls refresh method on jqgrid. 4. In jqgrid, Postdata refers to year field in modal, so when it’s refreshed it passes the year parameter. That’s how I’ve done it in the past and it works. — Nick.Mc, Apr 16 '18 at 07:49
You’re getting your Ajax mixed up. Jqgrid already uses Ajax to populate. You just need to refresh it and make sure your year parameter is in postdata. Take a look at my question that I linked to. It uses postdata and refers to a field. That’s what you need to do. All your modal popup should do is call refresh on jqgrid. It shouldn’t call GetRepcontracts at all. There might be a way to bind it like you want but I wouldn’t know how to do that. — Nick.Mc, Apr 16 '18 at 07:53
@Nick.McDermaid I am really Thankful, But I tried the steps you said in the comment and again it did not work . when I pass OK in modal nothing happens. (I edited my question to show how I used postdata) — s.sam, Apr 18 '18 at 03:42
Please do not say 'not work'. This is a particuarly irksome expression for me. Instead please explain what happened - did you see no change in the grid? You need to use F12 console to decipher what is happening. Lastly, your modal dialog just needs to trigger the grid refresh. The OK button should hide the modal and just call `$('#list').trigger( 'reloadGrid' );`. https://stackoverflow.com/questions/3135171/how-to-refresh-the-data-in-a-jqgrid — Nick.Mc, Apr 18 '18 at 03:51
@Nick.McDermaid I edited the script in my question. I appreciate it if you take a look at it. I think I used it in a wrong way.After clicking OK the modal form doesn't close and data doesn't change. — s.sam, Apr 18 '18 at 10:17
You probably have a JavaScript error. What does the F12 console say? What happens when you step through the script? — Nick.Mc, Apr 18 '18 at 12:50
@Nick.McDermaid sorry for asking too much, i am still working on my problem , I understood that i had loadonce: true. that was why my grid reload did not work. now reload works but it does not send the year parameter to my action and my modal form does not close. can you help on this issue, please? — s.sam, Apr 24 '18 at 07:29
With regards to hiding the modal, I don't see any code to hide it. Does the Cancel button hide it? if so, maybe you need to add `data-dismiss="modal"` to the GetRep button also (if you are using bootstrap to manage all this). With regards to the grid refreshing, is it calling the web service? I can't see what's going on, that why you really need to use the F12 console. Go the network tab and see if the grid is calling the web service to get data or not. — Nick.Mc, Apr 24 '18 at 07:42
@Nick.McDermaid Thank you , with this code : $("#myModal").modal("hide"); Now the modal hides perfectly. But still year parameter is null , and network tab does not show anything. I mean when I debug it goes to my action (means it is calling the web service) but parameters are null. I can send you a pic on what network tab is showing. — s.sam, Apr 24 '18 at 08:05
I've looked at my working code and in order to get the selected value out of a dropdown I use `$("select#YEAR_ABBR option:selected").val()`. So... when your modal is up, press F12 and in the javascript console type `$('#YEAR_ABBR').val()`. Do you see anything? What about `$("select#YEAR_ABBR option:selected").val()`? At this point we need to confirm what javascript correctly scrapes the year out of your drop down — Nick.Mc, Apr 24 '18 at 11:43
@Nick.McDermaid I am really sorry, I think I am taking your time too much. in both cases it says undefined. — s.sam, Apr 25 '18 at 05:40
@sam: Is the id `YEAR_ABBR` correct (see `return $("#YEAR_ABBR").val();`)? You use `@id = "ddlYear"` as a parameter of `@Html.DropDownListFor`. It seems to me that you need just change `return $("#YEAR_ABBR").val();` to `return $("#ddlYear").val();` — Oleg, Apr 25 '18 at 06:03
@Oleg Thank you so much, It was exactly What the problem was. It worked perfectly : return $("#ddlYear").val(); vielen dank — s.sam, Apr 25 '18 at 06:33

score 1 · Accepted Answer · answered Apr 25 '18 at 06:46

It seems to me that you have small problem with the usage of correct id of select element. Your HTML code contains @id = "ddlYear" parameter of @Html.DropDownListFor:

@Html.DropDownListFor(
    model => model.YEAR_ABBR,
    ViewBag.YearList as MultiSelectList,
    "--select--",
    new {
        @class = "form-control",
        @id = "ddlYear",
        multiple = "multiple"
    }
)

but you still use

postData: {
    YEAR_ABBR: function () { return $("#YEAR_ABBR").val(); }
}

To solve the problem you should just modify the code to

postData: {
    YEAR_ABBR: function () { return $("#ddlYear").val(); }
}

How to load jqgrid on button click and send parameters to the action in jqGrid 4.6.0 in MVC

1 Answers1