100% helpful (1/1)

How to add borders to list view cells

Topic

How to add borders to all cells in a list view

Instructions

  1. Edit the list view on K2 Designer.
  2. Add a Data Label control to the canvas.
  3. Under the General properties, enable Literal and disable Prevent XSS.
  4. Add or modify a rule for the event: "When the view executed initialized"
  5. Add a "transfer data" action.
  6. Map this value to the Data Label control added in step 2:
    <script>(function() { var setStyle = function() { $(".grid-column-header-table th, td").css({ "border-collapse": "collapse", "border": "1px solid #000000" }); $(".grid-content-table .zebra-stripes tr, td").css({ "padding": "6px", "border": "1px solid black", "vertical-align": "top", "text-align": "left" }); }; $(document).ready(function() { setStyle(); setTimeout(setStyle(), 1500); }); })();</script>​

    This script adds black borders to each cell, including the headers. This can be modified as necessary.

    ListViewBorders.png
  7. Save the view and run it.
 
 
Labels: (2)
Version history
Last update:
‎03-16-2022 02:05 AM
Updated by:
Contributors