İçeriğe geç

Kendo UI Grid Excel Export – Lütfen Bekleyin

Merhaba Arkadaşlar,

Bugün Kendo UI Toollarından Grid’i kullananlara veya yeni kullanmaya başlayanlara bir konuda bilgi vermek istedim.

Eğer Telerik‘in UI araçlarıyla hiç uğraşmadıysanız bu link üzerinden Kendo UI Grid Tool’una ulaşabilirsiniz: Kendi UI Grid

Bilenler bilir, bir de bu tool’un kimi zaman oldukça faydalı olabilen bir özelliği de Excel Export özelliğidir. Ancak olay tamamen UI’da geçtiği için Back-End’ciler epey karnını ağrıtan problemler ile karşılaşabilirler. Burada bahsini etmek istediğim husus, Kendo UI Grid’de Export Excel dedikten sonra verinizin boyutuna göre işlemin biraz uzun sürebilmesi. Ancak bu noktada, Kendo Default olarak bir Waiting şeklinde ekran sunmuyor. Ancak Completed methodu niteliğinde “excelExport” function’ını sunuyor.

İşte bu hususta yine biraz JS biraz CSS ile bu olayı aşağıdaki şekilde çözebiliriz.

Öncelikle yükleniyor şeklinde bir ibare yer alacak div’imizi ve style’imizi oluşturalım;


<div id="loadingDiv">
    <div style="width: 100%;">
        <div style="width: 450px; margin: 150px auto; padding: 50px; color: #fff; text-align: center;">
            <div><img src="~/images/lg.curve-bars-loading-indicator.gif" width="150" /></div>
            <div>İşlem devam ediyor. Biraz zaman alabilir.<br /><br />Lütfen bekleyin...</div>
        </div>
    </div>
</div>

 

 

 


#loadingDiv {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #3343a4;
    z-index: 100000;
    left: 0px;
    top: 0px;
    opacity: 0.7;
}

 

 

 


excel: {
                fileName: "Order-List.xlsx",
                proxyURL: "/List/GetAllList",
                filterable: true,
                allPages: true
            },
            excelExport: function (e) {
                $("#loadingDiv").hide();
            },

ve ilgili function’ın dışına da aşağıdaki function’ı yerleştiriyoruz.


$(".k-grid-excel").click(function (e) {
            $("#loadingDiv").show();
        });

 

 

İşte bu şekilde “$(“.k-grid-excel”).click” esnasında ilgili div’in görünür hale gelmesini ve işlem bittikten sonra da “$(“#loadingDiv”).hide();” diyerek Yükleniyor ekranımızın kapanmasını rahatça sağlamış oluruz.

Şimdilik bu kadar. Görüşmek üzere…

 

0 0 votes
Article Rating
Tarih:Asp.Net - MVCYararlı MVC Component'ler
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x