My Mvc razor DropdownList with templates shows only undefined

[Attila]

Hi

Im struggling with figuring out what is wrong in my code. I have a DropdownList made like this:

@(Html.Kendo().DropDownListFor(model => model.CitizenAppartmentEnrollmentType)
		.Name("booking_CitizenAppartmentEnrollmentTypeDropdown")
		.DataSource(s => { s.Read(r => { r.Action("GetEnrollmentTypeList", "Booking"); }); })
		.DataTextField("EnrollName")
		.DataValueField("EnrollId")
		.Template("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.ValueTemplate("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.Height(400)
		.Events(e => { e.Change("booking_Dialog_EnrollmentType_DropdownOnChangeEvent"); })
		.HtmlAttributes(new { style = "width:375px", data_bind = "value:CitizenAppartmentEnrollmentType" })
	)

When I comment out the Template and ValueTemplate lines, the result looks like in the attached image "without Template". And when its not commented out the result becomes like in the other screenshot.

Heres the c# controller being called:

public class BookingController : Controller {
         private GS gs = new GS();
         public ActionResult GetEnrollmentTypeList() {
		if (TempData.ContainsKey("GS")) {
			gs = (GS)TempData["GS"];
			TempData.Keep();
		}

		if (gs.EnrollementTypeDic.ContainsKey(gs.CurrentFloorId)) {
			var enrollTypes = gs.EnrollementTypeDic[gs.CurrentFloorId];

			var booking_CitizenAppartmentEnrollmentTypeDropdown = enrollTypes.Select(x => new {
				EnrollId = x.Id,
				EnrollName = x.Name,
				EnrollColor = x.Color.Remove(1, 2)
			});
			return Json(booking_CitizenAppartmentEnrollmentTypeDropdown, JsonRequestBehavior.AllowGet);
		} 

		return Json(null, JsonRequestBehavior.AllowGet);
	}
}
  
	

The Controller 100% surely doesnt call the return Json(null); part, and debugging shows that the data being fed to the return Json, is exactly what i want.

I need the EnrollColor variable for making a small colored box in front of the EnrollName. Thats what the template html is for in my case. 

I followed this demo, where the first dropdown with the Categories is very similar to what i need, except I need simply some colored boxes, and not images. But should function just the same. And I also tried #: data.EnrollName # aswell as #= data.EnrollName # .. And if I dont put the .data there, the widget casts an error.

Any help please :)

[Attila]

I played around with it further, and noticed that the Model for the page is what #: data. # repressents, NOT the dataSource of the DropdownList. How can I instead reference the DataSource elements of the DropdownList instead of the Model of the page?

[Attila]

Cmon Support, A bit of help please. 

Is there a way to base the template's --> #: data.bla #  <-- be based on the dropdownList's dataSource instead of the View Page's Model?

Or do you have a thing on your DataSource object that I have overlooked?

I really need that color box infront of my dropdownList items.

[Eyup]

Hi Attila,

 

Thank you for contacting us.

You can try resolving this issue using these suggestions:

1. Replace : with =

.Template("#= data.CustomerID #.jpg")
2. Try escaping the hash literals:
.Template("\\\\#= data.CustomerID \\\\#.jpg")
As explained here:
https://docs.telerik.com/kendo-ui/framework/templates/essentials
3. Use a javascript handler and pass the HTML as a string after getting all the required data values in the javascript function:
.Template("#= buildCustomHtmlString(data) #.jpg")
I hope one of these options will work for your specific project.
P.S. I wanted to let you know that your license is shown as invalid in our system. Can you contact your company representative to attach an active license to your account?

 

Regards,
Eyup
Progress Telerik

[Attila]

Nice.. the escaping of the hashtags worked for me.

Thank you very much..