DevExpress ASPxDateEdit Client Side Validation İşlemleri

18.01.2017 Hikmet Okumuş 149 0 DevExpress Web

Merhaba arkadaşlar

Bu makalede sizlere ASPxDateEdit kontrolü ile istemci tarafında doğrulama işlemlerini anlatmaya çalışacağım. Kullanıcı kaydı yapılan bir form üzerinden örneklemeye çalışalım. Basit bir kullanıcı kaydı için kişiden Ad, Soyad ve Doğum Tarihi bilgilerini girmesini isteyelim. Örnek form görüntüsü aşağıdaki gibidir.

www.hikmetokumus.com

Doğrulama işlemi için, ASPxDateEdit kontrolünün Validation eventı kullanılmaktadır. Örneğimizde kullanıcının yaşı 18 den küçük olursa, girilen değerin geçersiz olduğunu belirtelim.


< dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
	< ClientSideEvents Validation="onValidate" />
< /dx:ASPxDateEdit>

www.hikmetokumus.com

Eğer geçersiz bir değer girilmişse, "EventArgs.isValid" özelliğini false olarak setleriz. False sonucuna göre yukarıdaki gibi kontrolün yanında bir uyarı çıkmaktadır. Varsayılan olarak tanımlı hata mesajı "Invalid value" gelmektedir. Mesajı aşağıdaki gibi değiştirebiliriz.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">< /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>

www.hikmetokumus.com

Eğer yapılan kontrolün içeriğine göre hata mesajı değiştirilmek istenirse, Javascript tarafında "EventArgs.errorText" değeri setlenmektedir. Örneğimize göre mesajı revize edelim.
    function onValidate(s, e) {
        var birthday = e.value;
        if (!birthday)
            return;
        var today = new Date();
        var msecPerYear = 1000 * 60 * 60 * 24 * 365;
        var years = (today.getTime() - birthday.getTime()) / msecPerYear;
        if (years < 18) {
            e.isValid = false;
            e.errorText = "Girilen yaş 18 den küçüktür.";
        }
    }

www.hikmetokumus.com

Eğer kontrolün bilgi girişi zorunlu yapılmak istenirse, "RequiredField" özelliği kullanılmaktadır. "IsRequired" özelliği true olarak setlendiğinde, ekrana boş geçilemeyeceği ile ilgili bir hata mesajı çıkar.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">
            < RequiredField IsRequired="true" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>
Yukarıdaki kod parçasında şunu yaptığınızda ekrana boş geçilemez uyarısı gelecektir. Öncelikle bir tarih değeri girin ve ardından temizleyin. Görüntü aşağıdaki gibi olacaktır.

www.hikmetokumus.com

Eğer hata mesajını değiştirmek isterseniz, "ErrorText" özelliğini setlemeniz gerekmektedir.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">
            < RequiredField IsRequired="true" ErrorText="Doğum tarihi zorunludur !" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>

www.hikmetokumus.com

"Doğum tarihi zorunludur !" kontrolünün "Kaydet" butonuna basıldığında yapılması için, "ValidationGroup" tanımlamasının yapılması gerekmektedir.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer" ValidationGroup="SaveGroup">
            < RequiredField IsRequired="true" ErrorText="Doğum tarihi zorunludur !" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>
	< dx:ASPxButton runat="server" ClientInstanceName="btnSave" Text="Kaydet" ValidationGroup="SaveGroup" AutoPostBack="false">
	< /dx:ASPxButton>
Doğrulama işlemlerini kısaca özetlemeye çalıştım. İki tarih arası kontrol, belli bir tarih kontrolü, tarihin formatının kontrolü vb. farklı örnekler üzerinde doğrulama işlemlerinizi gerçekleştirebilirsiniz.

Başarılar dilerim.

DevExpress ASPxDateEdit Custom Button Click Event

12.01.2017 Hikmet Okumuş 244 0 DevExpress Web

Merhaba arkadaşlar,

Bir önceki makalede ASPxDateEdit kontrolüne custom butonların nasıl ekleneceğini örneklemiştik. İlgili makaleye aşağıdaki linkten ulaşabilirsiniz.

www.hikmetokumus.com DevExpress ASPxDateEdit Custom Button Eklemek

Bu makalede ise eklediğimiz custom buttonlara nasıl event ekleriz, tetikleriz bunu örneklemeye çalışacağız. Önceki makaledeki örnekte "Today" ve "Clear" butonlarını custom olarak eklemiştik.

www.hikmetokumus.com

Şimdi bu butonlara event ekleyelim. Bu işlem için "ClientSideEvents" içinde bulunan "ButtonClick" eventını kullanacağız. Eğer örneğimizdeki gibi birden fazla buton kullanırsanız, tek bir event içerisinde hangi buton için istek geldiğini, EventArgs ile gelen "buttonIndex" özelliği belirtmektedir. Şimdi "Today" için günün tarihini setleme, "Clear" için date alanını temizleme kısımlarını yazalım.
    

    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < Buttons>
            < dx:EditButton Text="Today">< /dx:EditButton>
            < dx:EditButton Text="Clear">< /dx:EditButton>
        < /Buttons>
        < ClientSideEvents ButtonClick="onButtonClick" />
    < /dx:ASPxDateEdit>

Başarılar dilerim.

DevExpress ASPxDateEdit Custom Button Eklemek

10.01.2017 Hikmet Okumuş 275 0 DevExpress Web

Merhaba arkadaşlar

ASPxDateEdit kontrolünü özelleştirmek, farklı işlevsellikler katmak isterseniz, kontrolün "Buttons" özelliğini kullanabilirsiniz.
	< dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
		< Buttons>
			< dx:EditButton Text="Today">< /dx:EditButton>
			< dx:EditButton Text="Clear">< /dx:EditButton>
		< /Buttons>
	< /dx:ASPxDateEdit>

www.hikmetokumus.com

Normalde tarih panelini açtığımızda "Today" ve "Clear" butonları panel üzerinde mevcut. Biz uygulamamızda farklılık oluşturmak için, butonları daha hızlı ulaşabileceğimiz bir noktaya taşıdık. Örnekte custom buton olarak "EditButton" kullandım. Diğer button tipleri aşağıdaki gibidir.

www.hikmetokumus.com


Başarılar dilerim.

Merhaba arkadaşlar,

ASPxDateEdit kontrolünün varsayılan olarak text değeri boş olarak gelmektedir. Eğer kontrol yüklendiğinde örneğin varsayılan olarak günün tarihi setlemek istersek, kontrolünün Client-Side eventini kullanabiliriz. Bu işlem için Init eventi kullanılmaktadır. Kullanım şekli aşağıdaki gibidir.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ClientSideEvents 
            Init="function(){
                dateEdit.SetText(new Date().toLocaleDateString());                                                                        
            }"/>
    < /dx:ASPxDateEdit>

Başarılar dilerim.

DevExpress ASPxDateEdit Set Date Client Side

30.12.2016 Hikmet Okumuş 274 0 DevExpress Web

Merhaba arkadaşlar,

ASPxDateEdit kontrolüne client tarafında tarih setlemek için 2 yöntemi kullanabilirsiniz. Bunlar "SetText" ve "SetDate" fonksiyonlarıdır. SetText yöntemi için string bir tarih değeri, SetDate için "Date" tipinde bir tarih değerini argüman olarak göndermemiz gerekmektedir. Örnek kullanımlar aşağıdaki gibidir.
            < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">               
            < /dx:ASPxDateEdit>
		
			//Text
			dateEdit.SetText("30.12.2016");
			
			//Date
			var date = new Date(2016, 12, 30);
			dateEdit.SetDate(date);
		

Başarılar dilerim.

DevExpress ASPxDateEdit Today & Clear Button Text Change

29.12.2016 Hikmet Okumuş 283 0 DevExpress Web

Merhaba arkadaşlar,

ASPxDateEdit kontrolünde tarih paneli üzerindeki butonların textleri varsayılan olarak ingilizce gelmektedir. Text ifadesini değiştirmek için CalendarProperties özelliği kullanılmaktadır. "Today" için TodayButtonText, "Clear" için ClearButtonText özelliklerini setlemek yeterli olacaktır. Örnek olarak değerlerin türkçe karşılıklarını setleyelim.
            < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
                < CalendarProperties TodayButtonText="Bugün" ClearButtonText="Temizle">
                < /CalendarProperties>
            < /dx:ASPxDateEdit>
		

www.hikmetokumus.com


Başarılar dilerim.

DevExpress ASPxDateEdit Show Hide Today & Clear Button

29.12.2016 Hikmet Okumuş 274 0 DevExpress Web

Merhaba arkadaşlar,

ASPxDateEdit kontrolünü sayfaya eklediğimizde varsayılan olarak "Today" ve "Clear" butonları panel üzerinde görünmektedir. Bazı durumlarda butonları gizlemek isteyebiliriz. Bu işlem için CalendarProperties özelliğinden yararlanılacaktır. Özelliğin "Show" ile başlayan elemanlarına göz attığımızda "Today" ve "Clear" haricinde başka özellikleride aynı mantıkta gösterip / gizleyebilirsiniz.
	
        < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < /dx:ASPxDateEdit>
	

www.hikmetokumus.com

< dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
	< CalendarProperties ShowTodayButton="false" ShowClearButton="false">
	< /CalendarProperties>
< /dx:ASPxDateEdit>

www.hikmetokumus.com


Başarılar dilerim.

DevExpress ASPxTreeList İle ExpandCollapseAction Kullanımı

22.12.2016 Hikmet Okumuş 234 0 DevExpress Web

Merhaba arkadaşlar,

ASPxTreeList kontrolünde node elemanlarını expand / collapse yapmak için 3 farklı yöntemi kullanabilirsiniz. Bunun için SettingsBehavior -> ExpandCollapseAction özelliğini setlemeniz gerekmektedir.

www.hikmetokumus.com

Button: (+) ve (-) butonları ile çalışır.
NodeClick: Node üzerine mouse ile tek tıklama ile çalışır.
NodeDblClick: Node üzerine mouse ile çift tıklama ile çalışır.

Başarılar dilerim.

DevExpress ASPxTreeList İle UnselectAll Kullanımı

19.09.2016 Hikmet Okumuş 340 0 DevExpress Web

Merhaba arkadaşlar,

ASPxTreeList kontrolünün Client-Side tarafında işimize yarayacak bir çok özelliğini inceledik. Gene sıkça ihtiyacımızın olacağı bir konuyu örneklemeye çalışalım. Tüm seçimleri kaldırmak ..

Aşağıdaki gibi tüm elemanlarının seçili olduğu bir ASPxTreeList kontrolünde tüm seçimleri kaldırmak için Client-Side tarafında doğrudan bir metod bulunmamaktadır.

www.hikmetokumus.com

Server-Side tarafında UnselectAll isimli bir metod bulunmaktadır. Biz bu metodu Client-Side tarafında, ASPxTreeList kontrolünün CustomCallback eventını tetikleyerek kullanacağız. Öncelikle Client-Side tarafında tetikleme işlemini yapalım.
		treeCategory.PerformCallback("unselect");
		

www.hikmetokumus.com

Server-Side tarafı aşağıdaki gibidir.
	    protected void treeCategory_CustomCallback(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomCallbackEventArgs e)
	    {
	        if (e.Argument == "unselect")
	        {
	            treeCategory.UnselectAll();            
	        }	      
	    }
		
Bu işlemin ardından tüm seçimler false olacaktır. PerformCallback metodu ile Server-Side tetiklendiğinde sayfa post-back yapmayacağı için işlem sanki Client-Side olarak çalışıyormuş gibi olacaktır.

Başarılar dilerim.

DevExpress ASPxTreeList İle SortBy Kullanımı - Ascending Descending

10.09.2016 Hikmet Okumuş 382 1 DevExpress Web

Merhaba arkadaşlar,

ASPxTreeList kontrolü üzerinde yaptığımız örneklerde hep tek bir kolon üzerinden işlep yaptık. İhtiyacımıza göre bir grid gövdesi gibi yapılandırabiliriz. Kontrol bize bu imkanı sağlamaktadır. Aşağıdaki görseli örnek olarak düşünebilirsiniz.

www.hikmetokumus.com

Biz gene ilk örneğimizi tek kolon üzerinden verelim, sonrasında yukarıdaki görsel ile ilgili kısa bir bilgi vereceğim. Öncelikle sırala işlemini yapabilmek için TreeListSettingsBehavior.AllowSort özelliğinin true olarak setlenmiş olması gerekmektedir. False değere sahip olursa SortBy metodu çalışmayacaktır. Bu kısa ve önemli bilgiden sonra örneğimize geçelim. Grid üzerinde listelenen sonuçları Ascending ya da Descending olarak sıralamak isteyebiliriz. Bu işlemi ASPxTreeList kontrolünün SortBy client side metodu ile yapabilmekteyiz. Metodun bir kaç overload edilmiş hali bulunmaktadır. Sırası ile inceleyelim.

www.hikmetokumus.com

1. yöntemde SortBy bizden sıralamanın yapılacağı kolon ismi istemektedir. Yukarıdaki gibi bir kullanımda eğer ilgili kolon Ascending ise Descending ya da tam tersi olarak sıralama işlemini yapmaktadır. Yani mevcut hali ne ise tam tersi olarak sıralama yapmaktadır.

www.hikmetokumus.com

2. yöntemde sıralamanın ne şekilde yapılacağı belirtilmektedir. ASC ya da DESC olarak tip belirtebilirsiniz.
3. parametreye geçmeden önce yukarıda birden fazla kolona sahip görsel üzerinden örnek vereyim. Birden fazla kolona sahip ASPxTreeList kontrolü üzerinde sıralama yaparken önce 1. sonra 2. sonra 3. gibi sıralamalar belirtebilirsiniz. Bunun gibi çoklu kolonlarda eğer sıralama yaparken önceki sıralamaları unut, sadece buna göre sırala gibi bir komut vermek isterseniz 3. parametreyi yani reset parametresini true olarak setlemeniz yeterli olacaktır. False olarak setlediğinizde resetleme işlemini yapmayacaktır. Örnek kullanım aşağıdaki gibidir.
		treeCategory.SortBy("Caption", "DESC", true);
		

Başarılar dilerim.