Merhaba Arkadaşlar,
Bu yazı serisini biraz daha kompleks ve az da olsa bir seri gibi götürmek isteğindeyim. Tabii ki iş yoğunluğum sebebi ile fırsat buldukça ara ara paylaşabileceğim. Yine de sorularınız olur ise mutlaka aşağıdaki YORUM kısmından yazmayı unutmayın lütfen.
Kendo Grid Nedir?
Kendo Grid, Telerik firmasına ait hazır araçlardan biridir. Telerik firması, aslında kökü oldukça eskiye dayanan ve C#, Vb, Php, vs… bir çok dilin destekleyeceği şekilde yeni yeni araçlar (tools) geliştiren bir firmadır. Araç deyince, yeni başlayanlar için örnek vermek gerekir ise; TextBox, GridView, web tarafında DataTable, vs… hepsi birer hazır araçtır. Bu araçlar bize çoğunlukla Microsoft tarafından ücretsiz olarak sunulmaktadır ve bizler de bu componentlerin belli olaylarını (event) ve özelliklerini (property) kullanarak kolayca işlerimiz halletmekteyiz.
İşte Telerik firması da uzun zaman önce bir çok güncel programlama dilinde daha daha gelişkin componentler geliştirerek bizlerin kullanımına sunmuş durumda. Bu yazı serisinde özellikle Kendo Grid componenti üzerinde duracağız. Görünümü aşağıdaki şekildedir;
Yukarıdaki şekilde bir görünüme sahiptir. Tabi görselde de olduğu gibi; Excel export, Pdf export, Sort (Sıralama), Filter (Filtreleme), vs… bir çok özelliğe sahip bir componenttir.
Net Core Kendo Grid UI Kullanım Örneği
Bu yazı serisinde .Net Core ile Kendo Grid UI kullanımını gösteriyor olacağım. Ancak elbette yer yer JQuery Ajax ve MVC versiyonlarına da atıf yaparak ilerliyor olacağım.
@using Kendo.Mvc
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Select().Width(75).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
columns.Bound(p => p.ProductName)
.ClientTemplate(
@"<div class='product-photo'
style='background-image: url(" + @Url.Content("~/shared/web/foods/#:data.ProductID#.jpg") + ");'></div><div class='product-name'>#: ProductName #</div>").Width(300);
columns.Bound(p => p.UnitPrice).Title("Price").Width(105);
columns.Bound(p => p.Discontinued).Title("In Stock").Width(130)
.ClientTemplate("<span id='badge_#=ProductID#' class='badgeTemplate'></span>");
columns.Bound(p => p.Category.CategoryName).Title("Category").EditorTemplateName("ClientCategoryEditor").ClientGroupHeaderTemplate("Category: #=data.value#, Total Sales: #=kendo.format('{0:c}', data.aggregates.TotalSales.sum)#").Width(125);
columns.Bound(p => p.CustomerRating).Title("Rating").Width(140).Editable("returnFalse").ClientTemplate(Html.Kendo().Rating()
.Name("rating_#=ProductID#")
.Min(1)
.Max(5)
.Label(false)
.HtmlAttributes(new { data_bind = "value: CustomerRating" })
.Selection("continuous")
.ToClientTemplate().Value
);
columns.Bound(p => p.Country.CountryNameLong).Title("Country").EditorTemplateName("Country").ClientTemplate(
@"<div class='k-text-center'><img src='" + @Url.Content("~/shared/web/country-flags/#:data.Country.CountryNameShort#.png") + "' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>").Width(120);
columns.Bound(p => p.UnitsInStock).Title("Units").Width(105);
columns.Bound(p => p.TotalSales).Title("Total Sales").Width(140).Format("{0:c}");
columns.Bound(p => p.TargetSales).Editable("returnFalse").Title("Target Sales")
.ClientTemplate(Html.Kendo().Sparkline()
.Name("chart_#=ProductID#")
.Legend(legend => legend
.Visible(false)
)
.Type(SparklineType.Bar)
.HtmlAttributes(new { data_series= "[{data: [#=TargetSales#], labels:{visible:true, format:'{0}%', background:'none'}}]"})
.ChartArea(chartArea => chartArea.Margin(0).Width(180))
.CategoryAxis(axis => axis
.MajorGridLines(lines => lines.Visible(false))
.MajorTicks(lines => lines.Visible(false))
)
.ChartArea(c=>c.Background("transparent"))
.ValueAxis(axis => axis
.Numeric()
.Min(0)
.Max(130)
.Visible(false)
.Labels(l => l.Visible(false))
.MinorTicks(lines => lines.Visible(false))
.MajorGridLines(lines => lines.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(false)
).ToClientTemplate().Value
).Width(220);
columns.Command(command => command.Destroy()).Width(120);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Pdf();
toolbar.Search();
})
.Pdf(pdf=>pdf.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
.Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
.ColumnMenu(col=>col.Filterable(false))
.Height(700)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Navigatable()
.Resizable(r=>r.Columns(true))
.Reorderable(r => r.Columns(true))
.Groupable(g=>g.ShowFooter(false))
.Filterable()
.Scrollable()
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.AutoSync(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.Discontinued).Editable(false);
model.Field(p => p.TotalSales).Editable(false);
model.Field(p => p.Category).DefaultValue(new CategoryViewModel() { CategoryID= 8, CategoryName="Seafood"});
model.Field(p => p.Country).DefaultValue(new CountryViewModel() { CountryNameLong="Bulgaria", CountryNameShort="bg"});
})
.Group(group=>group.Add("Category.CategoryName", typeof(string), ListSortDirection.Descending))
.Aggregates(agg=>agg.Add(field=>field.TotalSales).Sum())
.Create("DetailProducts_Create", "Grid")
.Read("DetailProducts_Read", "Grid")
.Update("DetailProducts_Update", "Grid")
.Destroy("DetailProducts_Destroy", "Grid")
)
)
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onDataBound(e) {
var grid = this;
grid.table.find("tr").each(function () {
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Discontinued ? 'success' : 'error';
var text = dataItem.Discontinued ? 'available' : 'not available';
$(this).find('script').each(function () {
eval($(this).html());
});
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
kendo.bind($(this), dataItem);
});
}
function returnFalse() {
return false;
}
</script>Bu şekilde bir örnek kullanıma sahiptir. Aslında .net syntax’ları kullanılarak ilerlendiği için kullanımı son derece kolaydır.
Ancak bu seride bahsetmek istediklerim aslında neredeyse tüm detayları ile Kendo Grid componentine değinmek.
Umarım yararlı bir tanışma olmuştur. Mümkün olan en kısa sürede devamını da getirmeye çalışacağım. İlginize teşekkür ederim…
İyi Çalışmalar… 🙂