All data is shown except dates

2 posts, 0 answers
  1. youness
    youness avatar
    1 posts
    Member since:
    Aug 2017

    Posted 15 Aug 2017 Link to this post

    I have an MVC application where i display a table that has a date column, the other columns work fine, but the dates are not showing!! also when i try to modify a filter in columns it's not working! please help

     

    here's my view :

    <div class="col-sm-12">
                        <table id="grid2"  >
                            <thead>
                                <tr role="row">
                                    <th data-field="VersPrevu_Numero" data-filterable="false" class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">@Html.DisplayNameFor(model => model.VersPrevu_Numero)</th>
                                    <th data-field="VersPrevu_Reference" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_Reference) </th>
                                    <th data-field="Fact_Nom" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.LOGE_FACTURABLE.Fact_Nom) </th>
                                    <th data-field="VersPrevu_DatePrevu" data-type="date" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_DatePrevu)</th>
                                    <th data-field="VersPrevu_Remise" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_Remise)</th>
                                    <th data-field="VersPrevu_Montant" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_Montant)</th>
                                    <th data-field="VersPrevu_Estdu" data-filterable="false" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_Estdu)</th>
                                    <th data-field="VersPrevu_EstRegle" data-filterable="false" class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >@Html.DisplayNameFor(model => model.VersPrevu_EstRegle)</th>
                                    <th data-field="Ve" class="sorting" data-filterable="false" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" ></th>
                                </tr>
                          </thead>
                            <tbody>
                                @foreach (var item in Model)
                                {
                                    <tr role="row" class="odd">
                                        <td>
                                            @Html.DisplayFor(modelItem => item.VersPrevu_Numero)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.VersPrevu_Reference)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.LOGE_FACTURABLE.Fact_Nom)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.VersPrevu_DatePrevu)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.VersPrevu_Remise)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.VersPrevu_Montant)
                                        </td>
                                        <td>
                                            @Html.CheckBoxFor(modelItem => item.VersPrevu_Estdu)
                                        </td>
                                        <td>
                                            @Html.CheckBoxFor(modelItem => item.VersPrevu_EstRegle)
                                        </td>
                                        @*<td>
                                                @Html.ActionLink("Edit", "Edit", new { id=item.VersPrevu_Id }) |
                                                @Html.ActionLink("Details", "Details", new { id=item.VersPrevu_Id }) |
                                                @Html.ActionLink("Delete", "Delete", new { id=item.VersPrevu_Id })
                                            </td>*@
                                        @if (item.VersPrevu_Estdu == true)
                    {
                                            <td>
                                                @Html.ActionLink("Payer", "Create", "LOGE_Reglement", new { Id = item.VersPrevu_Id }, null)
                                            </td>
                                        }
                                        else
                                        {
                                            <td>
                                                @Html.ActionLink("Détails", "Details", "LOGE_VersementPrevu", new { Id = item.VersPrevu_Id }, null)
                                            </td>
                                        }
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>

    THE SCRIPT : 

     

    <script>
        $(document).ready(function () {
            kendo.culture("fr-FR");

        });
            $(document).ready(function () {
                $("#grid2").kendoGrid({
                    dataSource: {
                        
                        schema: {
                            model: {
                                fields: {
                                    VersPrevu_Numero: { type: "number" },
                                    VersPrevu_Reference: { type: "string" },
                                    Fact_Nom: { type: "string" },                               
                                    VersPrevu_DatePrevu: { type: "date" },
                                    VersPrevu_Remise: { type: "number" },
                                    VersPrevu_Montant: { type: "number" }
                                    //VersPrevu_Estdu: { type: "boolean" },
                                    //VersPrevu_EstRegle: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 430,
                    sortable: true,
                    filterable: {
                        mode: "row"
                    },
                    pageable: {
                        messages: {
                            empty: "No items to display"
                        },
                        input: false,
                        refresh: true,
                        pageSizes: true,
                        pageSizes: [10, 20, 30, 50],

                        columns:
                        [{
                            field: "VersPrevu_Numero",
                            filterable: false,
                        },
                       {
                           field: "VersPrevu_Reference",
                           filterable: {
                               cell: {
                                   operator: "gte"
                               }
                           }
                       }, {
                           field: "VersPrevu_DatePrevu",
                           format: "{0:dd/MM/yyyy}"
                       }, {
                           field: "VersPrevu_Remise"
                       }, {
                           field: "VersPrevu_Montant"
                       }, {
                           field: "VersPrevu_Estdu"
                       }, {
                           field: "VersPrevu_EstRegle"
                       }]              

                    } });

                //$("#grid").data("kendoGrid").dataSource.pageSize(10);
            });      
    </script>

     

     

  2. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 17 Aug 2017 Link to this post

    Hello Youness,

    The described issue is expected because currently the Grid is initialized using mixed syntax, the empty div one and the HTML table one. Also, the HTML table is initialized using Razor syntax.

    If the desired result is to use an HTML table, I can suggest checking the following article and demo in our documentation:

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

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

    Also, if the fields are in the model, I can suggest using the MVC wrappers and this will allow passing the data with the model to the Grid and it will create the desired layout:

    http://docs.telerik.com/aspnet-mvc/helpers/grid/overview

    http://demos.telerik.com/aspnet-mvc/grid

    Let me know if you need additional information on this matter.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top