This is a migrated thread and some comments may be shown as answers.

set column width, sort not working right.

1 Answer 189 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Guru
Top achievements
Rank 1
Guru asked on 22 Sep 2016, 10:21 PM

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>

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Sep 2016, 03:06 PM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Grid
Asked by
Guru
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or