DroDownList displays [Object Object]

[Manash]

Hi I have issue with displaying dropdownlist [object object]. I tried everyway and even followed some solution in this issue but none worked. Its simple SelectListItem Bind to dropdownlist. Value is loading without any list. when you click it it displays the list but when you select the list item nothing changed and remain as loaded displaying [Object Object]. but how ever Developer toolls shows Dropdownlist value and text field values. Could you please kindly tell me why and where I am wrong. I am new to Kendo but OK with MVC I have used all other dropDownList using Html helper methods even using models, Enums etc. but why this simple Vlaue, text list is not displaying and selecting. but loading perfectly. Please I am really stuck with other places as well with different kendo grid bind to different tables. Please note I am using ADO.NET and stored Proc to retrieve data as I am migrating to MVC. Please see attached images as well. Hope someone will give me solution to this burning issues. -Please note in my Drondownlist editor template, when I used read metid (Line 14 - 17) I get list as 'undefined' without displaying [object object]. its again same SelectListItem only thing is I manually bind to datasource via read method. Do i have to do anything in DropDownChnage event. 

 

My Grid View. 

 

_CategiryGrid.cshtml

@model  IEnumerable<StB.ViewModels.CategoryViewModel>
@{
    var imagePath = "~\\Content\\images\\Info.gif";
}

@*//   Ajax Grid //   *@
@*@(Html.Kendo().Grid(Model).Name("CategoryGrid")*@
@(Html.Kendo().Grid<StB.ViewModels.CategoryViewModel>().Name("CategoryGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ClientCode).Hidden(true);
                columns.Bound(c => c.Category).ClientGroupHeaderTemplate("Category: " + "#= value#").Width(60);
                columns.Bound(c => c.Attribute).Title("Attribute").Width(100);

                columns.Bound(c => c.Description).Width(150); //.ClientTemplate(@"<div><img id='tooltipIconItem' src='@imagePath' ToolTip =#:data:ToolTip# /></div>" + @"<div> @Html.Label('fieldValueItem', #:data:Description#)</div>");

                columns.Bound(c => c.Required).Width(30); //.ClientTemplate(@"<div><img id='reqEdit' src='~\\Content\\images\\RedStar.gif' /></div>");

                columns.Bound(c => c.FieldType).Hidden(true);
                columns.Bound(c => c.DomainID).Hidden(true);
                columns.Bound(c => c.AttrType).Hidden(true);
                columns.Bound(c => c.Tooltip).Hidden(true);
                columns.Bound(c => c.FieldValue).Width(80).Title("Value").EditorTemplateName("FieldValueEditor").ClientTemplate("#:FieldValue #")
                .HtmlAttributes(new { id = "ddlFieldvalues" }); //.EditorTemplateName("FieldValueEditor");

            })
            .Editable(editabel => editabel.Mode(GridEditMode.InCell).Enabled(true))
             .Navigatable()
             .Scrollable()
            .Groupable()
            .Sortable()
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
            .AutoBind(false)
            .Pageable(pageable => pageable

                .ButtonCount(2))

           .DataSource(datasource => datasource
               .Ajax()
               .Read(read => read.Action("DisplayGridData", "HierarchyBuilder").Type(HttpVerbs.Post))
               .Update(update => update.Action("UpdateCategory", "HierarchyBuilder"))
               .ServerOperation(false)
               .Batch(true)
               .PageSize(60)
               .Model(model => model.Id(p => p.Attribute))
                   .Model(model =>
                   {
                       model.Field(f => f.Category).Editable(false);
                       model.Field(f => f.Attribute).Editable(false);
                       model.Field(f => f.Description).Editable(false);
                       model.Field(f => f.Required).Editable(false);
                       model.Field(f => f.FieldValue).Editable(true).DefaultValue("1");

                   })
               .Aggregates(aggregates => { aggregates.Add(p => p.Category == p.Category).Count(); })
               .Group(groups => groups.Add(m => m.Category))

               )
                       .Events(events => { events.Edit("onCategoryGridEdit").DataBound("onCategoryGridDataBound").Change("onCategoryGridChange"); })

)

@Html.Hidden("ClientCode", HttpContext.Current.Session["ClientCode"])

 

Model for Grid

CategoryViewModel

 public class CategoryViewModel
    {

        public string OrgCode { get;set;}
        public string SiteCode {get;set;}

        public string ClientCode { get; set; }
        public string StructureCode { get; set; }
        public string Category { get; set; }
        public string Attribute { get; set; }
        public string Description { get; set; }

        [UIHint("FieldValueEditor")]
        public string FieldValue { get; set;}

        public string AttrType { get; set; }
        public string Required { get; set; }
        public int FieldType { get; set; }
        public string DomainID { get; set; }
        public string Tooltip { get; set; }

        public IList<DomainViewModel> AllDomains { get; set; }
    }

 

Controller Action method (this is where I get drodowlist as SelectListiem list. I initially directly bound to Domain List and it displays list prefectly but with [object object]. Then I changed to SelectList by creating SelectListItem by reading Domain Model and loading Vlaue text into SelectListItem. I bound to SelectList. Results exactly same. then Finally I chnaged to SelectListItem as show by kendo documentation. Its very simple text value list. and my Grid FieldVlaue in categoryViewModel is string value. 

Below is my controller method 

public IEnumerable<SelectListItem> LoadDropDownlistForValueField(string type, string Client, bool required, string CurrentVal)

        {
            StB.DAL.Domain domainRepo = new DAL.Domain();
            List<StB.Models.Domain> domains = new List<Models.Domain>();
            domains = domainRepo.GetDomainValueList(type, Client, CurrentVal, required);

            SelectListItem sli = null;
            List<SelectListItem> selectlists = new List<SelectListItem>();
            foreach (var d in domains)
            {
                sli = new SelectListItem() { Text = d.ShortDescription, Value = d.Value, Selected = d.Value == CurrentVal };
                selectlists.Add(sli);
            }


            ViewData["FieldValueList"] = selectlists;
            return (System.Collections.Generic.IEnumerable<SelectListItem>)ViewData["FieldValueList"];
        }

 

 

below is my DropDownList editor template for my Grid column.

01.@(Html.Kendo().DropDownList()
02.            .Name("FieldValue")
03.            .HtmlAttributes(new { id = "ddlFieldValues" })
04.            .ValuePrimitive(true)
05.            .DataTextField("Text")
06.            .DataValueField("Value")
07.
08.            .AutoBind(false)
09.
10.            .Events(e => e.Change("onFiledVaueDropDownChange").DataBound("onFiledVaueDataBound"))
11.
12.                .BindTo((IEnumerable<SelectListItem>)ViewData["FieldValueList"])
13.
14.                //.DataSource(datasource =>
15.                //{
16.                //    datasource.Read(read => read.Action("LoadDropDownlistForValueField", "HierarchyBuilder").Data("additionalInfo('CategoryGrid')"));
17.                //})
18.
19.)

[Dimitar]

Hello Manash,

I have reviewed the code sample and noticed that in the CategoryViewModel the bound column property is of type string (string FieldValue). In order to properly bind the DropDownList, this has to be refactored to a class property:

[UIHint("ClientCategory")]
public CategoryViewModel Category
{
  get;
  set;
}

Then, the column can be bound to show the name (of CategoryViewModel in this case) as follows:

columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);

Please refer to the following Grid Custom Editor Demo in ASP.NET MVC, where the above is demonstrated.

Regards,
Dimitar
Progress Telerik

[Manash]

Hi Dimitar,

Thanks for replying and sorry for delay in answering. well, This is not issue with category and everything working good except FieldValue column. All I want is to load 3 different widegets (Dropdownlist, DateTimePicker and textbox) depending on Attribute and AttrType (Hidden Column). I need to requirements 

1. when grid is loaded and activated on tab (General tab) I need to load each wideget on FiledValue Column depending on AttrType. ONLY FieldValue column is editable. so when user click each Category it will expand and can see different inputs on same ValueField (Value title) column. Its a string value in Database 
2. When a user click Value cell then I need to load Dropdownlist and display like what currently doing. but I am loading and displaying DropDownList successfully but [Object object] is displayed and even it does not replace different selected value. I am simply using SelectListItem collection at DAL by refering some model classes wrting as simple text, value feild. Please note that I am dealing with Filedvalue column only. all happens there. for example 



edit mode
  
 switch(FieldType) { 
     case 1:
        if(AttrType=="DATE") 
              case 'DATE': 
                  Load datelicker 
        ELSE
          Load textbox
     case 2:  
        load dropdownlist
     case 3:
         load dropdownlist (with special attributes added)
  }

I need to resolve [object object] issue and also kindly advise me where to put these logic when just displaying and then when editing I believe I can load all these widgents on dataBinding events to load. Am I right? if so is there any sample showing to display ClientTemplate? And also when cell click I need to load values in DropDownlist with default entry selected if there is any value in Fieldvalue. for eample in Floor attribute there is "1" value and therefore dropdownlist should dsiplay 1-Flloor1 text in dropdownlist. if Category EQINFO expand and selected DOI (Date of Install) Attribute then I need to display datetime picker to edit (eDitor template) all other cases simple text box entry. all happens in same column. datetime is strored as text. so all string value. Please see Image4 for existing application developed in webforms using telerik.  
when you look at this image (Image4.jpg) you will get clear picture. Please I am really stuck in dropdownlist. I read your forum answers and your sample but all unsuccessful. I honetsly don't understand why since dropdownlist loads perfectly but with this issue. after all all are simple SelectListItem. this happens other tab (different table) as well. 

For example rackgrid (rack tab) all same (I got another issue as all 6 dropdownlist loads as rows instead I want to bind each into each column. Eg: one for Floor Column, other for Suite, Rack, sub rack and string etc. Horizonally but it loads as rows. I will give these details later but I want to resolve above 2 issues (Image RackViewGrid1.jpg)

Thanks

Manash

[Dimitar]

Hello Manash,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (DropDownList as column editor in the Grid).

With the above solution, the last column of the Grid is bound to a DropDownList an upon selecting a value, you will notice that the correct "Text" property is being shown in the Grid:

@(Html.Kendo().Grid<TelerikAspNetCoreAppGridDropDownList.Models.OrderViewModel>()
  .Name("grid")
  .Columns(columns =>
  {
    columns.ForeignKey(p => p.ProjectID, itemsList , "Value", "Text")
      .Title("DropDownList Here").Width(200);
  })
)

Please test the solution and verify that this is the expected result on your end? In case the issue continues to persist, please modify the example, so that the described issue is reproduced and then send it back to us for an additional review. This way, I will be able to examine it locally, troubleshoot the cause of the issue and advise you further.

I am looking forward to your response.

Regards,
Dimitar
Progress Telerik

[Manash]

Hi Dimitar,

Thanks a lot for the help. Well, I am getting an error when I tried to compiled this. I am using VS 2013 and .NET 4.5. So I updated to 4.6.1 but when I compiled it its giving an error. See attached image. Its not updating to 4.6.1. I updated telerik free trials to latest. The Nuget package is giving the forbidden error when updating. I am trying to follow your example as it is. I will update issues I have.  I think all assemblies packges.config does not get updated via Nuget. 

Below is packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Antlr" version="3.4.1.9004" targetFramework="net461" />
  <package id="bootstrap" version="3.3.2" targetFramework="net461" />
  <package id="jQuery" version="1.10.2" targetFramework="net461" />
  <package id="Microsoft.AspNet.Mvc" version="5.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Razor" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.WebPages" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net461" />
  <package id="Modernizr" version="2.6.2" targetFramework="net461" />
  <package id="Newtonsoft.Json" version="6.0.8" targetFramework="net461" />
  <package id="Respond" version="1.2.0" targetFramework="net461" />
  <package id="WebGrease" version="1.5.2" targetFramework="net461" />
</packages>

 

regards

Manash 

 

[Dimitar]

Hi Manash,

I am reattaching a modified version of the solution, where the target .NET Framework is now 4.5 and the .sln file is recreated with VS2012. I have also included the referenced packages in the archive, so you should be able to click-start the project.

Please let me know if this works.

Regards,
Dimitar
Progress Telerik