SlickGrid Biçimlendirici Kullanma

 

Bu bölüm TypeScript için güncellenmeyi bekliyor

SlickGrid örneğinin %Complete sütunundaki tamamlanma yüzdesi çubuğu biçimlendiricisi gibi bir SlickGrid biçimlendirici işlevini kullanmak için :

http://mleibman.github.io/SlickGrid/examples/example2-formatters.html

Gerekli Kaynakları Dahil Etme

Öncelikle bu formatlayıcıları içeren javascript dosyasını _LayoutHead.cshtml dosyanıza ekleyin (MyProject.Web/Views/Shared/_LayoutHead.cshtml):

//...
@Html.Script("~/Scripts/jquery.slimscroll.js")
@Html.Script("~/Scripts/SlickGrid/slick.formatters.js")
@Html.Script("~/Scripts/Site/MovieTutorial.Script.js")
//...

Ayrıca example.css'den aşağıdaki CSS'yi eklemeniz gerekir (site.less'e eklenebilir):

.percent-complete-bar {
  display: inline-block;
  height: 6px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Serenity DataGrid Biçimlendiricisini Bildirme

Diyelim ki Slick.Formatters.PercentCompleteBar biçimlendiricisini kullanmak istemediğimiz CourseCompletion sütununa sahip bir ÖğrenciCourseGrid'imiz var .

public class StudentCourseColumns
{
    //...
    [Width(200)]
    public Decimal CourseCompletion { get; set; }
}

Sunucu tarafında bir SlickGrid formatlayıcıya referans vermek için Serenity ızgaralarına yönelik bir formatlayıcı türü bildirmeniz gerekir.

MyApplication.Script projesinde, örneğin ÖğrenciCourseGrid.cs'nin yanında, içeriği olan bir dosya (PercentCompleteBarFormatter.cs) tanımlayın:

using Serenity;
using System;

namespace MyApplication
{
    public class PercentCompleteBarFormatter : ISlickFormatter
    {
        private SlickColumnFormatter formatter = 
            Type.GetType("Slick.Formatters.PercentCompleteBar").As<SlickColumnFormatter>();

        public string Format(SlickFormatterContext ctx)
        {
            return formatter(ctx.Row, ctx.Cell, ctx.Value, ctx.Column, ctx.Item);
        }
    }
}

MyApplication'ı kök ad alanınızla (çözüm adı) değiştirin.

Artık sunucu tarafında referans verebilirsiniz:

public class StudentCourseColumns
{
    //...
    [FormatterType("PercentCompleteBar"), Width(200)]
    public Decimal CourseCompletion { get; set; }
}

Projenizi yeniden oluşturduğunuzda CourseCompletion sütununun tıpkı SlickGrid örneğinde olduğu gibi bir yüzde çubuğuna sahip olduğunu göreceksiniz.

Çalışmak için Intellisense ve Derleme Zamanını Kontrol Etme

PercentCompleteBarFormatter sunucu tarafı için zeka elde etmek amacıyla (sihirli dizeleri kullanmaktan kaçınmak için), T4 şablonlarını dönüştürmelisiniz (dönüştürmeden önce çözümün başarılı bir şekilde oluşturulduğundan emin olun).

Bundan sonra buna şu sunucu tarafı gibi başvurabilirsiniz:

public class StudentCourseColumns
{
    //...
    [PercentCompleteBarFormatter, Width(200)]
    public Decimal CourseCompletion { get; set; }
}

Alternatif Seçenek (Önerilmez)

Ayrıca SlickGrid sütun biçimlendirici işlevini, bir Serenity biçimlendirici sınıfı tanımlamadan doğrudan komut dosyası yan kodunda ayarlamak da mümkündür; örneğin, ÖğrenciCourseGrid.cs'de GetColumns yöntemini geçersiz kılarak :

    protected override List<SlickColumn> GetColumns()
    {
        var columns = base.GetColumns();
        columns.Single(x => x.Field == "CourseCompletion ").Formatter = 
            Type.GetType("Slick.Formatters.PercentCompleteBar").As<SlickColumnFormatter>();
        return columns;
    }

Bu yeniden kullanılamaz ancak sizi biçimlendirici sınıfı tanımlamaktan kurtarır.