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

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

1 Answer 648 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Meera
Top achievements
Rank 1
Meera asked on 21 Feb 2013, 06:13 PM
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);
        }


    }
}

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 25 Feb 2013, 09:49 AM
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!
Tags
Grid
Asked by
Meera
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or