Kendo Grid Sorting not working correct

[Alok]

Hi,

Implementing Kendo grid  using jquery  with MVC4  .First I am binding data with html table then put kendo jquery for paging and sorting. but sorting is not working correct .  html and jquery are below:-



 <table id="grid" class="table table_hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Order ID </th>
                            <th>Source</th>
                            <th>Destination</th>
                            <th>Items</th>
                            <th>Schedule Date</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var i in Model)
                        {
                            DMETrackContext objDMETrackContext = new DMETrackContext();
                            var OrderItems = (from p in objDMETrackContext.InventoryOrderItems where p.OrderId == i.InventoryOrderId select p).ToList();
                            <tr>
                                <td>
                                    @i.Created                                                                    
                                </td>
                                <td>
                                    @i.OrderIdExternal                                  
                                </td>
                                <td>
                                    @if (i.SourceInvLocationId != null)
                                    {
                                        var LocationDetail = (from p in objDMETrackContext.InventoryLocations where p.InventoryLocationId == i.SourceInvLocationId select p).FirstOrDefault();
                                        if (LocationDetail != null)
                                        {
                                       // @Html.ActionLink(LocationDetail.Name, "LocationDetail", new { controller = "Location", Id = LocationDetail.InventoryLocationId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" });
                                         <a title="@LocationDetail.Name" href="@Url.Action( "LocationDetail", "Location", new {Id = LocationDetail.InventoryLocationId  })"  style = "color: rgb(58, 115, 206);">@LocationDetail.Name</a>

                                        }
                                        else
                                        {
                                        @: N/A
                                         }
                                    }
                                    else
                                    {
                                        @: N/A
                                    }

                                </td>
                                <td>
                                    @if (i.DestinationInvLocationId != null)
                                    {
                                        var LocationDetail = (from p in objDMETrackContext.InventoryLocations where p.InventoryLocationId == i.DestinationInvLocationId select p).FirstOrDefault();
                                        if (LocationDetail != null)
                                        {
                                      //  @Html.ActionLink(LocationDetail.Name, "LocationDetail", new { controller = "Location", Id = LocationDetail.InventoryLocationId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" });
                                         <a title="@LocationDetail.Name" href="@Url.Action( "LocationDetail", "Location", new {Id = LocationDetail.InventoryLocationId  })"  style = "color: rgb(58, 115, 206);">@LocationDetail.Name</a>
                                        }
                                        else
                                        {
                                        @: N/A
                                         }
                                    }
                                    else
                                    {
                                        @: N/A
                                    }


                                </td>
                                <td>
                                    @OrderItems.Count
                                </td>
                                <td>
                                    @i.ScheduleDate
                                  
                                </td>
                                <td>

                                    @if (i.Type == 1)
                                    {
                                        @: Customer Order
                    }
                                    else if (i.Type == 2)
                                    {
                                        @: Customer Pickup
                    }
                                    else if (i.Type == 3)
                                    {
                                        @:Transfer
                    }

                                </td>
                                <td>

                                    @if (i.Status == 1)
                                    {
                                        @: Pending
                    }
                                    else if (i.Status == 2)
                                    {
                                        @: Picked
                    }
                                    else if (i.Status == 3)
                                    {
                                        @:Complete
                    }
                                    else if (i.Status == 4)
                                    {
                                        @:Canceled
                    }

                                </td>
                                <td>
                                    @*@Html.ActionLink("Edit", "EditLocation", new { controller = "Location", Id = @i.InventoryLocationId })*@
                                    @Html.ActionLink("Details", "InventoryOrderDetail", new { controller = "InventoryOrder", Id = @i.InventoryOrderId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
<script>
$("#grid").kendoGrid({
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 15, pageSizes: [15, 50, 100], messages: {
                        display: "Showing {0}-{1} from {2} data items"
                    }
                }
            });

</script>

I also modify the Jquery code to add schema but it not working for the date filed and anchor tag data file

$("#grid").kendoGrid({
                dataBound: addRowClickFeature,
                dataSource: {                   
                    schema: {
                        model: {
                            fields: {
                                Created: { type: "date", format: "{0:dd/MM/yyyy}" },
                                OrderID: { type: "number" },
                                Source: { type: "string" },
                                Destination: { type: "string" },
                                Items: { type: "number" },
                                Date1: { type: "date", format: "{0:dd/MM/yyyy}" },
                                Type: { type: "string" },
                                Status: { type: "string" }
                            }
                        }
                    }
                },
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 15, pageSizes: [15, 50, 100], messages: {
                        display: "Showing {0}-{1} from {2} data items"
                    }
                }
            });


Please suggest  how to apply sorting by using jquery 

Thanks
Alok

[Vladimir Iliev]

Hi Alok,

Could you please try to specify the "data-field" attribute for the header cells (as demonstrated in this example) of the grid and check if the "sort" method of the dataSource start working as expected?

e.g.:

<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
<th data-field="date">Date</th>

Regards,
Vladimir Iliev
Telerik