This is a migrated thread and some comments may be shown as answers.

ListView editing with dropdownlist

8 Answers 421 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 25 Jan 2013, 09:17 AM
Hello,i did the example with listview editing and it's ok.But if i have also a foreign key to category for example,how cand i use a dropdown list filled with the categories,in that template that appear when i press edit button?
in razor if possible.

Thanks in advance

8 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 29 Jan 2013, 08:56 AM
Hello Daniel,

You should either define an editor template for the model and include the dropdownlist in there or defined an editor template only for the field. In both cases the data for the dropdown can be passed either through the ViewData or the ViewBag.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 30 Jan 2013, 01:51 PM
the view code is looking like this:
@model IEnumerable<KendoUIMvcApplication2.ViewModels.ProductViewModel>

<div class="k-toolbar k-grid-toolbar">
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>

<script id="list-view-template" type="text/x-kendo-template">
    <div class="product-view">
            <dl>
                <dt>Product Name</dt>
                <dd>${ProductName}</dd>
                <dt>Unit Price</dt>
                <dd>${kendo.toString(UnitPrice, "c")}</dd>
                <dt>Units In Stock</dt>
                <dd>${UnitsInStock}</dd>
                <dt>Discontinued</dt>
                <dd>${Discontinued}</dd>
            </dl>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
            </div>
        </div>
</script>

@(Html.Kendo().ListView<KendoUIMvcApplication2.ViewModels.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("list-view-template")
    .DataSource(dataSource => dataSource
        .Model(model => model.Id("ProductID"))
        .PageSize(6)
        .Create(create => create.Action("ListViewEditing_Create", "Controls"))
        .Read(read => read.Action("ListViewEditing_Read", "Controls"))
        .Update(update => update.Action("ListViewEditing_Update", "Controls"))
        .Destroy(destroy => destroy.Action("ListViewEditing_Destroy", "Controls"))
    )
    .Pageable()    
    .Editable()
)

the ProductViewModel has a Uihint attribute
[HiddenInput(DisplayValue=false)]
        public int ProductID { get; set; }
        
        [UIHint("ProductCategoryViewModel")]
        [Display(Name="Category",Description="The category of the product")]
     
        public int CategoryID { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
        public short UnitsInStock { get; set; }
        public short UnitsOnOrder { get; set; }
        public bool Discontinued { get; set; }

In this moment it appears a dropdown,but is not populated.how can i pass the the data from viewData["Categories"] to the template for that control?
The other place where i used the uihint was in popup edit for grid,but there  is in the .ForeignKey method,but here there is no such method.so can you show me the way to bind the source to the dropdown for this case?

thanks
0
Daniel
Telerik team
answered on 01 Feb 2013, 12:14 PM
Hello again Daniel,

You can access the ViewData in the "ProductCategoryViewModel" editor template and pass it to the dropdown BindTo method e.g

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("CategoryID")
    .DataValueField("CategoryName")       
    .BindTo((System.Collections.IEnumerable)ViewData["Categories"])
})
Kind regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 04 Feb 2013, 09:56 AM

i already did that(creating the editor template) before puting the post,also the controller action looking like this
 public ActionResult ListViewEditing_Read([DataSourceRequest] DataSourceRequest request)
        {
            PopulateCategories();
            return Json(_productRepository.GetAll().ToDataSourceResult(request));
        }

but do i need anything else to setup in the view or somewhere else(see previous post) ?
comparing to the grid example,there was that foreignKey method to setup.
In this moment the dropdown is still empty and i cannot select anything.

Regards
0
Accepted
Daniel
Telerik team
answered on 06 Feb 2013, 07:59 AM
Hello Daniel,

The ViewData should be populated in the action that renders the View with the ListView instead of the one that is used for the read request. I attached a sample project which demonstrates this scenario.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 07 Feb 2013, 09:20 AM
Indeed,that was the problem,such a small detail,still very important.
Thank you for the example too.

Best Regards,
Daniel
0
Aaron
Top achievements
Rank 1
answered on 31 May 2013, 09:42 PM
Hi,

Is there a way to have separate edit templates. One for "Edit" and another for "Create New"?

Thanks,
0
Daniel
Telerik team
answered on 04 Jun 2013, 03:24 PM
Hello Aaron,

Separate edit templates for update and create are not supported. You could use the edit event to hide the unnecessary for the mode inputs.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Daniel
Top achievements
Rank 1
Aaron
Top achievements
Rank 1
Share this question
or