DataTables MVC
FO datatable for ASP.NET MVC is a powerful component, which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering, exporting and many more.
{
public int Id { get; set; }
public int Price { get; set; }
public String Name { get; set; }
public String Model { get; set; }
public String Location { get; set; }
public String Department { get; set; }
public String Color { get; set; }
public String Dealers { get; set; }
public String City { get; set; }
public int Year { get; set; }
}
public ActionResult DataGrid()
{
var modelList = DummyList();
return View(modelList);
}
public List
DummyList()
{
return new List
()
{
new GridModel(){ Id = 001, Department = "Ford Ideal", Name = "Ad Soyad", Location = "İstanbul", Model = "Ford Ranger", Price = 200, Color = "Mavi", Dealers = "Bayi Adı", Year = 2020, City = "İzmir" },
}} Functions
The functions you can use in the DataTable helper are listed below. You can use the search field below to search. You can contact framework@ford.com.tr for functions and additional components that you need to use but are not here.
| Functions | Definitions | Use |
|---|---|---|
| Column Filter | Kolon bazlı filtreleme yapmak için kullanılır. Her kolonun başlığına tıklandığında, filtreleme yapabilmek için input aktif hale gelir. Yazılan içeriğe göre filtreleme sonucu tabloda görünür. |
|
| Image Column | Tabloda imaj (.jpg, .png, .svg vb.) göstermek için kullanılır. Veritabanından gelen URL, img source olarak eklenir. Kolonun imaj kolunu olduğunu belirttikten sonra iki özellik daha alır. İmaj width ve imaj alt text. |
|
| HTML Space | Ekstra boşluk istenen durumlarda kullanılır. Örneğin parça numarası gibi verilerde belirtilmesi gerken boşluklar, HTML kod olarak boşluk ekler. |
|
| Fit Columns | Gelen verilerin, kolona tam olarak sığdırılması için kullanılır. Kolon genişliği veriye göre genişler ya da daralır. |
|
| Definition | It is used to define the table. |
|
| ID Definition | Used to define for the Datatable ID. |
|
| Data Source | We get the data from the controls that are pressed on the Partial view. We don't need to write any extra code. |
|
| Primary Key | Used to add ID to the row and get the columns of these rows or get the columns by name. |
|
| Row Selection with Checkbox | It is used to make row selections with the checkbox. |
|
| Row Selection with CTRL | It is used to make row selections with the CTRL. |
|
| Remove Selection | It is used to make row selections with the remove. |
|
| Manual Paging | It is the function that should be used when you want to do the filing process manually, not automatically. |
|
| Popover - Tooltip | Used to show popover field with a link on DataTable. |
|
| Visibility Condition | Belli kurallara göre objelerin görünür olması ya da olmaması durumları için kullanılır. Dört parametre alır; kolon adı, condition (Equals, DoesNotEquals, IsGreaterThan, IsGreaterThanOrEquals, IsLessThan, IsLessThanOrEquals) value değeri ve true/false |
|
| Otomatik Listeleme | Herhangi bir kolon tanımlaması yapılmadan, gelen datayı verilen modele göre tabloya basmak için kullanılır. |
|
| Select All Button | Tümünü seç butonunu aktif/pasif yapmak için kullanılır. Boolean değer alır. |
|
| Get Selected Row | Seçili satırların, kolon adına göre, hücre verisini almak için kullanılır. |
|
| Modal Button | Modal açmak için kullanılır. Parametreleri; buton adı(), modal tipi(Normal, Middle, Wide) ActionMethod(partialView), Icon(), headerText() |
|
| Delete Button | Silme işlemleri için, her satıra eklenen silme butonudur. Parametreleri; silme onay modalının header başlığı, açılan modalın body yazısı ve silme fonksiyonu DeleteFunc(); Silme fonksiyonu parametre olarak rowId alır. |
|
| DropDown Button | DataTable ile alakalı az kullanılan işlemleri, dropdown içinde kullanmak için kullanılır. |
|
| Header Button | Sol üste buton eklemek için kullanılır. İkon zorunludur, verilmez ise default ikon kullanılmaktadır. |
|
| Excel Export | Veriyi, excel dosyası olarak kaydetmek için kullanılır. |
|
| Excel Import | Veriyi excel dosyasından, DataTable içine almak için kullanılır. |
|
| Add Page Footer | DataTables altına, footer eklemek için kullanılır. Hizalamalar için Align, Prefix yazısı için PrefixText, suffix yazıları için SuffixText ve elle girilecek değerler için AddManuelValue alır. |
|
| Add Column Footer | İstenilen kolon altına, footer eklemek için kullanılır. Eklenmesi istenen kolonun ID'si yazılır (c => c.Price). Hizalamalar için Align, Prefix yazısı için PrefixText, suffix yazıları için SuffixText, Matematiksel işlemler için CalculationType ve elle girilecek değerler için AddManuelValue alır. |
|
| Horizontal Align | Kolon içeriğini hizalama için kullanılır. Aldığı parametreler; (HorizontalAlign.NotSet) (HorizontalAlign.Left) (HorizontalAlign.Right) (HorizontalAlign.Justify) |
|
| Cell Background Color | Hücre içi arkaplan rengi tanımlamak için kullanılır. Aldığı parametreler; None, Primary, Secondary, Success, Info, Warning, Error |
|
| Icon | İkon eklemek için kullanılır.Icons. dan sonra ikon için gereken class adını yazabilirsiniz. Tüm ikon classlarının bulunduğu liste için: Icons |
|
| Icon Circle | Renk olarak primary, secondary, success, info, warning, error olan daire ikonları için kullanılır. |
|
| Complex Header | Complex Header, kolon header üzerine, kolonları gruplamanıza olanak sağlayan bir özelliktir. Bu özelliği kullanabilmek için, FO Framework MVC versiyonunun 1.0.6.4 olması gerekmektedir. En doğru kullanım için, Visible = false alanlar en son kolona eklenmelidir. |
|
| Column Progess | Kolon tanımlama ve kolon ile ilgili işlemler için kod örneğini inceleyebilirsiniz. |
|
| Condition Source | Koşula bağlı işlemler için kullanılır. |
|