JQGrid Charger les données de la liste déroulante

Question

Dans mon JQGrid, j'ai besoin de charger dynamiquement les données dans une liste déroulante dans la colonne "Société".

Vue:

<title>jqGrid for ASP.NET MVC - Demo</title> 
    <!-- The jQuery UI theme that will be used by the grid -->  
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" /> 
    <!-- The Css UI theme extension of jqGrid --> 
    <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />  
    <!-- jQuery library is a prerequisite for jqGrid --> 
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> 
    <!-- language pack - MUST be included before the jqGrid javascript --> 
    <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script> 
    <!-- the jqGrid javascript runtime --> 
    <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" /> 

    <script type="text/javascript"> 
     var myGrid = $('#list'); 
     $(function() { 
      $("#list").jqGrid({ 
       url: '/JqGridClients/DynamicGridData/', 
       datatype: 'json', 
       mtype: 'GET', 

       colNames: ['Edit', 'Address', 'Company', 'Name','Delete'], 
       colModel: [ 
      { name: 'ClientID', index: 'ClientID', search: false, width:30 , align: 'left', formatter: PKId_formatter }, 
      { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' }, 
      { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select', searchoptions: { dataUrl:'<%= Url.Action("GetDestinationList","JqGridClients") %>'}}, 
      { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}}, 
      { name: 'DelClientID', index: 'DelClientID', search: false, width:45, align: 'left', formatter: PKId_delete_formatter}], 
       pager: jQuery('#pager'), 
       rowNum: 10, 
       width: '100%', 
       height: '100%', 
       rowList: [5, 10, 20, 50], 
       sortname: 'ClientID', 
       sortorder: "desc", 
       viewrecords: true, 
       loadonce: true, 
       caption: 'Clients', 

      }).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" }); 

       $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' }); 

       $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid'); 

      // $("#pager").jqGrid('search', {multipleSearch: true,multipleGroup: true,recreateFilter: true,overlay: 0}); 
     }); 

     function PKId_formatter(cellvalue, options, rowObject) { 
    return '<a href="JqGridClients/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a>'; 
} 

function PKId_delete_formatter(cellvalue, options, rowObject) { 
    // return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm("Are you sure want to delete?");" class="ui-icon ui-icon-trash"></a>'; 
return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm(\'Are you sure want to delete?\');" class="ui-icon ui-icon-trash"></a>'; 
} 

    </script> 

    <h2>Index</h2> 

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

Controller Méthode pour charger des données DropDown

public JsonResult GetDestinationList() 
{ 
    JqGridClientRepository rep = new JqGridClientRepository(); 
    IEnumerable<Client> clients = rep.GetClients(); 
    var li = from s in clients 
      select new 
      { 
       Company = s.Company 
      }; 
    return Json(li, JsonRequestBehavior.AllowGet); 
} 

je peux actuellement pas voir une liste déroulante sur jqGrid

Answer 1

Vous avez spécifié les éléments suivants URL de la liste déroulante:

dataUrl: '<%= Url.Action("GetDestinationList", "JqGridClients") %>' } 

Donc, assurez-vous que cette action du contrôleur existe et renvoie une vue partielle contenant le code HTML de dropDown que vous voulez afficher dans l'en-tête:

public ActionResult GetDestinationList() 
{ 
    return PartialView(); 
} 

et la partie correspondante (GetDestinationList.ascx):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 

<select> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    ... 
</select> 

Lorsque l'on regarde la console de réseau dans votre navigateur, vous devriez être en mesure de voir la demande AJAX GET /JqGridClients/GetDestinationList être envoyé au serveur afin de récupérer le balisage pour la dropd posséder.

Answer 2

Si dataUrl retours tableau de chaînes au format JSON vous pouvez utiliser buildSelect pour convertir les données à <select> avec la liste des <option>. Vous pouvez trouver l'exemple de code correspondant dans the answer. Prenez en considération les changements dans jqGrid décrits dans mis à jour 2 partie de la réponse référencée. Ainsi, le

{ 
    name: "Company", 
    stype: "select", 
    searchoptions: { 
     dataUrl: '<%= Url.Action("GetDestinationList","JqGridClients") %>', 
     buildSelect: function (data) { 
      var s = "<select>", i, l, item; 
      if (data && data.length) { 
       for (i = 0, l = data.length; i < l; i++) { 
        item = data [i]; 
        s += '<option value="' + item + '">' + item + '</option>'; 
       } 
      } 
      return s + "</select>"; 
     } 
    } 
}