Thursday, June 7, 2012

How to add custom templates in Telerik MVC Dropdownlist/Combobox control?

In Telerik MVC application you can use either Ajax or Server binding for populating comboboxes. Here I did it via Ajax binding but you can do similar thing for Server binding also.

In our controller class we need a method which will return Json object after Ajax call. Telerik combobox/dropdownlist does support html tags inside its text value so we use this feature and replace text column with image tags we fill.


        [HttpPost]
        public ActionResult _AjaxFillCombo()
        {
            //Populate list with your object
            List<OurObject> list =  OurObjectService.GetAll();


            //Customize a column in the list
            foreach ( OurObject obj in  list  )
            {
                obj.ImageLink = //Add custom <img /> tag in here with required fields as src attribute.
            }
           
            return new JsonResult
            {
                //Return list as SelectList, set ImageLink as text attribute.
                Data = new SelectList(list.ToList(), "Id", "ImageLink")
            };
        }


Image tag can be as following,

      <img class='...' style='...' title='...' alt='...' src = '" + obj.imageLocation + "' />

After that we need to tell combobox/dropdownlist that binding will be via Ajax binding,

      .DataBinding(binding => binding.Ajax().Select(" _AjaxFillCombo ", "ControllerName"))


Hope it helps.
P.S : If there is any typing or coding mistakes let me know. See you later.

No comments:

Post a Comment