Display my data in jqGrid

Question

Hello,

In an ASP.NET MVC application using for the first time jqGrid.

I have a menu, I call "employee" from the menu in the master page like this :

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $(".mnuEmployee").click(function() {
            $.post("/Employee/Index", null, function(data) {
                $("#text").html(data);
            });
        });
    });
</script>

In the controller, I have this :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index()
{
    EmployeeModel model = new EmployeeModel();
    model.List =  _employeeService.List();
    model.Languages = _languageService.List();
    return View("Index", model);
}

In the View (Index.ascx), I have this :

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#sandgrid").jqGrid({
            url: '/Employee/MyGridData/',
            datatype: 'json',
            mtype: 'GET',
            height: 255,
            width: 600,
            colNames: ['Index', 'Name', 'Code'],
            colModel: [
            { name: 'item_id', index: 'item_id', width: 65 },
            { name: 'item', index: 'item', width: 150 },
            { name: 'item_cd', index: 'item_cd', width: 100}],

            pager: jQuery('#sandgridp'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'item_id',
            sortorder: "desc",
            viewrecords: true,


            caption: 'Liste des employés'
        });
    }); 
</script>
<table id="sandgrid" cellpadding="0" cellspacing="0"></table>
<div id="sandgridp"  style="text-align:center;"></div>

The problem is in this last part (I think), I have all datas in my model, I'd like display employee list in a jqGrid and languages (and more are coming) in classic textbox, textarea, ... How can I use the "model.List" (IList) to show in the grid ?

Thanks,

Answer 1

What is the reason to show languages in textbox/textarea? Did you mean select? If so then look at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules, for the "select" edit type. Note that you can have multiselect list.

If you just want to display languages, then do this in your model:

model.Languages = string.Join(_languageService.List().Select(x => x.Name).ToArray(), ",");

And then jqGrid will display your languages as a string, comma-separated.

But I'd suggest you to decide (since it's not clear from the Q):

• how you want to display languages/list
• do you want to edit them and how

Also take a look at custom formatters http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter, you can write a function to convert your languages list into anything you want, on input you get data, on output you return string with any HTML. Don't forget "unformatter" if you need to edit the cell value. For example, I use custom formatter to display checkbox images instead of true/false text.

Answer 2

I'm a little confused. You have your jqGrid set up to do an AJAX query for it's data as JSON so there's no need to include in in the Index view's model.

url: '/Employee/MyGridData/',
datatype: 'json',

To use the AJAX method your controller needs a MyGridData action.

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult MyGridData ()
{
    var list =  _employeeService.List();
    return Json(list);
}

Also, the name and index properties in the colModel must match the property names in your model.