Telerik MVC Grid: Verwendung des DropDownList in einer Spalte?

Ich habe eine Telerik MVC grid, in einer MVC 3-Anwendung mit Razor, das ist Ajax-gebunden. Ich bin jetzt versucht, fügen Sie eine Dropdown-Liste der Spalte, so dass Benutzer können es in den Bearbeiten-Modus, aber kann nicht herausfinden, wie. Das raster zeigt eine Liste von Produkten, und ich möchte, dass die Dropdown-Liste enthalten eine Sammlung von ProductCategories, zu dem das Produkt zugeordnet werden können. Ich habe schon Stunden jetzt und ich bin aus Ideen heraus. Ich hoffe wirklich, dass hier jemand helfen kann 🙂

Ich habe verweisen auf eine Telerik demo, die sich hier.

Ich denke, der Teil, der hängt mir bis in einem help-view, dass die demo verwendet. In der demo, diese wird als "ClientEmployee(Editor)." In meinem Fall, ich habe die Helfer in einer Datei namens "ProductCategoryDropList.cshtml". In diesem Helfer, ich habe eine harte Zeit immer den DropDownList binden richtig. Ich denke, das könnte sein, weil ich bin nicht die Einrichtung der BindTo () - Methode mit den richtigen Daten, irgendwie. Ich habe markiert dieser Punkt der Verwirrung, in die Stichprobe DropDownList-Helfer-code unten mit "SomeCollectionReference", wie der erste parameter in einer "new SelectList ()" - Konstruktor-Aufruf. Wenn ich versuche ein "Modell", an dieser Stelle, bekomme ich eine NullReferecne Ausnahme. Wenn ich versuche, auf ViewBag Daten mit der Liste, ich bekomme eine Meldung ähnlich "die SelectList nicht ProductCategoryID Spalte" oder so ähnlich. Also, ich bin mir nicht sicher, was anderes zu versuchen.

Ich bin mir nicht sicher, wie klar diese Beschreibung meines Problems ist, aber in einer Anstrengung, um vollständig zu sein, ich habe den code, ich denke, relevant ist unten.

Controller:

public ActionResult Index()
{
    ViewBag.ProductCategories = new SelectList(_productCategoryService.GetActiveProductCategories(), "ProductCategoryID", "ProductcategoryName");
    var products = _productService.GetProducts().ToList();
    var presentationModel = _mapper.MapAsList(products);
    return View(presentationModel);
}

//
//GET: /Product/
[GridAction]
public ViewResult _Index()
{
    ViewBag.ProductCategories = new SelectList(_productCategoryService.GetActiveProductCategories(), "ProductCategoryID", "ProductcategoryName");
    return View(new GridModel<ProductPresentationModel>
                    {
                        Data = _mapper.MapAsList(_productService.GetProducts().ToList())
                    });
}

Anzeigen:

Dies ist ein bisschen lang, aber ich habe versucht, zu vereinfachen, indem du "//< - - - "Pulldown-Menü auswählen, Hier" neben der Spalte, in der ich versuche zu arbeiten mit.

@model IEnumerable<Models.PresentationModels.ProductPresentationModel>

@(Html.Telerik().Grid(Model).HtmlAttributes(new { style = "width: 100%;" })
        //Give the Grid an HTML id attribute value
        .Name("ProductGrid")
        //Establish the promiry key, to be used for Insert, Update, and Delete commands
        .DataKeys(dataKeys => dataKeys.Add(p => p.ProductID))
        //Add an Insert command to the Grid Toolbar
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
        //Using Ajax Data Binding to bind data to the grid
        .DataBinding(dataBinding => dataBinding
                //Ajax Binding
                .Ajax()
                    .Select("_Index", "Product")
                    //Home.Insert inserts a new data record
                    .Insert("Create", "Product")
                    //Home.Update updates an existing data record
                    .Update("Edit", "Product")
                    //Home.Delete deletes an existing data record
                    .Delete("Delete", "Product")
        )
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName).Width(120);
            columns.Bound(p => p.ProductDescription).Width(150);
            columns.Bound(p => p.PricePerMonth).Width(120);
            columns.Bound(p => p.ProductImagePath).Width(150)
            columns.Bound(p => p.ProductActive).Width(120)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#= ProductActive ? checked='checked' : '' #> />");
            columns.Bound(p => p.ProductCategoryName); //<--- DropList Here
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Image);
                commands.Delete().ButtonType(GridButtonType.Image);
            });
        })
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .ClientEvents(events => events.OnEdit("onEdit"))
        .Pageable()
        .Scrollable()
        .Sortable()
        .Filterable()
)

@section HeadContent {
    <script type="text/javascript">
        function onEdit(e) {
            $(e.form).find('#ProductCategoryName').data('tDropDownList').select(function (dataItem) {
                return dataItem.Text == e.dataItem['ProductCategoryName'];
            });
        }
    </script>
}

Modell:

[DisplayName(@"Category Name")]
[UIHint("ProductCategoryDropList"), Required]
[StringLength(255, ErrorMessage = @"Product Category Name cannot be more than 255 characters in length")]
public string ProductCategoryName
{
    get 
    {   
        string name = string.Empty;

        if (_model.ProductCategory != null)
        {
            name = _model.ProductCategory.ProductCategoryName;
        }

        return name;
    }
    set 
    {
        if (_model.ProductCategory != null)
        {
            _model.ProductCategory.ProductCategoryName = value;
        }
    }
}

Pulldown-Menü Helfer:

@model Models.PresentationModels.ProductPresentationModel

@(Html.Telerik().DropDownList()
        .Name("ProductCategoryName")
            .BindTo(new SelectList(<SomeCollectionReference>, "ProductCategoryID", "ProductCategoryName"))
)

ProductMapper:

public List<ProductPresentationModel> MapAsList(List<Product> products)
{
    //var categoryList = new SelectList(_productCategoryService.GetProductCategories().ToList(), "ProductCategoryID", "ProductCategoryName"); 

    var presentationModels = products
            .Select(x => new ProductPresentationModel()
            {
                ProductID = x.ProductID,
                ProductCategoryID = ((x.ProductCategory != null) ? x.ProductCategory.ProductCategoryID : 0),
                ProductCategoryName = ((x.ProductCategory != null) ? x.ProductCategory.ProductCategoryName : String.Empty),
                ProductName = x.ProductName,
                ProductDescription = x.ProductDescription,
                PricePerMonth = x.PricePerMonth,
                ProductImagePath = x.ProductImagePath,
                ProductActive = x.ProductActive,
                ProductCategories = new SelectList(_productCategoryService.GetProductCategories().ToList(), "ProductCategoryID", "ProductCategoryName")//categoryList
            }).ToList();

    return presentationModels;
}

InformationsquelleAutor campbelt | 2011-08-17

Schreibe einen Kommentar