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…

 

Share this Story

Related Posts

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir

Search