Reference Source

UI Controls

Auto Complete

Add auto complete to the web control

See: AutoComplete

Add AutoComplete

  1. In html file add code:

    <input id="autocomplete" />

  2. In js file add code:

     var autoComplete = new KQ.ui.AutoComplete('autocomplete', {});

 var data = [
   "America",
   "Australia",
   "China",
   "France",
   "Germany",
   "Greece",
   "Iceland",
   "Japan",
   "Korea",
   "Netherlands",
   "Poland",
   "Russia",
   "Switzerland",
   "England",
 ];
 autoComplete.setDataSource(data);

Result:

auto-complete

Button

Button web control

See: Button

Add Button

  1. In html file add code:

    <button id="button" type="button">My Button</button>

  2. In js file add code:

    var button = new KQ.ui.Button('button', {});
button.enable(false);

Result:

result

Chart

Chart web control

See: Chart

Pie Chart Basic Usage

  1. In html file add code:

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. In js file add code:

         var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          type: "pie",    // pie chart
          field: "value",
          categoryField: "categoryField",

          labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: \n #= value#%",
          }
        }],

        tooltip: {
          visible: true,
          template: "#= category #-#= value #%",
        },
      });

Result:

result-0

Horizontal Bar Chart

  1. In html file add code:

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. In js file add code:

          var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          type: "bar",    // bar chart(horizontal)
          field: "value",
          categoryField: "categoryField",
        }],
      });

Result:

result-1

Vertical Bar Chart

  1. In html file add code:

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. In js file add code:

          var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          // type: "bar",    // not set type is bar chart(vertical)
          field: "value",
          categoryField: "categoryField",
        }],
      });

Result:

result-2

Show Additional Field

  1. In html file add code:

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. In js file add code:

             var data = [{
           categoryField: "Asia",
           value: 100,
           ratio: "50%",
           color: "#56a36c",
         },{
           categoryField: "Europe",
           value: 100,
           ratio: "50%",
           color: "#2e68aa",
         }];

         var chart = new KQ.ui.Chart('chart', {
           dataSource: {
             data: data,
           },

           title: {
             position: "top",
             text: "Share of Internet Population Growth",
           },

           legend: {
             visible: true,
             position: "left",
           },

           series: [{
             type: "pie",    // pie chart
             field: "value",
             categoryField: "categoryField",

             labels: {
               visible: true,
               background: "transparent",
               template: "#= category #: \n  value: #= data.dataItem.value ## ratio: #= data.dataItem.ratio #",
             }
           }],
         });

Result:

result-3

Checkbox

Checkbox web control

See: Checkbox

Add Checkbox

  1. In html file add code:

    <div id="checkbox"></div>

  2. In js file add code:

    var checkbox = new KQ.ui.Checkbox('checkbox', {label: 'this is a checkbox'});

Result:

result-0

Checked and Unchecked

  1. In html file add code:

    <div id="checkbox1"></div>
<div id="checkbox2"></div>

  2. In js file add code:

    var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is checked'});
var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is unchecked'});

checkbox1.checked(true);
checkbox2.checked(false);

Result:

result-1

Enabled or Disabled

  1. In html file add code:

    <div id="checkbox1"></div>
<div id="checkbox2"></div>

  2. In js file add code:

    var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is enabled'});
var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is disabled'});

checkbox1.enable(true);
checkbox2.enable(false);

Result:

result-2

DropdownList web control

See: DropdownList

Add DropdownList

  1. In html file add code:

    <input id="dropdownlist" />

  2. In js file add code:

    var dropdownlist = new KQ.ui.DropdownList('dropdownlist', {});
dropdownlist.setDataSource(['A', 'B', 'C']);

Result:

dropdown-list

Grid

Grid web control

See: Grid

Add Grid Control

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

     var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

Result:

result-0

HeaderAttributes

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

       var grid = new KQ.ui.Grid('grid', {
       columns: [
         {
           field: "name", title: "The Name",
           attributes: {
             "class": "name-cell",
             style: "text-align: left",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: left",
           },
         },
         {
           field: "age", title: "The Age", width: 100,
           attributes: {
             "class": "name-cell",
             style: "text-align: center",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: center",
           },
         },
         {
           field: "sex", title: "The Sex",
           attributes: {
             "class": "name-cell",
             style: "text-align: right",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: right",
           },
         },
       ],
       dataSource: [
         {name: "Jane Doe", age: 18, sex: "Male"},
         {name: "John Doe", age: 19, sex: "Male"},
         {name: "Eric Brown", age: 20, sex: "Female"},
         {name: "George Doe", age: 21, sex: "Female"},
       ],
     });

Result:

result-1

Height and Scrollable

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

     var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   height: 80,
   scrollable: true,
 });

Result:

result-2

Selectable

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

     var grid = new KQ.ui.TreeList('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: true,
 });

Result:

result-3

Column's Width

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name", width: 200},
     {field: "age", title: "The Age", width: 200},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

Result:

result-4

Pageable

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

       var grid = new KQ.ui.Grid('grid', {
        columns: [
          {field: "name", title: "The Name", width: 200},
          {field: "age", title: "The Age", width: 200},
          {field: "sex", title: "The Sex"},
        ],
        dataSource: [
          {name: "Jane Doe", age: 18, sex: "Male"},
          {name: "John Doe", age: 19, sex: "Male"},
          {name: "Eric Brown", age: 20, sex: "Female"},
          {name: "George Doe", age: 21, sex: "Female"},
        ],

        pageable: {
          pageSize: 2,
          pageSizes: [1, 2, 4, "all"],
          refresh: true,
        },
      });

Result:

result-5

Messages Display

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

    var grid = new KQ.ui.Grid('grid', {
     columns: [
       {field: "name", title: "The Name", width: 200},
       {field: "age", title: "The Age", width: 200},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {name: "Jane Doe", age: 18, sex: "Male"},
       {name: "John Doe", age: 19, sex: "Male"},
       {name: "Eric Brown", age: 20, sex: "Female"},
       {name: "George Doe", age: 21, sex: "Female"},
     ],

     pageable: {
       pageSize: 2,

       messages: {
         previous: "previous page",
         next: "next page",
       },
     },
   });

Result:

result-6

Select and ClearSelection

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

    var grid = new KQ.ui.Grid('grid', {
    columns: [
      {field: "name", title: "The Name", width: 200},
      {field: "age", title: "The Age", width: 200},
      {field: "sex", title: "The Sex"},
    ],
    dataSource: [
      {name: "Jane Doe", age: 18, sex: "Male"},
      {name: "John Doe", age: 19, sex: "Male"},
      {name: "Eric Brown", age: 20, sex: "Female"},
      {name: "George Doe", age: 21, sex: "Female"},
    ],

    selectable: "multiple, row",
  });

  // select the first table row
  grid.select("tr:eq(0)");
  grid.clearSelection();

DataItem

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name", width: 200},
     {field: "age", title: "The Age", width: 200},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],

   selectable: "multiple, row",
 });

 var data = grid.dataItem("tbody>tr:eq(1)");
 console.log("name: " + data.name + "  " + "age: " + data.age + "  " + "sex: " + data.sex); // displays "name: John Doe  age: 19  sex: Male"

Change Event

  1. In html file add code:

    <div id="grid"></div>

  2. In js file add code:

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: "multiple, row",

   change: function(e) {
     var selectedRows = this.select();
     console.log(selectedRows.length);
     var selectedDataItems = []
     for (var i = 0; i < selectedRows.length; i++) {
       var dataItem = this.dataItem(selectedRows[i]);
       selectedDataItems.push(dataItem);                 // selectedDataItems contains all selected data items
     }
   },
 });

ListView

ListView web control

See: ListView

Add ListView

  1. In html file add code:

    <div id="listView"></div>

  2. In js file add code:

    var listView = new KQ.ui.ListView('listView', {});
   listView.setDataSource([{name: 'London'},
     {name: 'England'},
     {name: 'Liverpool'},
     {name: 'Belfast'},
     {name: 'Sydney'},
     {name: 'Leeds'}]);
   listView.selectFirstItem();   // Selects first list view item

   var select_item = listView.dataItem(listView.select());   // Get select item
   var select_item_name = select_item.name;
   console.log(select_item_name);

Result:

list-view

MaskedTextBox

MaskedTextBox web control

See: MaskedTextBox

Add MaskedTextBox

  1. In html file add code:

    <input id="maskedtextbox" />

  2. In js file add code:

    var maskedtextbox = new KQ.ui.MaskedTextBox('maskedtextbox', {});
maskedtextbox.value("Enter value...");

Result:

masked-text-box

PanelBar

PanelBar web control

See: PanelBar

Basic Usage

  1. In css file add code:

     #panelbar{
   margin: 10px;
   width: 300px;
 }

  2. In html file add code:

    <div id="panelbar"></div>

  3. In js file add code:

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   dataSource: [
     {
       text: "Baseball", imageUrl: "./icons/baseball.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"},
         {text: "Radio Records", imageUrl: "./icons/speaker.png"}
       ]
     },
     {
       text: "Golf", imageUrl: "./icons/golf.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"},
         {text: "Radio Records", imageUrl: "./icons/speaker.png"}
       ]
     },
     {
       text: "Swimming", imageUrl: "./icons/swimming.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"}
       ]
     },
     {
       text: "Snowboarding", imageUrl: "./icons/snowboarding.png",
       items: [
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"}
       ]
     }
   ],
 });

Result: result-0

Template Usage

  1. In css file add code:

     #panelbar{
   margin: 10px;
   width: 300px;
 }

  2. In html file add code:

    <div id="panelbar"></div>

  3. In js file add code:

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   template: "#= item.text ## (#= item.inStock #)",
   dataSource: [
     { text: "foo", inStock: 7, items: [
       { text: "bar", inStock: 2 },
       { text: "baz", inStock: 5 }
     ] }
   ]
 });

Result: result-1

Select Event

  1. In html file add code:

    <div id="panelbar"></div>

  2. In js file add code:

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   template: "#= item.text ## (#= item.inStock #)",
   dataSource: [
     { text: "foo", inStock: 7, items: [
       { text: "bar", inStock: 2 },
       { text: "baz", inStock: 5 }
     ],}
   ],

   select: function(e){
     var dataItem = panelbar.dataItem(e.item);
     // printf: item info: (text: bar, inStock: 2)
     console.log('item info: ' + '(text: '+ dataItem.text + ', inStock: ' + dataItem.inStock + ')');
   },
 });

RadioButton

RadioButton web control

See: RadioButton

Add Radio Button

  1. In html file add code:

    <div id="radiobutton"></div>

  2. In js file add code:

    var radiobutton = new KQ.ui.RadioButton('radiobutton', {label: 'this is a radiobutton'});

Result:

result-0

Checked and Unchecked

  1. In html file add code:

    <div id="radiobutton1"></div>
<div id="radiobutton2"></div>

  2. In js file add code:

    var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is checked'});
var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is unchecked'});

radiobutton1.checked(true);
radiobutton2.checked(false);

Result:

result-1

Enabled or Disabled

  1. In html file add code:

    <div id="radiobutton1"></div>
<div id="radiobutton2"></div>

  2. In js file add code:

    var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is enabled'});
var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is disabled'});

radiobutton1.enable(true);
radiobutton2.enable(false);

Result:

result-2

TabStrip

TabStrip web control

See： TabStrip

Basic Usage

  1. In html file add code:

    <div id="tabstrip">
 <ul>
     <li class="k-state-active">
         Paris
     </li>
     <li>
         New York
     </li>
     <li>
         London
     </li>
     <li>
         Moscow
     </li>
 </ul>
 <div>
     <span class="rainy">&nbsp;</span>
     <div class="weather">
         <h2>17<span>&ordm;C</span></h2>
         <p>Rainy weather in Paris.</p>
     </div>
 </div>
 <div>
     <span class="sunny">&nbsp;</span>
     <div class="weather">
         <h2>29<span>&ordm;C</span></h2>
         <p>Sunny weather in New York.</p>
     </div>
 </div>
 <div>
     <span class="sunny">&nbsp;</span>
     <div class="weather">
         <h2>21<span>&ordm;C</span></h2>
         <p>Sunny weather in London.</p>
     </div>
 </div>
 <div>
     <span class="cloudy">&nbsp;</span>
     <div class="weather">
         <h2>16<span>&ordm;C</span></h2>
         <p>Cloudy weather in Moscow.</p>
     </div>
 </div>
</div>

  2. In css file add code:

    .sunny, .cloudy, .rainy {
         display: block;
         margin: 30px auto 10px;
         width: 128px;
         height: 128px;
         background: url('weather.png') transparent no-repeat 0 0;
     }

     .cloudy{
         background-position: -128px 0;
     }

     .rainy{
         background-position: -256px 0;
     }

     .weather {
         margin: 0 auto 30px;
         text-align: center;
     }

     #tabstrip h2 {
         font-weight: lighter;
         font-size: 5em;
         line-height: 1;
         padding: 0 0 0 30px;
         margin: 0;
     }

     #tabstrip h2 span {
         background: none;
         padding-left: 5px;
         font-size: .3em;
         vertical-align: top;
     }

     #tabstrip p {
         margin: 0;
         padding: 0;
     }

  3. In js file add code:

     var tabstrip =  new KQ.ui.TabStrip('tabstrip', {});

Result:

result-0

Add Image to Tabs

  1. In html file add code:：

    <div id="tabstrip"></div>

  2. In js file add code:：

       var tabstrip = new KQ.ui.TabStrip('tabstrip', {
      dataTextField: "text",
      dataImageUrlField: "imageUrl",
      dataContentField: "content",
      dataSource: [
        {
          text: "Baseball",
          imageUrl: "baseball.png",
          content: "Baseball is a bat-and-ball sport played between two teams of nine players each. The aim is to score runs by hitting a thrown ball with a bat and touching a series of four bases arranged at the corners of a ninety-foot diamond. Players on the batting team take turns hitting against the pitcher of the fielding team, which tries to stop them from scoring runs by getting hitters out in any of several ways. A player on the batting team can stop at any of the bases and later advance via a teammate's hit or other means. The teams switch between batting and fielding whenever the fielding team records three outs. One turn at bat for each team constitutes an inning and nine innings make up a professional game. The team with the most runs at the end of the game wins."
        },
        {
          text: "Golf",
          imageUrl: "golf.png",
          content: "Golf is a precision club and ball sport, in which competing players (or golfers) use many types of clubs to hit balls into a series of holes on a golf course using the fewest number of strokes. It is one of the few ball games that does not require a standardized playing area. Instead, the game is played on golf courses, each of which features a unique design, although courses typically consist of either nine or 18 holes. Golf is defined, in the rules of golf, as playing a ball with a club from the teeing ground into the hole by a stroke or successive strokes in accordance with the Rules."
        },
        {
          text: "Swimming",
          imageUrl: "swimming.png",
          content: "Swimming has been recorded since prehistoric times; the earliest recording of swimming dates back to Stone Age paintings from around 7,000 years ago. Written references date from 2000 BC. Some of the earliest references to swimming include the Gilgamesh, the Iliad, the Odyssey, the Bible, Beowulf, and other sagas. In 1578, Nikolaus Wynmann, a German professor of languages, wrote the first swimming book, The Swimmer or A Dialogue on the Art of Swimming (Der Schwimmer oder ein Zwiegespräch über die Schwimmkunst). Competitive swimming in Europe started around 1800, mostly using breaststroke."
        }
      ]
    });

    tabstrip.select(0);

Result:

result-1

TextArea

TextArea web mark

See: TextArea

Add TextArea

  1. In html file add code:

    <textarea id="myid">default-content</textarea>

  2. In js file add code:

    var textarea = new KQ.ui.TextArea('myid');
textarea.value("my content");  //change the contont to "my content"
console.log(textarea.value()); //print "my content"

Result:

textarea

textarea

TreeList

TreeList web control

See: TreeList

Add TreeList Control

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

Result:

result-0

HeaderAttributes

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {
       field: "name", title: "The Name",
       attributes: {
         "class": "name-cell",
         style: "text-align: left",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: left",
       },
     },
     {
       field: "age", title: "The Age", width: 100,
       attributes: {
         "class": "name-cell",
         style: "text-align: center",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: center",
       },
     },
     {
       field: "sex", title: "The Sex",
       attributes: {
         "class": "name-cell",
         style: "text-align: right",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: right",
       },
     },
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

Result:

result-1

Height and Scrollable

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   height: 80,
   scrollable: true,
 });

Result:

result-2

Selectable

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: true,
 });

Result:

result-3

Expandable

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

     var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name", expandable: true},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
       {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
       {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
       {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
     ],
   });

Result:

result-4

Row or Cell Select

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

      var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name"},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {name: "Jane Doe", age: 18, sex: "Male"},
       {name: "John Doe", age: 19, sex: "Male"},
       {name: "Eric Brown", age: 20, sex: "Female"},
       {name: "George Doe", age: 21, sex: "Female"},
     ],

     selectable: "cell",
   });
   treelist.select($("#treelist td:eq(0)"));

Result:

result-5

Expands The Row

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

    var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name", expandable: true},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
       {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
       {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
       {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
     ],
   });
   treelist.expand($("#treelist tbody>tr:eq(0)"));

Result:

result-6

Returns The Data Item

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

    var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name", expandable: true},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
     {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
     {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
     {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
   ],
 });
 var data = treelist.dataItem("tbody>tr:eq(1)");
 console.log("name: " + data.name + "  " + "age: " + data.age + "  " + "sex: " + data.sex); // displays "name: John Doe  age: 19  sex: Male"

Change Event

  1. In html file add code:

    <div id="treelist"></div>

  2. In js file add code:

    var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: "multiple, row",

   change: function(e) {
     var selectedRows = this.select();
     console.log(selectedRows.length);
     var selectedDataItems = []
     for (var i = 0; i < selectedRows.length; i++) {
       var dataItem = this.dataItem(selectedRows[i]);
       selectedDataItems.push(dataItem);                 // selectedDataItems contains all selected data items
     }
   },
 });

TreeView

TreeView web control

See: TreeView

Add TreeView Control

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

         // key        node id (must be unique inside the tree)
     // title      display name (may contain HTML)
     // data       ontains all extra data that was passed on node creation
     // children   Array of child nodes.
     // expanded   Use isExpanded(), setExpanded() to access this property.
     // folder     folder nodes have different default icons and click behavior.
     // selected   Use isSelected(), setSelected() to access this property.
     // tooltip    Alternative description used as hover popup

    var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
      {key: "id2", title: "item2"},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1"},
              {key: "id3.1.2", title: "Sub-item 3.1.2"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource});

Result:

result-0

Checkbox

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

      var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
      {key: "id2", title: "item2", selected: true},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1"},
              {key: "id3.1.2", title: "Sub-item 3.1.2"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, checkbox: true});

Result:

result-1

Custom Icon

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

     var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
      {key: "id2", title: "item2", selected: true, icon: "point.png"},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
              {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, imagePath: "../../images/"});

Result:

result-2

Select Event

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

    var dataSource = [
   {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
   {key: "id2", title: "item2", selected: true, icon: "point.png"},
   {
     key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
     {
       key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
       {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
       {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
     ],
     },
     {
       key: "id3.2", title: "Sub-item 3.2", folder: true,
       children: [
         {key: "id3.2.1", title: "Sub-item 3.2.1"},
         {key: "id3.2.2", title: "Sub-item 3.2.2"},
       ],
     },
     {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
   ]
   },
 ];

 var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"});
 treeview.on('click', function (paramers) {
   var data = paramers.data;
   var node = data.node;

   // key:id1, title:item1 with key and tooltip, tooltip:Look, a tool tip!, icon:line.png
   console.log("key:" + node.key + ", title:" + node.title + ", tooltip:" + node.tooltip + ", icon:" + node.icon);
 }, treeview);

Visit Function

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

      var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
      {key: "id2", title: "item2", selected: true, icon: "point.png"},
      {
        key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
        {
          key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
          {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
          {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
        ],
        },
        {
          key: "id3.2", title: "Sub-item 3.2", folder: true,
          children: [
            {key: "id3.2.1", title: "Sub-item 3.2.1"},
            {key: "id3.2.2", title: "Sub-item 3.2.2"},
          ],
        },
        {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
      ]
      },
    ];

    var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"});
    var keys = [];
    treeview.visit(function (node) {
      keys.push(node.key);
    });

    // id1, id2, id3, id3.1, id3.1.1, id3.1.2, id3.2, id3.2.1, id3.2.2, id3.3
    console.log(keys.join(", "));

Lazy Load

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

       // notice: lazy flag must true
   var source = [
       {title: "item1", key: "item1", folder: true, lazy: true},
       {title: "item2", key: "item2", folder: true, lazy: true},
       {title: "item3", key: "item3", folder: true, lazy: true},
   ];
   var treeview = new KQ.ui.TreeView('treeview', {source: source});

   // node: the current click node, return is a sub items array
   treeview.subItemsLazyLoadFn(function (node) {
     if (node.key === "item1"){
       return [{title: "sub_item1_1"}, {title: "sub_item1_2"}];
     }else if (node.key === "item2"){
       return [{title: "sub_item2_1"}, {title: "sub_item2_2"}];
     }else if (node.key === "item3"){
       return [{title: "sub_item3_1"}, {title: "sub_item3_2"}, {title: "sub_item3_3"}];
     }
   });

    Result:

result-3

TreeViewNode's Usage

  1. In html file add code:

    <div id="treeview"></div>

  2. In js file add code:

       var dataSource = [
        {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
        {key: "id2", title: "item2"},
        {
          key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
            {key: "id3.1.1", title: "Sub-item 3.1.1"},
            {key: "id3.1.2", title: "Sub-item 3.1.2"},
          ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]
        },
      ];

      var treeview = new KQ.ui.TreeView("treeview",  {source: dataSource, checkbox: true});
      var treeViewNode = treeview.getNodeByKey('id3.1');

      console.log(treeViewNode.isExpanded());         // true
      console.log(treeViewNode.isFolder());           // true
      console.log(treeViewNode.isSelected());         // false

      treeViewNode.setSelected(true);
      console.log(treeViewNode.isSelected());         // true

Window

Display a moveable, scalable window on the screen, it can be with a title, close button.

See: Window

Add Window

Display custom content in the new window.

  1. Find folder and open it: 'kqwebmap/window'.

  2. Add new file 'example.html'.

    <div id="example">
<div id="window">
 <div class="armchair">
   <img src="http://lorempixel.com/199/194" alt="Artek Alvar Aalto - Armchair 402"/> Artek Alvar Aalto - Armchair 402
 </div>
 <p>Alvar Aalto is one of the greatest names in modern architecture and design. 
 Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, 
 fluid organic shapes that let the end user decide the use. 
 Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection 
 that remains true to his original design.</p>

 <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, 
 was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of 
 Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

 <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, 
 and a member of the Congres Internationaux d'Architecture Moderne. 
 Major architectural works include the Finlandia Hall in Helsinki, Finland, 
 and the campus of Helsinki University of Technology.</p>

 <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
</div>

<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span>

<div class="responsive-message"></div>

<button id="button" type="button" onclick="onExampleButtonClick()">Button</button>

<script>
 function onExampleButtonClick () {
   console.log('onExampleButtonClick!');
 }
</script>

<style>
 #undo {
   text-align: center;
   position: absolute;
   white-space: nowrap;
   padding: 1em;
   cursor: pointer;
 }

 .armchair {
   float: left;
   margin: 30px 30px 120px 30px;
   text-align: center;
 }

 .armchair img {
   display: block;
   margin-bottom: 10px;
   width: 199px;
   height: 194px;
 }

 @media screen and (max-width: 500px) {
   div.k-window {
     display: none !important;
   }
 }
</style>
</div>

  3. Add code in js file.

    KQ.Common.CommonTools.loadUiLib(function () {
var win = new KQ.Control.Window('example', {
parentID: 'map',
position: {
 left: '100px',
 top: '100px',
},
});

win.initAsync();
win.open();
});

Result:

result