how to add combobox to Editor Template using Grid pop-up

[Balron]

Hello,i am a computer science student ,working for a small software company and totally newbie about KendoUI.
I have a MVC project  that connects to database ,get and shows data's on KendoUI grid.I would like to  use combobox on my custom editor template with KendoUI grid pop up.

There is Kendo combobox on Index page.It fetchs and shows records from db  with selected column().
I am using  Kendo grid -  pop up  as a  interface.There are add,edit, and update buttons.When i click add or edit button  pop up screen opens which is related to my custom template.Every command is working well(add,edit,delete)

The problem is when i add Kendo combobox to my custom editor template , it  shows nothing on grid.Edit and delete buttons are missing and when i click to add button it shows this ajax code.It looks like some problem about rendering.

{"Data":[],"Total":4,"AggregateResults":null,"Errors":null}

Here is my Kendo combobox code:

@(Html.Kendo().ComboBox()
  .Name("productComboBox") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
  .DataTextField("ALLERGYTYPE") //Specifies which property of the Product to be used by the combobox as a text.
  .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.
// .Filter(FilterType.Contains)
 .Placeholder("ALLERGYTYPE")

 .DataSource(source =>
 {
    source.Read(read =>
    {
        read.Action("GetProducts", "AllergiesData"); //Set the Action and Controller name
    })
    .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
 })

Getting data controller for combobox -

public JsonResult GetProducts()
{
    PHRDevEntities patient = new PHRDevEntities();


    return Json(patient.PR_PATIENTALLERGY, JsonRequestBehavior.AllowGet);


}

Another controller to get,create ,update etc.

public ActionResult Get([DataSourceRequest]DataSourceRequest request)
       {
           return Json(DataAccess.Get(request), JsonRequestBehavior.AllowGet);
       }


       public ActionResult CreateSingle([DataSourceRequest]DataSourceRequest request, TEntity itemNew)
       {
           return Json(DataAccess.Create(request, itemNew.ToArrayFromObject(), false, ModelState), JsonRequestBehavior.AllowGet);
       }

public ActionResult Create([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<TEntity> itemsNew)
       {
           return Json(DataAccess.Create(request, itemsNew, true, ModelState));
       }

       public ActionResult UpdateSingle([DataSourceRequest]DataSourceRequest request, TEntity itemUpdated)
       {
           return Json(DataAccess.Update(request, itemUpdated.ToArrayFromObject(), false, ModelState), JsonRequestBehavior.AllowGet);
       }


       public ActionResult DestroySingle([DataSourceRequest]DataSourceRequest request, TEntity itemToDelete)
       {
           return Json(DataAccess.Destroy(request, itemToDelete.ToArrayFromObject(), false, ModelState), JsonRequestBehavior.AllowGet);
       }

My custom editor template:

@model KendoUIMvcApplication1.DATA.PR_PATIENTALLERGY
       <strong>PR_PATIENTALLERGY</strong> <br />

        <table width="100%" cellspacing="5" style="margin:20px">
                                <tr>
                                    <td width="10%">@Html.LabelFor(model => model.PATIENTID)</td>
                                    <td width="40%">@Html.EditorFor(model => model.PATIENTID)
                                                    @Html.ValidationMessageFor(model => model.PATIENTID)</td>

                                    <td width="10%">@Html.LabelFor(model => model.DOCTOR)</td>
                                    <td width="40%" >@(Html.Kendo().ComboBox()
    .Name("productComboBox") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
    .DataTextField("ALLERGYTYPE") //Specifies which property of the Product to be used by the combobox as a text.
    .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.
   // .Filter(FilterType.Contains)
    .Placeholder("ALLERGYTYPE")

    .DataSource(source =>
    {
       source.Read(read =>
       {
           read.Action("GetProducts", "AllergiesData"); //Set the Action and Controller name
       })
       .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
    })
    //.SelectedIndex(0) //Select first item.

)
                             @Html.ValidationMessageFor(model => model.DOCTOR)</td>

                                </tr>
                     <tr>
                                 <td width="10%">@Html.LabelFor(model => model.ISACTIVE)</td>
                                    <td width="40%" >@Html.EditorFor(model => model.ISACTIVE)
                                                                @Html.ValidationMessageFor(model => model.ISACTIVE)</td>
                  </tr>
                            </table>

I have also DataAccess methods to control data.I can post them if it is needed.
He is the almost same problem with me:  stackoverflow

[Vladimir Iliev]

Hi Erhan,

 
Please check the example below of creating ComboBox editor for given field from the model:

• Remove the "ComboBox" widget from the PopUp editor template and replace it with "EditorFor":

  @model ForeignKeyColumnDemo.Models.Order
  
  
  @(Html.EditorFor(m => m.EmployeeID)
      //Use EditorFor HTMLHelper inside the PopUp template
  )

• Create new custom editor template under the EditorTemplates folder (for example with the name of the field that is targeted - "EmployeeID.cshtml" in current case) and use the ComboBoxFor HtmlHelper:  

  @model object
  
  @(Html.Kendo().ComboBoxFor(m => m)
      //Do not specify the Name option when ComboBoxFor is used as it will generate it automatically
      //based on the current property passed to the editor (EmployeeID in current case)
      .DataTextField("Name")
      .DataValueField("EmployeeID")
      .Placeholder("select employee")
      //you can use remote binding if needed
      .BindTo((IEnumerable<ForeignKeyColumnDemo.Models.Employee>)ViewData["employees"])
      )

• Specify the editor template for the field using "UIHint" data annotation attribute over the model property:   

  public class Order
  {
      public int OrderID { get; set; }
      public DateTime OrderDate { get; set; }
      public string OrderDescription { get; set; }
      //Specify the name of the editor template (EmployeeID.cshtml)
      [UIHint("EmployeeID")]
      public int EmployeeID { get; set; }
  }

Could you please try to implement the above solution and let us know of the result?

Kind Regards,
Vladimir Iliev
Telerik

[Balron]

Thanks for reply ,Vladimir.
I just replaced :

@(Html.Kendo().ComboBox()

With :

 @(Html.Kendo().ComboBoxFor(model=>model.ALLERGYTYPE)

on my custom editor template and now it is working.

Is there any KENDOUI combobox example about fetching data's from related tables that is connected with  foreign keys?

[Vladimir Iliev]

Hi Erhan,

 
Currently there is no such example which we can offer, however you can create ForeignKeyColumn and create custom editor with comboBox widget.

Kind Regards,
Vladimir Iliev
Telerik