การทำ Lazy Loading ใน Kendo UI Drop Down List

Lazy Loading คือ การจัดการทรัพยากรเท่าที่ควรจะใช้ จัดการเกี่ยวกับการ request ขอข้อมูลจาก service หลังบ้าน และเพื่อเพิ่มประสิทธิภาพการทำงานของฝั่ง client ให้แสดงเฉพาะข้อมูลที่ผู้ใช้ควรจะเห็นเท่านั้น

ต้องขอเกริ่นก่อนว่า kendo UI มี data source ที่เอาไว้สำหรับจัดการข้อมูลที่จะถูกนำไปแสดงใน drop down list ซึ่งถ้าใครไม่เข้าใจในส่วนที่เรียกว่า data source สามารถเข้าไปเพิ่มเติมได้ที่บทความด้านล่างนี้ อ่านเพิ่มเติมได้ที่ https://atlasarcadiacom.wixsite.com/babylon/forum/development/kendo-data-source-khuue-aair

การทำ lazy loading ใน kendo UI จะต้องจัดการ 2 ส่วนด้วยกัน คือ ส่วนของ HTML และ JavaScript ที่จะจัดการ Data source

การสร้าง Drop Down List

<select data-role="dropdownlist" 
    data-text-field="text" 
    data-value-field="value" 
    data-filter="contains" 
    data-virtual="{ itemHeight: 45 }" 
    data-height="120" 
    data-bind="source: source, value: selectedItem">
</select>

กำหนด Item Heigth

itemHeigth คือ property ที่จะต้องถูกกำหนดค่า เพื่อบอกว่า item ข้อมูลที่จะแสดงภายใต้ drop down list แต่ละตัวนั้นมีความสูงเท่าไร ซึ่งจะถูกไปคำนวณในการกำหนด pageSize

ข้อควรระวัง

ถ้าหากไม่กำหนด itemHeight ตัว drop down list จะเรียก DataSourceRequest ให้คำนวณให้ อย่างไรก็ตามปัญหานี้มีโอกาสเกิดขึ้นน้อยมาก

กำหนด Container Height

height คือ property ที่จะถูกกำหนดค่า เพื่อบอกว่า container ของ pop-up ที่จะแสดงข้อมูลใน drop donw list มีความสูงทั้งหมดเท่าไร ซึ่งจะถูกไปคำนวณในการกำหนด pageSize

กำหนด pageSize

การกำหนด pageSize ให้ถูกต้องนั้น สามารถทำได้โดยการนำการคำนวณจากสูตรดังต่อไปนี้

((height / itemHeight) * 4)

ตัวอย่าง กำหนดว่า

height คือ 120px

itemHeight คือ 45

ในกรณีนี้ pageSize ควรจะถูกกำหนดเท่ากับ 11 เนื่องจาก (( 120 / 45 ) * 4 ) = 10.66667

ข้อควรระวัง

เพื่อหลีกเลี่ยง Request Initial แบบหลายครั้ง ให้ประกาศค่า pageSize ให้ถูกต้อง

var viewModel = kendo.observable({
    selectedItem: "",
    source: new kendo.DataSouce({
        serverFiltering: true,
        pageSize: 11, 
        transport: {
            read: {
                url: "test/getSource",
                contentType: "application/json",
                dataType: "json",
                type: "GET"
            }
        },
        schema: {
            data: "Data",
            total: "Total"
        }
    }),
});