Telerik MVC grid, unable to make a dropdownlist on Ajax editing

Question

I'm trying to implement a Telerik MVC grid with Ajax Editing. Basically, it's a class of groups, and every group belongs to an organisation, and I need to show on the edit mode a dropdownlist with the possible organisations to choose.

I've followed the tutorials and this forum but I cannot make it work.

This is my code:

Model:

Partial Public Class hdmtGROUP

    <ScaffoldColumn(False)>
    Public Property gID As Integer

    Public Property gORG As Integer

    'Dropdownlist.
    <UIHint("_OrgDropDownListPartial"), Required()>
    Public Property Organisation As String

    <DisplayName("Name")>
    <Required(ErrorMessage:="A {0} is required.")>
    <StringLength(120, ErrorMessage:="{0} is too long.")>
    Public Property gNAME As String

    <DisplayName("Description")>
    <Required(ErrorMessage:="A {0} is required.")>
    <StringLength(2000, ErrorMessage:="{0} is too long.")>
    Public Property gDESC As String

    Private _hdmtORG As hdmtORG
    Public Overridable Property hdmtORG As hdmtORG
        Friend Get
            Return _hdmtORG
        End Get
        Set(ByVal value As hdmtORG)
            _hdmtORG = value
        End Set
    End Property

End Class

Partial Public Class Organisation
    Public Id As Integer
    Public Name As String
End Class

My controller:

    Public Class GroupController
    Inherits System.Web.Mvc.Controller

    Private unitOfWork As UnitOfWork = New UnitOfWork()

    Function Index() As ViewResult
        PopulateOrgsDropDownList()
        Return View(Me.unitOfWork.GroupRepository.Get())
    End Function

    <GridAction()>
    Public Function AjaxSelect() As ActionResult
        Return View(New GridModel(Me.unitOfWork.GroupRepository.Get()))
    End Function

    Private Sub PopulateOrgsDropDownList(Optional selectedOrg As Object = Nothing)
        ViewData("orgs") = Me.unitOfWork.OrgRepository.Get() _
                            .Select(Function(o) New With {.Id = o.orgID, .Name   =o.orgNAME}) _
                            .OrderBy(Function(o) o.Name)
    End Sub

My view:

'declare the grid and enable features
Dim grid = Html.Telerik().Grid(Model) _
                    .Name("Grid") _
                    .DataKeys(Function(k) k.Add(Function(g) g.gID)) _
                    .Pageable() _
                    .Sortable() _
                    .Filterable() _
                    .ToolBar(Function(t) t.Insert()) _
                    .DataBinding(Function(dataBind) dataBind.Ajax() _
                                    .Select("AjaxSelect", "Group") _
                                    .Insert("Create", "Group") _
                                    .Update("Edit", "Group") _
                                    .Delete("Delete", "Group"))
'Add grid columns
grid.Columns(Function(columns) columns.Bound(Function(g) g.gNAME).Width(200))
grid.Columns(Function(columns) columns.Bound(Function(g) g.gDESC).Width(200))
grid.Columns(Function(columns) columns.Bound(Function(g) g.Organisation).Width(200))
grid.Columns(Function(columns) columns.Command(Function(s) {s.Edit().ButtonType(GridButtonType.BareImage), s.Delete.ButtonType(GridButtonType.BareImage)}).Width(65))
'Render the grid
grid.Render()  
function onEdit(e) {
    $(e.form).find('#Organisation').data('tDropDownList').select(function (dataItem) {
        return dataItem.Text == e.dataItem['Organisation'];
    });
}

And the partial view:

@imports System.Collections
@imports Telerik.Web.Mvc.UI
@(Html.Telerik().DropDownList() _
      .Name("Organisation") _
      .BindTo(New SelectList(DirectCast(ViewData("orgs"), IEnumerable), "Id", "Name")))
@

I would appreciate any help.

Thanks a lot.

Answer 1

You made wrong by creating _OrgDropDownListPartial as partial view. You should put your all UiHint attributed codes in Views\Shared\EditorTemplates folder.

In your case , you should move all your _OrgDropDownListPartial partial view codes into a Views\Shared\EditorTemplates_OrgDropDownListPartial.ascx file

Answer 2

I understand what you're talking about but I guess I'm missing something.

The Organisation class I need to load in the column is this:

Partial Public Class hdmtORG

    Public Property orgID As Integer
    Public Property orgNAME As String

    Private _hdmtGROUPs As ICollection(Of hdmtGROUP) = New HashSet(Of hdmtGROUP)
    Public Overridable Property hdmtGROUPs As ICollection(Of hdmtGROUP)
        Friend Get
            Return _hdmtGROUPs
        End Get
        Set(ByVal value As ICollection(Of hdmtGROUP))
            _hdmtGROUPs = value
        End Set
    End Property

End Class

I'm following this example, with a Unit of Work and Generic Repository, for my model:

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/implementing-the-repository-and-unit-of-work-patterns-in-an-asp-net-mvc-application

The point is that I understand I'm not loading properly my Organisations (hdmtORG) to show them on my groups (hdmtGROUP) Grid column. I had to make private my property hdmtORG in hdmtGROUP to avoid the circular reference error. When I make the query, if I add the parameter "including hdmtORG", the ORGs are loaded in my model, I can see it in the view as Model(0).hdmtORG.orgNAME. But there's no way to show them on the grid.Columns. When I try something like this

grid.Columns(Function(columns) columns.Bound(Function(g) g.hdmtORG.orgNAME))

I cannot access because GET of hdmtORG is not accesible and it asks me for a string value.