Kendo Grid Sorting of dropdownlist

[Iffath]

Hi Telerik Team,

We are
using kendo grid for our asp.net mvc4 application. We are facing below issue

Kendo grid has both text column type and dropdownlist column type in
its row cell.

The issue here is we were able to sort the columns that are text
but not the columns that have dropdownlist.  Kindly let know the workaround for resolving this issue.

Thanks
Loga

[Kiril Nikolov]

Hello Iffath,

In general the Kendo UI dataSource works with flat data which is why sorting, filtering, etc. does not work when bind to objects (I guess this is what you are doing in your scenario). A possible workaround is discussed in the following forum topic. Please take a look a and let me know if helps.

http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid---sort-on-column-bound-to-an-object.aspx
 
Regards,
Kiril Nikolov
Telerik

[Ilona]

Here is the solution in your problem.
 When you have dropdownlist in your grid column(you have to implemented with foreing key column). With this solution you can:
1)filter the rows by dropdownlist column
2)sort the rows by dropdownlist column
3)support inline row editing with custom editor template that implements a dropdownlist

           @(Html.Kendo().Grid(@Model.Floors)
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ID)
            .Width(80)
            .Hidden(true)
            .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
         ;
    columns.Bound(p => p.MasterHotelID)
        .Width(80)
        .Hidden(true)
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
       ;
    columns.Bound(p => p.Name)
        .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
        .ClientFooterTemplate("Total: #=count#")
    ;
    columns.Bound(p => p.Code)
        .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
   ;
    columns.Bound(p => p.PrefixInRooms)
    .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
    .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" });

    //columns.Bound(e => e.Building)
    //    .ClientTemplate("#=Building.Name#" + "<input class='DropDownDescriptor' type='hidden' name='Floors[#= index(data)#].BuildingID'  value='#= Building.ID #'/>")
    //    .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
     
    //    ;
    columns.Bound(p => p.IsActive)
        .Title("Is Active")
        .ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked': '' # class='chkbx' disabled='disabled' />")
        .HtmlAttributes(new { style = "text-align: center" })
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal " })
        ;
    columns.Bound(p => p.HexColor).Title("Color")
    .ClientTemplate("<div class='k-textbox' style='background-color:#=HexColor#;  height:25px; width:100%' ></div>");
    columns.Bound(p => p.DTCreated)
        .Title("DT Create")
        .ClientTemplate("#= KendoDateToString(DTCreated) #")
        .Hidden(true)
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
        ;
    columns.Bound(p => p.DTStamp)
        .Title("DT Update")
        .Hidden(true)
        .ClientTemplate("#= KendoDateToString(DTStamp) #")
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
        ;
    columns.Bound(p => p.UserCreate)
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
        .Hidden(true)
        ;
    columns.Bound(p => p.UserLastUpdate)
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
        .Hidden(true)
        ;

    columns.ForeignKey(p => p.BuildingID, HMS.Controllers.HotelSettingsController.BuildingsList.Where(i => i.MasterHotelID == Model.HotelMasterID), "ID", "Name")
        .EditorTemplateName("BuildingDropDownList")
           .Title("Building").Width(150);
    
    columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); })
        .HeaderHtmlAttributes(new { style = "overflow: visible; white-space:normal" })
    ;
}).ColumnMenu()
.Filterable()
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.ToolBar(toolbar => toolbar.Create())
.DataSource(ds =>
ds.Ajax()
        .ServerOperation(false)
        
.Events(events => events.Error("error_handler").RequestEnd("onRequestEnd"))

               

.Update(update => update.Action("EditingInlineFloors_Update", "HotelSettings"))
        .Create(create => create.Action("EditingInlineFloors_Create", "HotelSettings"))
        .Destroy(destroy => destroy.Action("EditingInlineFloors_Destroy", "HotelSettings"))
          .Aggregates(aggregates =>
                                                                           {
                                                                               aggregates.Add(p => p.Name).Count();
                                                                           })
.Model(mo =>
{
    mo.Id(e => e.ID);
    mo.Field(e => e.ID).Editable(false).DefaultValue(-1);
    mo.Field(e => e.BuildingID)
        .Editable(true)
        .DefaultValue(HMS.Controllers.HotelSettingsController.BuildingsList.Where(i => i.MasterHotelID == Model.HotelMasterID).First().ID)
        ;
    mo.Field(e => e.MasterHotelID).Editable(false).DefaultValue(Model.HotelMasterID);
    mo.Field(e => e.Name).DefaultValue(string.Empty);
    mo.Field(e => e.Code).DefaultValue(string.Empty);
    mo.Field(e => e.UserCreate).Editable(false);
    mo.Field(e => e.UserLastUpdate).Editable(false);
    mo.Field(e => e.DTCreated).DefaultValue(DateTime.Now).Editable(false);
    mo.Field(e => e.DTStamp).DefaultValue(DateTime.Now).Editable(false);
    mo.Field(e => e.IsActive).DefaultValue(true).Editable(true);
    mo.Field(e => e.HexColor).Editable(true).DefaultValue(HMS.Models.HotelSettings.Floor.DefaultColor);
    
})
)
.Groupable()
        .Sortable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(true))
.Events(i => i.Change("gridSelectionChange"))
            )

[Ilona]

And The Editor Template for the dropdownList column is

@model int
@using Kendo.Mvc.UI;

@{
    var buildingMasterID = HMS.Controllers.HotelSettingsController.BuildingsList.Where(i => i.ID == @Model).First().MasterHotelID;
    
    var source = HMS.Controllers.HotelSettingsController.BuildingsList
                        .Where(i => i.MasterHotelID == buildingMasterID //na ferei mono gia to sugkekrimeno hotel

                                     );
    }
@(Html.Kendo().DropDownListFor(m=>m
)
            .BindTo(source)                 
                .DataValueField("ID")
                .DataTextField("Name")                                                    
)