Skip to content

Commit 333f130

Browse files
dkamburovdkamburov
committed
Add append-rows-on-demand sample
1 parent a82ee2a commit 333f130

3 files changed

Lines changed: 158 additions & 0 deletions

File tree

‎HTMLSamples/grid/append-rows-on-demand.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>$$(Title_append-rows-on-demand)</title>
5+
<meta charset="utf-8" />
6+
<!-- Ignite UI Required Combined CSS Files -->
7+
<link href="%%ignite-ui%%/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
8+
<link href="%%ignite-ui%%/css/structure/infragistics.css" rel="stylesheet" />
9+
10+
<script src="%%modernizr%%"></script>
11+
<script src="%%jquery%%"></script>
12+
<script src="%%jquery-ui%%"></script>
13+
14+
<!-- Ignite UI Required Combined JavaScript Files -->
15+
<script src="%%ignite-ui%%/js/infragistics.core.js"></script>
16+
<script src="%%ignite-ui%%/js/infragistics.lob.js"></script>
17+
18+
<script src="%%jsrender%%" type="text/javascript"></script>
19+
20+
<style type="text/css">
21+
.tweet-user {
22+
font-size: 14px;
23+
font-family: Arial, sans-serif;
24+
font-weight: bold;
25+
float: left;
26+
}
27+
28+
.tweet-text {
29+
font-size: 14px;
30+
font-family: Arial, sans-serif;
31+
}
32+
33+
.tweet-screen-name {
34+
font-size: 12px;
35+
font-family: Arial, sans-serif;
36+
color: #999;
37+
margin-left: 10px;
38+
float: left;
39+
}
40+
41+
.tweet {
42+
float: none;
43+
padding-left: 50px;
44+
}
45+
46+
.tweet p {
47+
margin: 5px;
48+
}
49+
50+
.tweet-date {
51+
float: right;
52+
font-size: 12px;
53+
font-family: Arial, sans-serif;
54+
color: #999;
55+
}
56+
</style>
57+
58+
</head>
59+
<body>
60+
<h3>$$(AppendRowsOnDemand_Auto_Caption)</h3>
61+
<table id="autoAppendRowsOnDemand"></table>
62+
<br>
63+
64+
<h3>$$(AppendRowsOnDemand_Button_Caption)</h3>
65+
<table id="buttonAppendRowsOnDemand"></table>
66+
<br>
67+
<script>
68+
69+
$(function () {
70+
//jsRender helper function which formats the string date
71+
$.views.helpers({
72+
formatDate: function (val) {
73+
var date = new Date(val);
74+
if (!isNaN(date) && ($.type(date) === "date")) {
75+
return $.ig.formatter(date, "date", "dateTime");
76+
}
77+
return val;
78+
}
79+
});
80+
81+
//Hide the button after all data is loaded.
82+
$(document).delegate("#buttonAppendRowsOnDemand", "iggridrendered", function (evt, ui) {
83+
$("#buttonAppendRowsOnDemand_loadMoreButton").click(function () {
84+
var totalRecCount = $("#buttonAppendRowsOnDemand").data("igGrid").dataSource.totalRecordsCount();
85+
var currentRecCount = $("#buttonAppendRowsOnDemand").data("igGrid").dataSource.totalLocalRecordsCount();
86+
var chunkSize = $("#buttonAppendRowsOnDemand").igGridAppendRowsOnDemand("option", "chunkSize");
87+
if (totalRecCount <= currentRecCount + chunkSize) {
88+
$("#buttonAppendRowsOnDemand_loadMoreButton").hide();
89+
}
90+
});
91+
});
92+
93+
$('#autoAppendRowsOnDemand').igGrid({
94+
dataSource: 'http://igniteui.com/api/tweets',
95+
responseDataKey: 'Records',
96+
autoGenerateColumns: false,
97+
enableUTCDates: true,
98+
columns: [
99+
{
100+
unbound: true,
101+
key: 'Tweets',
102+
headerText: 'Infragistics Tweets',
103+
template: '<div style=\'float:left\'><img src=\'../../images/ig_twitter_logo.png\' ></img></div><div class=\'tweet\'><p style=\'height:20px\'><span class=\'tweet-user\'>{{>User.Name}}</span><span class=\'tweet-screen-name\'>@{{>ScreenName}}</span><span class=\'tweet-date\'>{{>#view.hlp(\'formatDate\')(CreatedAt)}}</span></p><p class=\'tweet-text\'>{{>Text}}</p></div>'
104+
}
105+
],
106+
features: [
107+
{
108+
recordCountKey: 'TotalRecordsCount',
109+
chunkIndexUrlKey: 'page',
110+
chunkSizeUrlKey: 'pageSize',
111+
name: 'AppendRowsOnDemand',
112+
loadTrigger: 'auto',
113+
type: 'remote'
114+
}
115+
],
116+
width: '100%',
117+
height: '300px',
118+
templatingEngine: 'jsrender'
119+
});
120+
121+
$('#buttonAppendRowsOnDemand').igGrid({
122+
dataSource: 'http://igniteui.com/api/tweets',
123+
responseDataKey: 'Records',
124+
autoGenerateColumns: false,
125+
enableUTCDates: true,
126+
columns: [
127+
{
128+
unbound: true,
129+
key: 'Tweets',
130+
headerText: 'Infragistics Tweets',
131+
template: '<div style=\'float:left\'><img src=\'../../images/ig_twitter_logo.png\' ></img></div><div class=\'tweet\'><p style=\'height:20px\'><span class=\'tweet-user\'>{{>User.Name}}</span><span class=\'tweet-screen-name\'>@{{>ScreenName}}</span><span class=\'tweet-date\'>{{>#view.hlp(\'formatDate\')(CreatedAt)}}</span></p><p class=\'tweet-text\'>{{>Text}}</p></div>'
132+
}
133+
],
134+
features: [
135+
{
136+
recordCountKey: 'TotalRecordsCount',
137+
chunkIndexUrlKey: 'page',
138+
chunkSizeUrlKey: 'pageSize',
139+
name: 'AppendRowsOnDemand',
140+
loadTrigger: 'button',
141+
type: 'remote'
142+
}
143+
],
144+
width: '100%',
145+
height: '300px',
146+
templatingEngine: 'jsrender'
147+
});
148+
});
149+
</script>
150+
151+
</body>
152+
</html>

‎HTMLSamples/grid/strings-en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"AdventureWorks_Products_SellStartDate": "Sell Start Date",
1010
"AdventureWorks_Products_StandardCost": "Standard Cost",
1111
"americana_variety": "Americana Variety - Mix of 6 flavors",
12+
"AppendRowsOnDemand_Auto_Caption": "Load on Demand - loadTrigger: auto",
13+
"AppendRowsOnDemand_Button_Caption": "Load on Demand - loadTrigger: button",
1214
"assets_accRec": "Accounts Receivable",
1315
"assets_books": "Assets Books",
1416
"assets_cash": "Assets Cash",
@@ -168,6 +170,7 @@
168170
"table_lbl_title": "Title",
169171
"Title_advanced-filtering": "Advanced Filtering",
170172
"Title_angular": "AngularJS",
173+
"Title_append-rows-on-demand": "Append Rows On Demand",
171174
"Title_auto-generate-columns": "Auto-Generate Columns",
172175
"Title_bind-grid-with-ko": "KnockoutJS Configuration",
173176
"Title_cell-merging": "Cell Merging",

‎HTMLSamples/grid/strings-ja.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"AdventureWorks_Products_SellStartDate": "販売の開始日付",
1010
"AdventureWorks_Products_StandardCost": "標準の原価",
1111
"americana_variety": "アメリカン バラエティ - 6 つのフレーバー",
12+
"AppendRowsOnDemand_Auto_Caption": "ロードオンデマンド - loadTrigger: auto",
13+
"AppendRowsOnDemand_Button_Caption": "ロードオンデマンド - loadTrigger: button",
1214
"assets_accRec": "売掛金勘定",
1315
"assets_books": "資産台帳",
1416
"assets_cash": "現金資産",
@@ -168,6 +170,7 @@
168170
"table_lbl_title": "役職",
169171
"Title_advanced-filtering": "高度なフィルタリング",
170172
"Title_angular": "AngularJS との連携",
173+
"Title_append-rows-on-demand": "オン デマンドで行を追加",
171174
"Title_auto-generate-columns": "列の自動生成",
172175
"Title_bind-grid-with-ko": "KnockoutJS の構成",
173176
"Title_cell-merging": "セルの結合",

0 commit comments

Comments
 (0)