فرمت کردن اطلاعات نمایش داده شده به کمک Kendo UI Grid
نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۸/۱۹ ۱۳:۲۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
$("#report-grid").kendoGrid({
// ...
pageable: {
previousNext: true, // default true
numeric: true, // default true
buttonCount: 5, // default 10
refresh: true, // default false
input: true, // default false
pageSizes: true // default false
}, <!--https://github.com/loudenvier/kendo-global/blob/master/lang/kendo.fa-IR.js--> <script src="js/messages/kendo.fa-IR.js" type="text/javascript"></script>
var productsDataSource = new kendo.data.DataSource({
// ...
group: { field: "IsAvailable" },
// ...
}); $("#report-grid").kendoGrid({
// ...
groupable: true, // allows the user to alter what field the grid is grouped by
// ... var productsDataSource = new kendo.data.DataSource({
//...
aggregate: [
{ field: "Name", aggregate: "count" },
{ field: "Price", aggregate: "sum" }
]
//...
}); $("#report-grid").kendoGrid({
// ...
columns: [
{
field: "Name", title: "نام محصول",
footerTemplate: "تعداد: #=count#"
},
{
field: "Price", title: "قیمت",
footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
}
]
// ...
}); <script type="text/x-kendo-template" id="priceTemplate">
#if( Price > 2490 ) {#
<span style="background:brown; color:yellow;">#=kendo.toString(Price,'c0')#</span>
#} else {#
#= kendo.toString(Price,'c0')#
#}#
</script> $("#report-grid").kendoGrid({
//...
columns: [
{
field: "Price", title: "قیمت",
template: kendo.template($("#priceTemplate").html()),
footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
}
]
//...
}); <!--https://github.com/moment/moment/--> <script src="js/cultures/moment.min.js" type="text/javascript"></script> <!--https://github.com/jalaali/moment-jalaali--> <script src="js/cultures/moment-jalaali.js" type="text/javascript"></script>
$("#report-grid").kendoGrid({
//...
columns: [
{
field: "AddDate", title: "تاریخ ثبت",
template: "#=moment(AddDate).format('jYYYY/jMM/jDD')#"
}
]
//...
}); $("#report-grid").kendoGrid({
// ...
toolbar: [
{ template: kendo.template($("#toolbarTemplate").html()) }
]
// ...
}); <script>
// این اطلاعات برای تهیه خروجی سمت سرور مناسب هستند
function getCurrentGridFilters() {
var dataSource = $("#report-grid").data("kendoGrid").dataSource;
var gridState = {
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
};
return kendo.stringify(gridState);
}
</script>
<script id="toolbarTemplate" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="alert('gridState: ' + getCurrentGridFilters());">نوار ابزار سفارشی</a>
</script>
تغییر از <DownloadNuGetExe Condition=" '$(DownloadNuGetExe)' == '' ">false</DownloadNuGetExe> به <DownloadNuGetExe Condition=" '$(DownloadNuGetExe)' == '' ">true</DownloadNuGetExe>
@DateTime.Now
{
field: "AddDate", title: "تاریخ ثبت",
template: "#=moment(AddDate).format('jYYYY/jMM/jDD')#"
}