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
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