set column width, sort not working right.

[Guru]

Hi,

Following is my code which tries to create kendo grid based on table data. Inside the kendo grid section, how can I add columns width? Also, sorting on currency columns (InvoiceTotal, CreditAmount, and DueAmount) are not sorting as numbers but it is sorting as string. Can someone help me please. i made sure that these fields inside InvoiceHeaderInfo class are of type decimal.

 

@model  IEnumerable<KendoUIApp2.Models.InvoiceHeaderInfo>
@{
    ViewBag.Title = "Index";
}
@{
    <script type="text/javascript">
        function AlertMsg(e) {
            alert(e);
            //alert($("#InvoiceGrid").data.height);
            return false;
        }
        $(function () {
            $("#InvcList").kendoGrid({
                
                toolbar:["excel","pdf"],
                excel:{allpages:true},
                pdf: {
                    allPages: true,
                    avoidLinks: true,
                    paperSize: "A4",
                    margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                    landscape: true,
                    repeatHeaders: true,
                    template: $("#page-template").html(),
                    scale: 0.8
                },
                sortable: true,
                pageable: true,
                dataSource: { pageSize: 5, name:"InvoiceGrid"},

 

                databound: function (e) {
                    $(".View-Link").click(function (e) {
                        e.preventDefault();
                        alert('hi');
                        alert($(this).id);
                    })

                }
            });
            
        });
       // alert($("#InvcList").kendoGrid().columns(0).name);
    </script>


}
<h2>Search For Invoices</h2>
@using (Html.BeginForm("Index", "IHWithParams",FormMethod.Get))
{
    <table>
        <tr>
            <td>
                PO #:
            </td>
            <td>
                @Html.TextBox("strPO")
            </td>
        </tr>
        <tr>
            <td>
                PO Release #:
            </td>
            <td>
                @Html.TextBox("strPORel")
            </td>
        </tr>
        <tr>
            <td>
                Invoice Date Range:
            </td>
            <td>
                @Html.Kendo().DatePicker().Name("strStart")
                @Html.Kendo().DatePicker().Name("strEnd")

            </td>
        </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Search" />
                </td>
            </tr>
    </table>
}
<table id="InvcList">
    <thead>
        <tr>
            <th data-field="InvoiceID">
                Invoice #
            </th>
            <th data-field="PurchaseOrder">
                PO #
            </th>
            <th data-field="POReleaseNum">
                PO Release #
            </th>
            <th data-field="InvoiceDate">
                Date
            </th>
            <th data-field="InvoiceDueDate">
                Due
            </th>
            <th data-field="InvoiceTotal" data-sortable="true">
                Total
            </th>
            <th data-field="CreditAmount">
                Credit
            </th>
            <th data-field="DueAmount">
                Balance
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.ActionLink(@item.InvoiceID,null, null, new { onclick = "return AlertMsg('" + @item.InvoiceID + "')" })
                </td>
                <td>
                    @item.PurchaseOrder
                </td>
                <td>
                    @item.POReleaseNum
                </td>
                <td>
                    @if (item.InvoiceDate.HasValue)
                    {
                        //@item.InvoiceDate.Value
                       @String.Format("{0:MM/dd/yyyy}", @item.InvoiceDate.Value)
                    }                
                </td>
                <td>
                    @if (item.InvoiceDueDate.HasValue)
                    {
                       @String.Format("{0:MM/dd/yyyy}", @item.InvoiceDueDate.Value)
                    }
                </td>
                <td>
                     @String.Format("{0:c}", @item.InvoiceTotal)
                </td>
                <td>
                   @String.Format("{0:c}", @item.CreditAmount)
                </td>
                <td>
                    @String.Format("{0:c}", @item.DueAmount)
                </td>
            </tr>
        }
    </tbody>
</table>

[Dimo]

Hello Guru,

In order to set column widths, add width styles to <col> elements, as shown in this demo:

http://demos.telerik.com/kendo-ui/grid/from-table

The following documentation section provides more information about column widths:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

To sort numeric data, set a data-type to the respective <th> element, as explained in the documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/overview

(scroll down to the "From an HTML Table" section)

Regards,
Dimo
Telerik by Progress