2 votes

colonne jqGrid avec une liste de sélection qui émule Html.DropDownListFor

J'essaie d'utiliser jqGrid pour une interface utilisateur assez complexe. La grille devra éventuellement comporter une colonne déroulante, un autocompléteur et une colonne de boutons. Pour l'instant, j'ai du mal à comprendre comment mettre en place une colonne avec une balise select qui remplit les valeurs d'une liste IEnumerable sur mon modèle, définit la valeur sélectionnée initiale d'une propriété sur mon modèle, et modifie cette propriété lorsque l'utilisateur modifie la valeur de l'élément select liste. Par exemple, disons que j'ai ces modèles :

public class GridRowModel 
{
    public int GridRowModelId { get; set; }
    public string SomeText { get; set; }
    public int SomeSelectOptionId { get; set; }
}

public class SelectOption 
{
    public int SomeSelectOptionId { get; set; }
    public string Description { get; set; }
}

public class SomeModel {
    public int SomeModelId { get; set; }
    public IEnumerable<GridRowModel> GridRowModels { get; set; }
    public IEnumerable<SelectOption> AllSelectOptions { get; set; }
}

El AllSelectOptions propriété de SomeModel est configuré dans le contrôleur, ainsi que tout le reste du modèle. Le contrôleur possède également une méthode GetSomeModelGridRows qui renvoie un tableau de GridRowModel pour la jqGrid rows . Ensuite, j'ai Razor qui ressemble à quelque chose comme ça :

@model SomeModel
<table id="someModelGridRows" cellpadding="0" cellspacing="0"></table>
<div id="pager" style="text-align: center;"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#someModelGridRows").jqGrid({
            url: '@Url.Action("GetSomeModelGridRows")',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['GridRowModelId', 'Text', 'Select Option'],
            colModel: [
                { name: 'GridRowModelId', index: 'GridRowModelId', hidden: true },
                { name: 'SomeText', index: 'SomeText' },
                { name: 'SomeSelectOptionId', index: 'SomeSelectOptionId', edittype: 'select', 

**?? is this where I would do something and if so, what ??**

            ],
            //the rest of the grid stuff
        });
    });
</script>

Dans une situation de non-réseau, cela serait simple en utilisant la fonction Html.DropDownListFor aide. Y a-t-il un moyen de l'utiliser ici ? Est-ce que je m'y prends mal et/ou est-ce que c'est possible ?

2voto

AJ. Points 6588

Je crois que j'ai trouvé la solution en utilisant TPeczek 's Lib.Web.Mvc et son projet type très utile . Lib.Web.Mvc est disponible sur Nuget et permet d'encapsuler le format de données nécessaire au renvoi de JSON du contrôleur vers la grille. Pour toute personne rencontrant ce problème à l'avenir....

Contrôleur :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetClientContactsAndProviders(JqGridRequest request)
{
    var clientId = CookieHelper.GetClientIdCookieValue();
    var contacts = _clientRepo.GetContactsForClient(clientId).ToList();
    //I do not want paging, hence TotalPagesCount = 1.
    //PageIndex increments automatically in JqGridResponse, so start at 0.
    var response = new JqGridResponse
                       {
                           TotalPagesCount = 1,
                           PageIndex = 0,
                           TotalRecordsCount = contacts.Count
                       };
    foreach(var contact in contacts)
    {
        response.Records.Add(new JqGridRecord(contact.Id.ToString(),
                                              new List<object>
                                                  {
                                                      contact.Id,
                                                      contact.ClientId,
                                                      contact.ClientContactId,
                                                      contact.ContactId,
                                                      contact.ContactTypeId,
                                                      contact.Description,
                                                      contact.ContactName,
                                                      contact.ContactPhone,
                                                      string.Empty,
                                                      contact.ContactComments
                                                  }));
    }
    return new JqGridJsonResult {Data = response};
}

Ensuite, la liste déroulante est remplie dans une vue partielle avec un modèle de Dictionary<int, string> :

@model Dictionary<int, string>
<select>
    <option value=""></option>
    @foreach(KeyValuePair<int, string> value in Model)
    {
        <option value="@value.Key.ToString()">@value.Value</option>
    }
</select>

Rédiger un Action qui renvoie le dictionnaire dans le partiel :

public ActionResult ContactTypes()
{
    var contactTypes = new Dictionary<int, string>();
    var allTypes = _cacheService.Get("contacttypes", _contactRepo.GetAllContactTypes);
    allTypes.ToList().ForEach(t => contactTypes.Add(t.ContactTypeId, t.Description));
    return PartialView("_SelectList", contactTypes);
}

Enfin, la grille elle-même (Razor), avec la liste déroulante définie dans le champ Type colonne :

$(document).ready(function () {
    $("#clientContacts").jqGrid({
        url: '@Url.Action("GetClientContactsAndProviders")',
        datatype: 'json',
        mtype: 'POST',
        cellEdit: true,
        cellsubmit: 'clientArray',
        scroll: true,
        colNames: ['Id', 'ClientId', 'ClientContactId', 'ContactId', 'HiddenContactTypeId', 'Type', 'Who', 'Phone', '', 'Comments'],
        colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'ClientId', index: 'ClientId', hidden: true },
            { name: 'ClientContactId', index: 'ClientContactId', hidden: true },
            { name: 'ContactId', index: 'ContactId', hidden: true },
            { name: 'HiddenContactTypeId', index: 'HiddenContactTypeId', hidden: true },
            {
                name: 'Type',
                index: 'ContactTypeId',
                align: 'left',
                width: 180,
                editable: true,
                edittype: 'select',
                editoptions: {
                    dataUrl: '@Url.Action("ContactTypes")',
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                var idSplit = $(this).attr('id').split("_");
                                $("#clientContacts").jqGrid('setCell', idSplit[0], 'HiddenContactTypeId', $(this).attr('value'), '', '');
                            }
                        }
                    ]
                },
                editrules: { required: true }
            },
            { name: 'Who', index: 'ContactName', width: 200, align: 'left', editable: true, edittype: 'text' },
            { name: 'Phone', index: 'ContactPhone', width: 100, align: 'left', editable: false },
            { name: 'Button', index: 'Button', width: 50, align: 'center' },
            { name: 'Comments', index: 'ContactComments', width: 240, align: 'left', editable: true, edittype: 'text' }
        ],
        pager: $("#pager"),
        rowNum: 20,
        sortname: 'Id',
        sortorder: 'asc',
        viewrecords: true,
        height: '100%'
    }).navGrid('#pager', { edit: false, add: true, del: false, search: false, refresh: false, addtext: 'Add Contact/Provider' });
});

Espérons que cela aidera quelqu'un à l'avenir, et merci encore à @TPeczek.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X