ListView editing with dropdownlist

9 posts, 1 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Jan 2013 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 29 Jan 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 30 Jan 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 01 Feb 2013 Link to this post

    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!
  6. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 04 Feb 2013 Link to this post


    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
  7. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Feb 2013 Link to this post

    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!
  8. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 07 Feb 2013 Link to this post

    Indeed,that was the problem,such a small detail,still very important.
    Thank you for the example too.

    Best Regards,
    Daniel
  9. Aaron
    Aaron avatar
    14 posts
    Member since:
    Jan 2012

    Posted 31 May 2013 Link to this post

    Hi,

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

    Thanks,
  10. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Jun 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready