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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich es geschafft, diese arbeiten, etwas, aber ich habe noch eine Frage. hier ist, was ich geändert habe, um es arbeiten:
Erstellt eine ViewData Objekt im controller, so ...
Dann, habe ich das ViewData Objekt in der DropDownListHelper, wie diese ...
Meine Frage ist nun ... muss ich das ViewData Objekt? Ich würde gerne in der Lage zu verwenden, eine Eigenschaft, von meinem Modell. Aber für einige Grund mein Modell ist immer NULL im inneren der Helper-Datei. Und wenn ich versuche das DropDownList-code innerhalb der Grid-Erstellung-code, der DropDownList funktioniert überhaupt nicht.
So, habe ich irgendwelche andere Möglichkeiten?
InformationsquelleAutor campbelt
Derzeit ich stehe vor demselben problem wie du schreibst und es ist wirklich wahr, was Telerik Jungs schrieb Sie. Teilansicht ist pre-gerendert auf dem server (Inhalt). Dies kann ausreichend sein, die Lösung, wenn Sie die Liste der zulässigen Werte ist die statische, aber...
...vorstellen, dass Sie wollen, um verschiedene Liste der zulässigen Werte für jede grid-Zeile. In diesem Fall ist dieses Konzept nicht realisierbar.
Da gibt es nur eins-Kombination (pro Spalte) im Netz, nur eine Lösung, die ich fand, ist zu behandeln onEdit raster Falle, wo können Sie die databind-Kombinationsfeld erlaubt, Werte, die mit AJAX. In der grid-onEdit-handler können Sie den Zugriff auf alle Datenfelder der richtigen Zeile, so dass Sie Sie verwenden können, für die Bindung Zwecke.
Grüße, Ondrej.
InformationsquelleAutor Ondrej Bechera
Fragte ich den guten support Leute bei Telerik über diese. Hier ist die Antwort, die Sie mir gab:
An dieser Stelle, ich werde das akzeptieren dieser Beitrag als Antwort auf meine Frage. Es ist bedauerlich, dass ich die Annahme meiner eigenen Antwort in diesem Fall, aber ... naja, ich habe nicht alle anderen, die, zum von zu wählen 🙂
InformationsquelleAutor campbelt