List View Scroll bar with JS

หลายคนคงเคยเจอปัญหากับการแสดงผลของ list view ในกรณีที่มีคอลัมน์ใช้งานเยอะๆ คอลัมน์จะมีความกว้างน้อยทำให้การใช้งานค่อนข้างสะดวกจะไม่สะดวก ซึ่งผมก็เจอปัญหานี้เช่นกันโดยผมใช้เจ้าตัว Java Script เข้ามาช่วยเพื่อให้ UI ของเรา มีหน้าตาที่ดูง่ายยิ่งขึ้น ซึ่งผมมีปัญหากับ List view ที่ต้อง
แสดงผลคอลัมน์เป็นจำนวน 20 คอลัมน์ ซึ่งเมื่อแสดงผลก็เป็นอย่างที่เห็นแหละครับ ดูกันไม่รู้เรื่องเลยว่าอะไรเป็นอะไร

SB1

อย่ารอช้ามาดูวิธีกันเลยครับว่าจะเอาเจ้า JS มาช่วยยังไง

  1. ไปที่ฟอร์มที่มีการใช้งาน List View สร้าง Data Label ขึ้นมาหนึ่งตัวครับSB2
  2.  จากนั้นให้ดำเนินการใส่ Expression ให้กับตัว Data Label ที่เราสร้างขึ้นมานะครับ โดยใน Expression เราจะใส่ JS เข้าไปนี่แหละSB3
  3. ดำเนินการใส่ Script ได้เลยครับSB4

Script ที่เราจะใช้คือ

SB9

สำหรับ  name=’ScollBar.Form Area Item‘ จะเป็น name ของ view ที่เราต้องการจะให้มี scroll bar นะครับ ซึ่งถ้าเราหาไม่เจอว่าไอเจ้าชื่อ name ของ view เนี่ยอยู่ตรงไหนให้ดูที่หน้าฟอร์มได้นะครับ โดยจะอยู่ในส่วนของ Properties ด้านขวามือครับ สามารถ copy ไปวางใน script ได้เลยครับ

SB5

เมื่อดำเนินการใส่ Script ที่ Expression เสร็จเรียบร้อยแล้วให้ดำเนินการในขั้นตอนถัดไปได้เลยครับ

4. ให้เลือกไปที่ List View นะครับ โดยขั้นตอนนี้เราจะใส่ความกว้างของ List View ครับ โดยเราสามารถใส่ได้ตามใจชอบนะครับ ว่าอยากให้ List View ของมีความกว้างเท่าไร โดยสามารถปรับความกว้างได้ที่ Properties ของ List View ครับ  ซึ่งจากตัวอย่างผมใส่เป็น 2400px ครับ เพราะผมมีคอลัมน์ค่อนข้างเยอะ ยังไงก็ลองปรับให้เข้ากับหน้าจอที่จะนำไปใช้งานดูครับ

SB6

เสร็จแล้วก็ถึงเวลา RUN Test ดูครับ จะเห็นว่าจะมี Scroll Bar เกิดขึ้นอยู่ด้านล่าง และ คอลัมน์ขยายความกว้างตาม Header ซึ่งก็ค่อนข้างดูง่ายขึ้นกว่าเดิม ยังไงถ้าท่านใดเจอปัญหาการแสดงผลของ list view แบบนี้ลองนำไปใช้ดูกันนะครับ หวังว่าคงจะเป็นประโยชน์กันนะครับ

SB7

SB8

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s