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

All data is shown except dates

1 Answer 64 Views
Grid
This is a migrated thread and some comments may be shown as answers.
youness
Top achievements
Rank 1
youness asked on 15 Aug 2017, 11:41 AM

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>

 

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 Aug 2017, 06:46 AM
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.
Tags
Grid
Asked by
youness
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or