set column width, sort not working right.

2 posts, 0 answers
  1. Guru
    Guru avatar
    1 posts
    Member since:
    Jun 2014

    Posted 22 Sep Link to this post

    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>

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Sep Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
Back to Top