Post JqGrid values to MVC controller

Question

I have following JqGrid with a checkbox column:

$(document).ready(function() {
        $("#tblJQGrid").jqGrid({
            url: 'Home/GetDataForCompanyJqGrid',
            datatype: "json",
            mtype: 'GET',
            colNames: ['CompanyID', '', 'Offices'],
            colModel: [
            { name: 'CompanyID', index:'CompanyID', key:true, hidden:true},
            { name: 'check', index: 'check', width: 50, align: 'center', editable: true, edittype: 'checkbox', editoptions: {value: "True:False"}, formatter: "checkbox", formatoptions: {disabled: false}},
            { name: 'Description', index: 'CompanyName', width: 200, align: 'center' }],
            rowNum: 10,
            data: {},
            sortname: 'CompanyName',
            viewrecords: true,
            sortorder: "desc",
            height: "auto",
            caption: "List Offices:"});
    });

My JqGrid contains a checkbox column and I want to post the value of my CompanyID column, if the rows' checkbox is checked, to my MVC controller. I tried to post all rows' values first to my MCV ActioResult by specifying a action in my html form action="@Url.Action("ExportData", "MyControler")" but I only get null in my ActionResult. Can anyone help me with an idea how I can achieve to post values from my jqgrid to my MVC ActionResult?

Your question is not full clear. Do you fill `check` with some values from the server or all checkboxes are not selected initially and the user should select someone and you need to send the selected CompanyIDs to the server? I suppose that you should **remove** `name: 'check'` column and to add `multiselect: true` option instead. You use `rowNum: 10` and no `loadonce: true` option. Do you implemented **server side paging** in `'Home/GetDataForCompanyJqGrid'`? What will be if it returns more as 10 rows? Which format has data returned from `'Home/GetDataForCompanyJqGrid'`? — Oleg, Aug 25 '16 at 08:58
If the format of data returned from `'Home/GetDataForCompanyJqGrid'` like array of items `{"CompanyID": 123, "CompanyName": "some name"}` then you can remove `CompanyID` column and use `jsonReader: { id: "CompanyID" }`. Every grid row (`` element) has `id` attribute (rowid). If the values from `CompanyID` are unique then it would be good to use the values as the rowid. You will probably have the grid with **one column only**. — Oleg, Aug 25 '16 at 09:01
Which version of jqGrid you use (have to use) and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? I develop free jqGrid fork. If I correctly understand what you do, then your code of `GetDataForCompanyJqGrid` can be very easy and the JavaScript very easy too and you need use `loadonce: true, multiselect: true, forceClientSorting: true, multiPageSelection: true`. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/multiPageSelection.htm) as the basis. — Oleg, Aug 25 '16 at 09:06
Yes the checkboxes are not selected initially and the user has to select some and I then want to send the selected CompanyIDs to the server. Paging isn't needed because there won't be more than 6 rows. I read the jqgrid data first from a database maybe that information helps you because of the question regarding the format of the data. Sry if I can't give you as much detailed information as you might need but it's my first project with mvc, jqgrid and so on. — FabianJ, Aug 25 '16 at 09:09

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

I'd recommend you to use multiselect: true instead of the column name: 'check'. Additionally you can return from the controller action GetDataForCompanyJqGrid the data in very simple form, for example, the following:

[
    {"CompanyID": 123, "CompanyName": "Company name 1"},
    {"CompanyID": 345, "CompanyName": "Company name 2"},
    ...
    {"CompanyID": 456, "CompanyName": "Company name N"}
]

and to use the code like

$("#tblJQGrid").jqGrid({
    url: 'Home/GetDataForCompanyJqGrid',
    datatype: "json",
    colNames: ['Offices'],
    colModel: [
        { name: 'CompanyName', width: 200, align: 'center' }
    ],
    multiselect: true,
    jsonReader: { id: "CompanyID" },
    rowNum: 1000, // no local paging
    viewrecords: true,
    height: "auto",
    caption: "List Offices:"
});

inside of $(document).ready. You can use $("#tblJQGrid").jqGrid("getGridParam", "selarrrow") to get the array of CompanyIDs of selected items. You can add a button on the page and to use $("#tblJQGrid").jqGrid("getGridParam", "selarrrow") and then $.ajax of the information to the server. You can use for example

var ids = $("#tblJQGrid").jqGrid("getGridParam", "selarrrow");
$.ajax({
    type: "POST",
    url: 'Home/ExportData',
    data: {
        selectedIds: ids.join() // send comma separated ids
        // ExportData action should have parameter with the name selectedIds
    }
});

See the old answer for the corresponding code example.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 25 '16 at 09:26

Oleg

220,925
34
403
798

Is it possible to send a Array of selectedIds? – FabianJ Aug 25 '16 at 10:39
@FabianJ: everything is possible, but the usage `ids.join()` in JavaScript code and the usage of `var ids = selectedIds.Split(',');` in your C# code produces the most simple and clear code. It's the way, which I recommend you. Any other code required more C# code to customize binding, but it will do the same at the end. See [the answer](http://stackoverflow.com/a/9508310/315935) as an example. – Oleg Aug 25 '16 at 10:53
could you please give me an example, how my ActionResult should look like? Because I still only get null. I tried it with `public ActionResult ExportData(string selectedIds)` – FabianJ Aug 25 '16 at 11:09
@FabianJ: It's a little difficult because it's unclear which version of MVC or Web API you use. Do you use `[HttpPost]`? Do you verified that you post correct data to the server? You can use Network tab of Developer Tools of IE/Chrome to see HTTP traffic. – Oleg Aug 25 '16 at 11:23
I guess the issue is maybe elsewhere because I still had the old action specified in my form and submitted the form with submit button so I think it didn't call the `$.ajax`. I should first change my Button and then try again. – FabianJ Aug 25 '16 at 11:29
I've got the submit button `` and try to call the `$.ajax` with `$("#dlBttn").click(function() { var ids = $("#tblJQGrid").jqGrid("getGridParam", "selarrow"); $.ajax({ type: "POST", url: 'Home/ExportData', data: { selectedIds: ids.join() } }); });` but after the button click it doesn't call the `ActionResult`. Is something wrong with my click function? – FabianJ Aug 25 '16 at 13:11
@FabianJ: I never use Submit button. You have to use `$("#dlBttn").submit` instead of `.click` and call `preventDefault` inside. I prefer to use `` which make no submit itself. Then you can use `$("#dlBttn").click` in the same way like you do it already. – Oleg Aug 25 '16 at 13:31
I changed the button type to "button" now but still nothing happens after the button click. – FabianJ Aug 25 '16 at 13:43
@FabianJ: I write you before about HTTP trace, which you can make in less then 1 min. If you write "nothing happens" it gives no information. Do you added `error` and `success` callbacks in jQuery.ajax call? I asked you about version of MVC, which you use, but I get no answer. I can't help you if I you don't provide more information. Your original question was about jqGrid, but now you have problem with sending of simple string via jQuery.ajax to MVC controller and I really not sure what wrong thing you do. – Oleg Aug 25 '16 at 15:50
Sorry for giving you not the information you asked me for, I don't use [HttpPost], I didn't added `error` and `success`callbacks and am using MVC version 5.2.3.0 I looked up if there is a http request after the button click with fiddler but there is no, the last http request is when I read the data from db to write it into the jqgrid – FabianJ Aug 26 '16 at 07:04
The problem seems to be the `data: { selectedIds: ids.join()}` in my .ajax call. I tried to change the data to a usual var, changed the data to `data: {testvar: "test"}` then I got a request to server with the string "test". – FabianJ Aug 26 '16 at 07:52
@FabianJ: Do you verified that you use `$.ajax` *after* the grid is created and *after* ids is set by `ids = $("#tblJQGrid").jqGrid("getGridParam", "selarrrow");`. You should just debug your code in Developer Tools. You can include `console.log(ids);` and `console.log(ids.join());` or to use `alert` instead of `console.log`. – Oleg Aug 26 '16 at 08:29
I use `$.ajax` after the grid is created and after ids is set by `ids = $("#tblJQGrid").jqGrid("getGridParam", "selarrow");` I added a `alert` after setting `ids` with `alert(ids)` the result is `null` – FabianJ Aug 26 '16 at 08:57
@FabianJ: `"selarrow"` is not the same as `"selarrrow"` !!! See exactly my answer and the names on jqGrid options [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options) – Oleg Aug 26 '16 at 09:09
It works now! I feel pretty dumb that it didn't work only because I misspelled "selarrrow"... Thank you for being so patient with me Oleg. – FabianJ Aug 26 '16 at 09:17
@FabianJ: You are welcome! By the way, the stupid name `selarrrow` come from three words: select, array and row. It's bad name, but it is old and it stay so for compatibility reasons. – Oleg Aug 26 '16 at 09:22

Post JqGrid values to MVC controller

1 Answers1