ASP .NET MVC - Kendo Grid with Cascading DropDown List - Need Dropdown Text

2 posts, 0 answers
  1. Meera
    Meera avatar
    5 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    Hi Experts,
      I had downloaded the KendoGridWithCascadingCombo boxes example posted by admin and used the same concept in my code. I need help with the following

    1. I need to show the dropdown text instead of the value on the grid after editing.   The client template does not seem to work for InLineEditing



    Here is the code on my razor file 

    @using System.Web.Mvc.Html
    @using Kendo.Mvc.UI
    @model ModelSelectionViewModel

    @section Head {
        <script type="text/javascript">
            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors, function (key, value) {
                        if ('errors' in value) {
                            $.each(value.errors, function () {
                                message += this + "\n";
                            });
                        }
                    });
                    alert(message);
                }
            }

            function rowindex(dataItem) {
                var data = $("#ModelSelectionSearchCriteriaList").data("kendoGrid").dataSource.data()
                return data.indexOf(dataItem);
            }



            function filterCategory() {
                return {
                    media: $("#Media").data("kendoDropDownList").value()
                                };
            }


            function filterSubCategory() {
                return {
                    categoryId: $("#Category").data("kendoDropDownList").value()
                };
            }

        </script>
    }

       
    <div class="container">
        <div class="row-fluid">
            <div class="span12">
                <ul class="breadcrumb">
                    @Html.MvcSiteMap().SiteMapPath()
                </ul>
            </div>
            <!--/span-->
        </div>
        <!--/row-fluid-->
        <div class="row">
            <div class="span12">
                <div class="widget">
                    <div class="widget-header">
                        <i class="icon-star"></i>
                        <h3>
                            Model Selection Criteria Panel</h3>
                    </div>
                    <div class="widget-content">
                        @using (Html.BeginForm("GetData", "ModelSelection"))
                        { 
                            @(Html.Kendo().Grid(Model.ModelSelectionCriteriaList)
                                            .Name("ModelSelectionSearchCriteriaList")
                                        .HtmlAttributes(new { style = "width:100%;" })
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Media).HeaderHtmlAttributes(new { @title = "Media" }).Width(300).ClientTemplate("#=Media#"  +
                          // "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Media' value='#= Media #' />"
                          //);
                                    columns.Bound(c => c.Category).Title("Category").HeaderHtmlAttributes(new { @title = "Category" }).Width(300);
                          //          .ClientTemplate("#=Category #" + 
                          //  "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Category' value='#= Category #' />"
                          //);

                                    columns.Bound(c => c.SubCategory).Title("SubCategory").HeaderHtmlAttributes(new { @title = "SubCategory" }).Width(300);
                          //          .ClientTemplate("#=SubCategory#" +
                          //  "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].SubCategory' value='#= SubCategory #' />"
                          //);
                                    
                                  columns.Command( command => { command.Edit(); command.Destroy(); }).Width(200);
                                     })
                                .ToolBar(toolbar =>
                                {
                                    toolbar.Create().Text("Add New Criteria");
                                })
                                .Editable(editable => editable
                                    .Mode(GridEditMode.InLine)
                                    .DisplayDeleteConfirmation(false)
                                    )
                                .Scrollable()
                                .DataSource(datasource => datasource
                                    .Ajax()
                                    .ServerOperation(false)
                                    .Events(events => events.Error("error_handler"))
                                    .Model(model => model.Id(c => c.Id))
                                        .Create(update => update.Action("EditingInline_Create", "ModelSelection").Type(HttpVerbs.Post))
                                        .Destroy(update => update.Action("EditingInline_Destroy", "ModelSelection").Type(HttpVerbs.Post))
                                        .Update(update => update.Action("EditingInline_Update", "ModelSelection").Type(HttpVerbs.Post))
                                           // .Read(read => read.Action("EditingInline_Read", "ModelSelection").Type(HttpVerbs.Post))
                                        )
                                        )
                                        
                            <input id="save" type="submit" class="btn btn-primary" name="button" value="Search" />
                            @:&nbsp; &nbsp;
                         @Html.ActionLink("Reset Criteria", "Index", "ModelSelection", new { }, new { id = "btnReset", @class = "btn" })
                        }
                    </div>
                </div>
            </div>
        </div>
    ------------------------------------
    Editor Templates
    1. category.cshtml

    @model long
     
        
     @(Html.Kendo().DropDownListFor(m => m)
              .OptionLabel("Select Category...")
              .DataTextField("CategoryText")
              .DataValueField("CategoryId")
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetModelCategory", "ModelSelection")
                          .Data("filterCategory");
                  })
                  .ServerFiltering(true);
              })
              .AutoBind(false)
              .CascadeFrom("Media")
        )
         @Html.ValidationMessageFor(m => m)


    --------------------------------------------------------------
    2. media.cshtml
    @model long

        @(Html.Kendo().DropDownListFor(m => m)
              .OptionLabel("Select Media..")
              .DataTextField("MediaText")
                      .DataValueField("MediaId")
              .DataSource(source => {
                   source.Read(read => {
                       read.Action("GetModelMedia", "ModelSelection");
                   });
              })
        )
         @Html.ValidationMessageFor(m => m)

    3. subcategory.cshtml
    @model long
     @(Html.Kendo().DropDownListFor(m => m)
              .AutoBind(false)
              .OptionLabel("Select SubCategory...")
              .DataTextField("SubCategoryText")
                   .DataValueField("SubCategoryId")
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetModelSubCategory", "ModelSelection")
                          .Data("filterSubCategory");
                  })
                  .ServerFiltering(true);
              })
              .CascadeFrom("Category")
        )
         @Html.ValidationMessageFor(m => m)

    -----------------------------------------------------------------------------
    My Controller code is below

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using TIMS.Models;
    using TIMS.Areas.Alberta.SearchCriteria;
    using TIMS.Areas.Alberta.Services;
    using TIMS.Services;
    using TIMS.Areas.Alberta.ViewModels;
    using Kendo.Mvc.UI;
    using Kendo.Mvc.Extensions;
    using TIMS.Controllers;

    namespace TIMS.Areas.Alberta.Controllers
    {
        public class ModelSelectionController : BaseController
        {
            #region Protected Members
            protected IAlbertaLookupService albertaLkService;
            protected IAlbertaUserSessionService albertaUserSessionService;
            
            
            #endregion

            #region Constructor
            public ModelSelectionController(IAlbertaLookupService albertaLkService, IAlbertaUserSessionService albertaUserSessionService)
            {
                this.albertaLkService = albertaLkService;
                this.albertaUserSessionService = albertaUserSessionService;
            }
    #endregion

            public ActionResult Index()
            {
                ModelSelectionViewModel modelSelectionViewModel = new ModelSelectionViewModel();

                List<ModelSelectionSearchCriteria> sessionCriteria = new List<ModelSelectionSearchCriteria>();
                albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriteria;
                return View(modelSelectionViewModel);
            }

           
            public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
            {
                return Json(albertaUserSessionService.ModelSelectionSearchCriteriaData.ToDataSourceResult(request));
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
            {
                
                if (criteria != null && ModelState.IsValid)
                {
                    List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                    if (sessionCriterias.Count != 0)
                            criteria.Id = sessionCriterias[sessionCriterias.Count -1].Id + 1;
                    else
                        criteria.Id = 1;

                    sessionCriterias.Add(criteria);
                    albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
                }

                return Json(new[] { criteria }.ToDataSourceResult(request, ModelState));
            }
          

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
            {
                if (criteria != null )
                {
                    List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                    int index = 0;
                    for (int c = 0; c < sessionCriterias.Count; c++)
                        if (sessionCriterias[c].Id == criteria.Id)
                        {
                            index = c;
                            break;
                        }
                    sessionCriterias.RemoveAt(index);
                    albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
                }

                return Json(ModelState.ToDataSourceResult());  
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
            {
                if (criteria != null && ModelState.IsValid)
                {
                    List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                    int index=0;
                    for (int c=0; c < sessionCriterias.Count; c++)
                        if (sessionCriterias[c].Id == criteria.Id)
                        {
                            index = c;
                            break;
                        }

                    sessionCriterias[index].Media = criteria.Media;
                    sessionCriterias[index].Category = criteria.Category;
                    sessionCriterias[index].SubCategory = criteria.SubCategory;

                    albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
                }
                    

                return Json(ModelState.ToDataSourceResult());
            }


            public JsonResult GetModelMedia()
            {
                SelectList medias = albertaLkService.GetModelMediaList();

                return Json(medias.Select( p => new { MediaId = p.Value, MediaText = p.Text}) , JsonRequestBehavior.AllowGet);
            }

            public JsonResult GetModelCategory(long media)
            {
               
               SelectList categories = albertaLkService.GetModelMatrixCategoryList(media);

                return Json(categories.Select(p => new { CategoryId = p.Value, CategoryText = p.Text }), JsonRequestBehavior.AllowGet);
            }

            public JsonResult GetModelSubCategory(long categoryId)
            {
                SelectList subCategories = albertaLkService.GetModelMatrixSubCategoryList(categoryId);
               
                return Json(subCategories.Select(p => new { SubCategoryId = p.Value, SubCategoryText = p.Text }), JsonRequestBehavior.AllowGet);
            }

            public ActionResult GetData(ModelSelectionViewModel viewModel)
            {
              List<ModelSelectionSearchCriteria> sessionCriteria = albertaUserSessionService.ModelSelectionSearchCriteriaData;

              
             
                
              return View("result", viewModel);
            }


        }
    }

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 25 Feb 2013 Link to this post

    Hi Meera,

    To match the values to their text I would suggest to use the ForeignKeyColumn which requires collection of text value pairs as additional parameter. Please check the example below:

    //Set the editor template name
    columns.ForeignKey(p => p.VendorId, (System.Collections.IEnumerable)ViewData["vendors"], "VendorId", "VendorName").Width(20).HeaderHtmlAttributes(new { @title = "Vendor" }).Width(300);

    Kind Regards,
    Vladimir Iliev
    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
Back to Top