DropDown list template in Kendo UI Grid MVC only showing first value of several

Question

I have done all of the steps shown in the following question:

How can I set and get the value of a dropdownlist in a grid in Kendo UI MVC?

But in the end, only the first value of my list apears in the dropdownlist. For example, only "admin". I am unable to select other values in the popup edit mode (the style is dropdown list, but it will not open and the value "admin" is the only one visible).

Here is my View:

@(Html.Kendo().Grid<A.Models.Perm>()
    .Name("PermGrid")
    .Columns(columns =>
                 {
                     columns.Bound(r => r.Id).Visible(false);
                     columns.Bound(r => r.Name);
                     columns.Bound(r =>
                         r.PermType).EditorTemplateName("PermTypeEditor");
                     columns.Command(command =>
                                         {
                                             command.Edit() ;
                                         });
                 })
    .DataSource(datasoure => datasoure.Ajax()
                                .Model(model => model.Id(record => record.Id))
                                .Read(read => read.Action("GetAll", "Permi"))
                                .Update(update => update.Action("Update", 
                                    "Permi"))
                                .PageSize(10)
    )
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Sortable()
    .Selectable()
    .Events(e => e.Edit("onEdit"))
    .Pageable(pageable =>
                  {
                      pageable.Refresh(true);
                      pageable.PageSizes(true);
                  })
)

Controller:

public ActionResult GetAll([DataSourceRequest] DataSourceRequest request)
{
    var Permi = GetPermi();
    return Json(Permi.ToDataSourceResult(request, record => new
    {
        record.Id,
        record.Name,
        record.PermType,
    }));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update([DataSourceRequest] DataSourceRequest request, 
    Permission perm)
{

    if (perm != null && ModelState.IsValid)
    {
        _db.Update(perm);

        _db.SaveChanges();
    }

    return Json(ModelState.ToDataSourceResult());
}
private static IEnumerable<Permission> GetPermi()
{
    var dbs = new AFBContext();

    var list3 = (from Item1 in dbs.Permi.ToList() select Item1);
    return list3;
}

Model:

    public int Id { get; set; }

    public string Name { get; set; 

    [UIHint("PermTypeEditor")]
    public string PermType { get; set; }

TemplateEditor:

@model string

@(Html.Kendo().DropDownList()
    .Name("PermType") 
    .Value(Model)
    .SelectedIndex(0)
    .BindTo(new string[] { "Admin", "Guest", "Normal" }))

ok its seems it works on firefox and not chrome.

score 0 · Answer 1 · answered Jul 31 '13 at 09:41

I've been having the same problem, I can now get the list to load all items but only for the first row

in your foreign key template:

@(Html.DropDownList( "Column Name", new SelectList( new [] { "Admin", "Guest", "Normal" })))

your model is correct.

controller:

public ActionResult PermType_Read( [DataSourceRequest] DataSourceRequest request )
{
    return Json( GetPermiInfo().ToDataSourceResult( request ), JsonRequestBehavior.AllowGet );
}

private static IEnumerable<Permission> GetPermiInfo()
{
    var permi = GetPermi()

    // Try setting your list up like this, using your model
    return permi.Select( permissionInfo => new Permission
    {
        Id = permissionInfo.Id,
        Name= blogCommentInfo.Name,
        PermType = permissionInfo.PermTypeId? // I'm not sure if you have Id's for your different types
    } );
}

View:

@(Html.Kendo().Grid<Permission>()
       .Name( "grid" )
       .Columns( columns =>
       {
           columns.Bound( f => f.Id ).Hidden();
           columns.Bound( f => f.Name );
           columns.ForeignKey( c => c.ForeignKey, new SelectList( new[]{
               new {text="Admin",value = "1"},
               new {text="Guest",value = "2"},
               new {text="Normal",value = "3"},
           }, "value", "text" ) );
        } )
        .Pageable( pageable => pageable.ButtonCount( 5 ) )
        .Editable(ed=>ed.Mode(GridEditMode.InCell))
        .Scrollable()
        .DataSource( dataSource => dataSource
            .Ajax()
            .PageSize( 20 )
            .Model(model =>
            {
                model.Id(b => b.Id);
            })
            .Update(up=>up.Action("Update","Permi"))
            .Read( read => read.Action( "PermType_Read", "Permi" ) )                            
        )
        .Selectable( select => select.Mode( GridSelectionMode.Single ) )
)

Hopefully with this you can get a bit further, this is by no means the correct answer to your question, just trying to help so that other people can help us lol

excalty ! same problem here, only first row are visible :( – Ahad Porkar Jul 31 '13 at 11:42 — Ahad Porkar, Jul 31 '13 at 11:42

score 0 · Accepted Answer · answered Jan 09 '14 at 11:47

OK this is old one but i find what was the problem. one thing before that , the problem fixed automatically and then apears after few days. ive checked the page with firebug and the find out there was a two call method for Jquery/import class in app ! one in sharedlayout and other one in the unique view(above one) ! the one in shared layout connects to jquery site and download the latest one but the one in view was using the local one. at first the webserver firewall was blocking the first one and site goes smoooth. but when the firewall fixed out the jquery url the duplicate Jquery call/import avoids dropsdown to works normaly. so i removed the second one at problem fixed out.

DropDown list template in Kendo UI Grid MVC only showing first value of several

2 Answers2