30 Minutes To Grasp ASP. NET jQuery Repeater

Introduction/Catalog

The original: http://zoyobar.blogspot.com/2011/10/30-minutes-to-grasp-asp-net-jquery.html , last updated: 2011-11-26

Due to the limited time, synchronization cannot be guaranteed in more than one blog article, at the following address you can view up-to-date content, please understand:

http://zoyobar.blogspot.com/2011/10/30-minutes-to-grasp-asp-net-jquery.html

Download sample: JQueryElementDemo-en.zip, the directory is /JQueryElementTest.rar/3/Student.aspx or /repeater/Default.aspx.

This article explains the function and the use of Repeater, the directory is as follows:

* Prepare
* Main Function
* Bound Field
* Field Expressions
* Bound Attribute
* Attribute Expressions
* Basic Settings
* Pagination Settings
* Field Settings
* Call Server Methods
* Data Format of Request/Return
* Fill/Filter
* Update
* Remove
* Insert
* Row Status Description
* Sorting Status Description
* Template Settings
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* TipTemplate
* Special Binding
* je-id
* je-<javascript event name>
* je-class
* je-checked/selected/readonly
* je-value
* je-<jQueryUI widget name>
* je-template
* Child Views
* Grouping Data
* Handling Control
* Message
* Retrieving Data
* Sorting
* Event
* Client Methods

Prepare

Be sure that you have got the latest version of JQueryElement at Download JQueryElement

Use the following statements to reference namespace:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
 Namespace="zoyobar.shared.panzer.ui.jqueryui"
 TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
 Namespace="zoyobar.shared.panzer.web.jqueryui"
 TagPrefix="je" %>

In addition to the namespace, you need to reference the jQueryUI scripts and styles, there is a custom theme for jQueryUI in the compressed file downloaded at Download JQueryElement, if you need more themes, you can get them at jqueryui.com/download:

<link type="text/css" rel="stylesheet"
 href="[style path]/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript"
 src="[script path]/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
 src="[script path]/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript"
 src="[script path]/jquery.ui.datepicker-zh-CN.js"></script>

Main Function

Bound Field

In the row template, you can use the #{<field name>[,<field expression >]} bound fields, such as:

<ItemTemplate>
 <span>#{id}</span>
 <span>#{realname}</span>
 <span>#{age}</span>
</ItemTemplate>

Fields can also be bound in the tag's attributes, such as:

<ItemTemplate>
 <span>#{id}</span>
 <span title="#{realname}">#{realname}</span>
 <span>#{age}</span>
</ItemTemplate>

Field Expressions

When you want to display different content based on the value of the field, you can use the field expression, # in the expression represent fields itself, examples:

<script type="text/javascript">
 function convertAge(age) {

  if (age < 0) return age.toString() + '-unborn';
  else if (age < 4) return age.toString() + '-douding';
  else if (age < 10) return age.toString() + '-children';
  else if (age < 18) return age.toString() + '-boy';
  else if (age < 30) return age.toString() + '-young';
  else if (age < 50) return age.toString() + '-middle-aged';
  else return age.toString() + '-old';

 }
</script>

<td>
 #{age,convertAge(#)}
</td>

In the above example, #{age,convertAge(#)} does not directly output value of the age field, but the age field is passed to the convertAge method, and outputs the results of the method.

You can also write javascript code in field expression, like: #{age,# <= 0 ? 'no way' : #.toString()}.

More ways to use and description refer to Binding And Handling JSON Field In jQuery Repeater.

Bound Attribute

In all of the template can be bound attributes, syntax is @{<attribute name>[,<attribute expression>]}, for example:

<FooterTemplate>
 @{pageindex}/@{pagecount} pages, @{itemcount} totals
</FooterTemplate>

The row template, not automatically refreshed by attribute changes, call bind method refresh row template if you want.

Attribute Expressions

Attribute expressions, and the field expression above are similar, you can output the converted attribute, example:

<td colspan="5">
 @{pageindex}/@{pagecount,@ <= 0 ? '-' : @} pages,
 @{itemcount,@ <= 0 ? '-' : @} totals
</td>

If the attribute pagecount and itemcount less than or equal to 0, it will display connection lines.

Basic Settings

Seletor property of the Repeater is a javascript expression, it will serve as a selector, writing can refer to jquery.com, the selected element will become the container of repeater, example:

<table id="list"></table>

<je:Repeater ID="studentRepeater" runat="server"
 Selector="'#list'">

</je:Repeater>

Set the IsVariable property to True, it will generate a javascript variable whose name is same with the ClientID, example:

<je:Repeater ID="studentRepeater" runat="server"
 IsVariable="true">
</je:Repeater>

<script type="text/javascript">
 $(function () {
  studentRepeater.repeater('fill');
 });
</script>

Because the ClientID is same with ID, through studentRepeater can access the repeater. In addition, can also use the inline syntax [%id:studentRepeater%] to ensure that you can access repeater javascript variable when ClientID is not the same with ID.

Pagination Settings

By setting the PageSize property of Repeater to determine how many records per page, PageIndex property to set the initial page number, PageIndex defaults to 1.

Field Settings

Repeater Field property represents the fields involved in the binding, in the form of a javascript string array, for example: ['id', 'realname', 'age'], if you do not set the Field property, it will be determined by the data to fill for the first time, but this will result could not create a new row in the absence of data.

FilterField fields for searching, is also a javascript string array. FilterFieldDefault is default value of the field whose value is null or '', example: ['', '', 0].

SortField said the sort fields, for example: ['id'].

FieldMask represents the regular expression used to validate the field, when you update or create a new row, work in the format: {<field name>: { reg: <regular expression>, tip: '<error message>', type: '<field type, number, boolean, date>'} }.

Call Server Methods

You can set how to call server methods by Async, if you are calling WebService, you need to set the MethodName, if such a general handler ashx, ignore the MethodName, example:

<je:Repeater ID="studentRepeater" runat="server"
 FillAsync-Url="<fill method url>"
 FillAsync-MethodName="<fill method name>"
 UpdateAsync-Url="<update method url>"
 UpdateAsync-MethodName="<update method name>"
 InsertAsync-Url="<insert method url>"
 InsertAsync-MethodName="<insert method name>"
 RemoveAsync-Url="<remove method url>"
 RemoveAsync-MethodName="<remove method name>"
 >

</je:Repeater>

<je:Repeater ID="studentRepeater" runat="server"
 FillAsync-Url="Student.aspx"
 FillAsync-MethodName="Fill"
 UpdateAsync-Url="Student.aspx"
 UpdateAsync-MethodName="Update"
 InsertAsync-Url="Student.aspx"
 InsertAsync-MethodName="Insert"
 RemoveAsync-Url="Student.aspx"
 RemoveAsync-MethodName="Remove"
 >

</je:Repeater>

If you need more parameters to be passed to a method, you can take the following forms:

<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="<fill method url>" MethodName="<fill method name>">
 <ParameterList>
  <je:Parameter Name="<parameter 1>"
   Type="Expression"
   Value="<value 1>"
   Default="<defaul value 1>" />
  <je:Parameter Name="<parameter 2>"
   Type="Selector"
   Value="<value 2>"
   Default="<defaul value 2>" />

 </ParameterList>
</FillAsync>
</je:Repeater>

<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="Student.aspx" MethodName="Fill">
 <ParameterList>
  <je:Parameter Name="ws"
   Type="Expression"
   Value="website"
   Default="'-'" />
  <je:Parameter Name="year"
   Type="Selector"
   Value="'#year'"
   Default="2011" />

 </ParameterList>
</FillAsync>
</je:Repeater>

By adding a Parameter, you can pass additional parameters, Name property is the parameter name, when Type is Expression, then the Value is a javascript expression, Value="website" represents the website take javascript variables, of course, you can set to a constant, for example: Value="'www.google.com'" or Value="100", when Type is Selector, then the Value is a selector, selector writing can refer to jquery.com, the value of the selected element as the parameter value. Default is the default value of the javascript expressions, when the value is null or '', will use the Default values, and detail can refer to Through Parameter Object Add Ajax Request Parameter.

Data Format of Request/Return

About how to return JSON, refer to Return JSON In Different .NET Version, all of the following code written in .NET 4.

Fill/Filter

For a fill or search operations, WebService, for example, the server will receive the following parameters, pageindex page number, pagesize how many records per page, can also receive parameter whose name is same with field or Name property of Parameter, or receive form __order used to sort, parameter values are similar to name asc, age desc, __group parameter is used to receive a group condition:

[WebMethod ( )]
public static object <method name> ( int pageindex, int pagesize
 [, <type n, such as: string> <field or condition name n>]
 [, string __order]
 [, string __group] )
{
}

[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
 , string realname, int age
 , string __order )
{
}

Server should return JSON by the following format, where __success is true by default, itemcount can be omitted, but keep the pagecount can not be calculated.

{
 "__success": <success? true or false>,
 "rows": <array, data of current page>,
 "itemcount": <count of rows>
 [, "custom": <custom object, such as: { message: 'ok' }>]
}

{
 "__success": true,
 "rows":
 [
  { "id": 1, "realname": "jack", "age": 20 },
  { "id": 2, "realname": "tom", "age": 21 }
 ],
 "itemcount": 120
}

In the .NET 4, you can use anonymous types to return JSON, such as:

[WebMethod ( )]
public static object Fill ( /* parameter */ )
{
 // ...
 List<object> students = new List<object> ( );
 students.Add ( new {
  id = 1,
  realname = "jack",
  age = 20
  } );
 // ...
 return new { __success = true,
  rows = students.ToArray ( ),
  itemcount = 120 };
}

Update

For update operations, WebService, for example, the server will receive the updated fields as the parameter:

[WebMethod ( )]
public static object <method name> (
 <type, such as: string> <update field name>
 [, <type n, such as: string> <update field name n>])
{
}

[WebMethod ( )]
public static object Update ( int id
 , string realname, int age )
{
}

Servers can return JSON as an update message, __success is true by default, row can be omitted, if you modify the parameters passed from the client, such as the name changed to lowercase to uppercase, then you can use the row to return the modified field.

{
 "__success": <success? true or false>,
 "row": <updated row>
 [, "custom": <custom object, such as: { message: 'ok' }>]
}

{
 "__success": true,
 "row": { "realname": "JACK" }
}

In the .NET 4, you can use anonymous types to return JSON, such as:

[WebMethod ( )]
public static object Update ( /* parameter */ )
{
 // ..., row can be omitted
 return new { __success = true,
  row = new { realname = "JACK" }
  };
}

Remove

For delete operations, WebService, for example, the server will receive the field used for removing as a parameter:

[WebMethod ( )]
public static object <method name> (
 <type, such as: string> <name of field used to remove>
 [, <type n, such as: string> <name of field used to remove n>])
{
}

[WebMethod ( )]
public static object Remove ( int id )
{
}

Servers can return JSON as a deleted message, __success is true by default.

{
 "__success": <success? true or false>
 [, "custom": <custom object, such as: { message: 'ok' }>]
}

{
 "__success": true
}

In the .NET 4, you can use anonymous types to return JSON, such as:

[WebMethod ( )]
public static object Remove ( /* parameter */ )
{
 // ..., row can be omitted
 return new { __success = true };
}

Insert

For the insert operation, WebService, for example, the server will receive the field used for inserting as a parameter:

[WebMethod ( )]
public static object <method name> (
 <type, such as: string> <name of field used to create>
 [, <type n, such as: string> <name of field used to create n>])
{
}

[WebMethod ( )]
public static object Insert ( string realname
 , int age )
{
}

Servers can return JSON as a inserted message, __success is true by default.

{
 "__success": <success? true or false>,
 "row": <inserted row>
 [, "custom": <custom object, such as: { message: 'ok' }>]
}

{
 "__success": true,
 "row": { "id":10, "realname": "lili", "age": 12 }
}

In the .NET 4, you can use anonymous types to return JSON, such as:

[WebMethod ( )]
public static object Insert ( /* parameter */ )
{
 // ..., row row can be omitted
 return new { __success = true,
  row = new { id = 10, realname = "lili", age = 12 }
  };
}

Row Status Description

There are 4 kinds row status in client, namely unchanged did not change, updated updated, inserted a new row, removed deleting rows.

Sorting Status Description

There are 3 kinds sorting status in client, namely none no sorting or to use default sorting, asc ascending order, desc descending order.

Template Settings

In all of the templates, you can set the final display by html code, the html code should be complete, legitimate, else, this could cause the final display do not work properly.

ItemTemplate

In the ItemTemplate template, you can display the unchanged row, if you do not set UpdatedItemTemplate or InsertedItemTemplate, then updated, inserted row will appear in the ItemTemplate, example:

<ItemTemplate>
 <tr>
  <td>
   #{id}
  </td>
  <td>
   #{realname}
  </td>
  <td>
   #{age}
  </td>
  <td>
   /* edit or remove button */
  </td>
 </tr>
</ItemTemplate>

UpdatedItemTemplate/InsertedItemTemplate

UpdatedItemTemplate and InsertedItemTemplate is used to display updated and inserted rows, respectively, primarily for the use of different styles to display different status of the row, but it can be easier to use je-class to accomplish the same effect, example:

<UpdatedItemTemplate>
 <tr style="font-weight: bold;">
  <td>
   #{id}
  </td>
  <td>
   #{realname}
  </td>
  <td>
   #{age}
  </td>
 </tr>
</UpdatedItemTemplate>

<InsertedItemTemplate>
 <tr style="color: green;">
  <td>
   #{id}
  </td>
  <td>
   #{realname}
  </td>
  <td>
   #{age}
  </td>
 </tr>
</InsertedItemTemplate>

RemovedItemTemplate

Removed status row is not displayed by default, unless RemovedItemTemplate is set, the examples:

<RemovedItemTemplate>
 <tr style="color: red;">
  <td>
   #{id}
  </td>
  <td>
   #{realname}
  </td>
  <td>
   #{age}
  </td>
  <td>
   removed
  </td>
 </tr>
</RemovedItemTemplate>

EditItemTemplate

EditItemTemplate is used to edit the row, which includes elements such as input, if you need to get a field value, you also need to set je-id="<field name>", example:

<EditItemTemplate>
 <tr>
  <td>
   #{id}
  </td>
  <td>
   <input type="text" je-id="realname" value="#{realname}" />
  </td>
  <td>
   <input type="text" je-id="age" value="#{age}" />
  </td>
  <td>
   /* cancel or update button */
  </td>
 </tr>
</EditItemTemplate>

FilterTemplate/NewItemTemplate

FilterTemplate and NewItemTemplate are similar, also contains some input elements, you need to use je-id to bind id, example:

<FilterTemplate>
 <tr>
  <td>
   <input type="text" je-id="realname" value="#{realname}" />
  </td>
  <td>
   <input type="text" je-id="age" value="#{age}" />
  </td>
  <td>
   /* search button */
  </td>
 </tr>
</FilterTemplate>

<NewItemTemplate>
 <tr>
  <td>
   <input type="text" je-id="realname" value="#{realname}" />
  </td>
  <td>
   <input type="text" je-id="age" value="#{age}" />
  </td>
  <td>
   /* insert button */
  </td>
 </tr>
</NewItemTemplate>

HeaderTemplate/FooterTemplate/EmptyTemplate

HeaderTemplate is header template and FooterTemplate is footer template, EmptyTemplate template in the absence of data.

TipTemplate

TipTemplate is template used to prompt the message, which you can use @{tip} to bind message.

Special Binding

je-id

Using je-id="<field name>" to bind specific id, you can use it in a row template or FilterTemplate, NewItemTemplate.

In the EditItemTemplate, input assigned the je-id will contain the new value of the field.

In FilterTemplate, input assigned the je-id contain the value of the field used for searching, these fields should be included in the FilterField property.

In NewItemTemplate, input assigned the je-id contain the new value of fields.

je-<javascript event name>

Using je-<javascript event name>="<action name>" for the event to bind special action. It can be used in all templates, common behaviors are: beginedit started editing, endedit cancel the edit, update to save your updates, remove deleted, toggleselect switch selected, insert new, filter search, togglesort toggle the sorting status. The top 5 can only be used in the row template, insert can be used in NewItemTemplate, filter can be used in FilterTemplate, togglesort available in the HeaderTemplate, example:

<ItemTemplate>
 <tr>
  <td>
   #{id}
  </td>
  <td>
   #{realname}
  </td>
  <td>
   #{age}
  </td>
  <td>
   <span je-onclick="beginedit">Edit</span>
   <span je-onclick="remove">Remove</span>
  </td>
 </tr>
</ItemTemplate>

<EditItemTemplate>
 <tr>
  <td>
   #{id}
  </td>
  <td>
   <input type="text" je-id="realname"
    value="#{realname}"
    class="textbox" />
  </td>
  <td>
   <input type="text" je-id="age"
    value="#{age}"
    class="textbox" />
  </td>
  <td>
   <span je-onclick="endedit">Cancel</span>
   <span je-onclick="update">Save</span>
  </td>
 </tr>
</EditItemTemplate>

I should note is that togglesort also need to specify a parameter, the sort field, this field is set in the SortField, for example: je-onclick="togglesort,'realname'".

If you are binding multiple behaviors, you can use semicolon, such as je-onclick="setgroup,'realname';fill".

je-class

Using je-class="<style>", you can bound special styles for the element. je-class can be used in all templates, commonly used styles: {header} ui-widget-header, {active} ui-state-active, {highlight} ui-state-highlight, {disabled} ui-state-disabled, {error} ui-state-error, {default} for ui-state-default, {state} for row status, {sort} sorting status, example:

<HeaderTemplate>
 <thead je-class="{header}">
  <tr>
   <td je-onclick="togglesort,'id'">
<span
je-class="{sort,id,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}">
</span>
    ID
   </td>

  </tr>
 </thead>
</HeaderTemplate>

<ItemTemplate>
 <tr je-class="{state}-item">

 </tr>
</ItemTemplate>

Here to note syntax of {state} and {sort}, namely {state[,<unchanged class>[,<inserted class>[,<updated class>[,<removed class>]]]]}, {sort,<sort field name>[,<no sort class>[,<asc class>[,<desc class>]]]}. For the purposes of {State}, if you do not specify the state class , the row status will be used instead of the class name, for example: {state,,new-item}, because there is no specified class for unchanged class, so if the state of the row is unchanged, it is returned unchanged. {sort}, if you do not specify a certain sort class, it'll take the sort status instead of the class name.

je-checked/selected/readonly

In the ItemTemplate using je-checked="selected" meet the je-onclick="toggleselect" to indicate whether the row is in selected status, je-selected can be used to select elements in the EditItemTemplate, example:

<ItemTemplate>
 <tr>
  <td>
   <input type="checkbox"
    je-checked="selected"
    je-onclick="toggleselect"
    /> #{id}
  </td>
 </tr>
</ItemTemplate>

Available in the FilterTemplate je-selected="<a boolean expression or bound a field>" to initialize the selected option, example:

 <FilterTemplate>
 <tr>
  <td>
   <select je-id="type">
    <option je-selected="#{type,#=='normal'}">Normal</option>
    <option je-selected="#{type,#=='high'}">High</option>
    <option je-selected="#{type,#=='low'}">Low</option>
   </select>
  </td>
 </tr>
</FilterTemplate>

je-value

Use je-value="<search field name>" to bind initialize search condition in FilterTemplate.

je-<jQueryUI widget name>

In any of the templates, can use the je-<jQueryUI widget name>="<property name n>=<property value n>;", to generate a jQueryUI widget, but currently only support je-button, je-datepicker, je-autocomplete, je-progressbar, je-slider, example:

<EditItemTemplate>
 <tr je-class="{state}-item">
  <td>
<input type="checkbox"
 je-checked="selected"
 je-onclick="toggleselect" /> #{id}
  </td>
  <td>
<input type="text" je-id="realname" value="#{realname}" />
  </td>
  <td>
<input type="text" je-id="age" value="#{age}" />
  </td>
  <td>
<input type="text" je-id="birthday"
 je-datepicker="dateFormat='yy-mm-dd';"
 value="#{birthday}" />
  </td>
  <td>
<span
 je-button="label='Edit';icons={ primary: 'ui-icon-pencil' };"
 je-onclick="beginedit">
</span>
<span
 je-button="label='Delete';icons={ primary: 'ui-icon-trash' };"
 je-onclick="remove">
</span>
  </td>
 </tr>
</EditItemTemplate>

Properties are same with jQueryUI widget, you can refer to jqueryui.com.

je-template

Use je-template="<template name>" to the template element, in addition to various Template mentioned above, or you can use this method to set up a template, example:

<table id="list">
 <thead je-template="my-header">
 </thead>
</table>

<je:Repeater ID="studentRepeater" runat="server"
 Selector="'#list'" Header="[je-template=my-header]">

</je:Repeater>

Child Views

In Repeater, you can use shiftview, collapseview, expandview three methods to switch off, open the child views, such as:

<je:Repeater ID="<child view ID>" runat="server"
 FilterField="<child view search field>">

</je:Repeater>

<je:Repeater ID="googleRepeater" runat="server">
  <ItemTemplate>
   <div
    je-onclick="shiftview,'<child view ID>'[,<search field value n>]">
   shift child view
   </div>
   <div je-id="<child view ID>">
   </div>
  </ItemTemplate>
</je:Repeater>

<je:Repeater ID="pictureRepeater" runat="server"
 FilterField="['url']">
 <ItemTemplate>
  <div>
   <span class="url">#{url}</span>
   <br />
   <br />
   #{picture}
  </div>
 </ItemTemplate>
</je:Repeater>

<div id="list">
 <je:Repeater ID="googleRepeater" runat="server" Selector="'#list'">
  <ItemTemplate>
   <div
    je-button="label='More';"
    je-onclick="shiftview,'pictureRepeater','#{url}'">
   </div>
   <div je-id="pictureRepeater" style="display: none;">
   </div>
  </ItemTemplate>
 </je:Repeater>
</div>

More ways to use and description refer to Using jQuery Repeater To Expand Page Preview Like Google.

Grouping Data

Use the GroupField property of Repeater or setgroup method to set the grouping field, set the grouping by GroupTemplate template, then call the fill method to get data:

<je:Repeater ID="mailRepeater" runat="server"
 GroupField="<group field>"
 FillAsync-Url="webservice.asmx"
 FillAsync-MethodName="FillMailList">
 <HeaderTemplate>

  <td
   je-onclick="setgroup,'<group field>';togglesort,'<sort field>'">
   Sender
  </td>

 </HeaderTemplate>
 <GroupTemplate>

  <td>
   @{groupfield}: @{groupname}
  </td>
 
 </GroupTemplate>
 <ItemTemplate>

  <td class="sender">
   #{sender} #{displaydate}
  </td>

 </ItemTemplate>
</je:Repeater>

More ways to use and description refer to Using jQuery Repeater To Group EMail Messages.

Handling Control

In addition to what is said above to bound jQueryUI widget, for some html elements, there are also many treatments:

<select je-id="major">
 <option value="jsj" je-selected="'#{major}' == 'jsj'">
  Computer
 </option>
 <option value="gsgl" je-selected="'#{major}' == 'gsgl'">
  Business
 </option>
 <option value="hy" je-selected="'#{major}' == 'hy'">
  Chinese
 </option>
</select>

<input je-id="major"
 je-autocomplete="source=['jsj','gsgl','hy']"
 value="#{major}" />

<input je-id="birthday"
 je-datepicker="dateFormat='yy-mm-dd'"
 type="text"
 value="#{birthday,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}" />

More ways to use and description refer to Add And Set Datepicker, Drop Down Check Box And So On Into jQuery Repeater.

Message

If needed to display current action or result of repeater, you can use set property FieldMask or call method showtip, for details please refer to Show Message In jQuery Repeater When Validate Or Update, no longer description here.

Retrieving Data

In most cases, we will search something, you can achieve this through the properties such as FilterTemplate and FilterField, for details please refer to Retrieve Data In jQuery Repeater.

Sorting

You can sort the fields using the togglesort method, coupled with the je-class display different styles in different sorting status, for details please refer to Sort On Multiple Fields In jQuery Repeater.

Event

pe and e are two parameters of all the events, pe.option contains the option of repeater, pe.jQuery that represents the current repeater, e contains the event data.

PreUpdate, Updated before and after the update event, PreRemove, Removed before and after the remove event, PreInsert, Inserted before and after the insert event. e.row is current row to be operated, e.index said the index of the row, and e.issuccess in Updated, Removed, Inserted , said whether executed successfully, example:

<je:Repeater ID="studentRepeater" runat="server"

 PreUpdate="
 function(pe, e){
  if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
   $('#message').text('Please fill out the information complete');
   return false;
  }
 }
 " PreInsert="
 function(pe, e){
  if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
   $('#message').text('Please fill out the information complete');
   return false;
  }
 }
 " PreRemove="
 function(pe, e){
  if(!confirm('Delete? ' + e.row.realname)){
   return false;
  }
 }
 " Updated="
 function(pe, e){
  $('#message').text('Update ' +
   e.row.realname + (e.issuccess ? ' success' : ' failed'));
 }
 " Inserted="
 function(pe, e){
  $('#message').text('Insert ' +
   e.row.realname + (e.issuccess ? ' success' : ' failed'));
 }
 " Removed="
 function(pe, e){
  $('#message').text('Remove ' +
   e.row.realname + (e.issuccess ? ' success' : ' failed'));
 }
 ">

</je:Repeater>

PreFill, Filled before and after the fill event, PreExecute, Executed before and after any event, PreCustom, Customed before and after the custom event, the parameter e contains the command property indicates the custom action name, PreSubStep, SubStepped before and after the distribution events, the parameter e contains count property represents the total number of tasks, completed property indicates the number of tasks that have been completed.

Navigable when navigation usability changes, parameter e contains the prev property indicates whether has the previous page, next property indicates whether has the next page. Blocked when a operation is blocked.

Client Methods

Use <repeater variable>.__repeater('<method name>'[, <parameter n>]) to call the methods of repeater:

Method	Description	Example
beginedit/begineditselected	Start editing/selected rows of the specified index.	<repeater variable>.__repeater('beginedit', 0) <repeater variable>.__repeater('begineditselected')
bind	Bound, just use current data.	<repeater variable>.__repeater('bind')
custom/customselected	Execute custom operation for a row or selected row.	<repeater variable>.__repeater('custom', 0) <repeater variable>.__repeater('customselected')
endedit	Finish editing the row of specified index, do not save the edited content.	<repeater variable>.__repeater('endedit', 0)
fill	Get data and bind data to *repeater*.	<repeater variable>.__repeater('fill')
filter	Similar to fill, but page numbers will be changed to 1.	<repeater variable>.__repeater('filter')
first/last	Go to first/last page.	<repeater variable>.__repeater('first')
getrow	Gets the row of specified index.	<repeater variable>.__repeater('getrow', 0)
goto/next/prev	Jump to a specific page/next page/previous page.	<repeater variable>.__repeater('goto', 2) <repeater variable>.__repeater('next')
hidetip/showtip	Hide/Show tips.	<repeater variable>.__repeater('hidetip') <repeater variable>.__repeater('showtip', 'input name')
insert	Insert a new row.	<repeater variable>.__repeater('insert')
remove/removeselected	Deletes the specified/all rows.	<repeater variable>.__repeater('remove', 0) <repeater variable>.__repeater('removeselected')
select/unselect/toggleselect	Select/Unselect/Shift selected state of a row.	<repeater variable>.__repeater('select', 0)
selectall/unselectall/toggleselectall	Select/Unselect/Shift selected state of all rows.	<repeater variable>.__repeater('selectall')
setfilter	Set up your filtering condition.	<repeater variable>.__repeater('setfilter', age, 12)
setgroup	Set the grouping field.	<repeater variable>.__repeater('setgroup', 'name')
setrow	Sets the data of row by specified index, and specify whether to rebind.	<repeater variable>.__repeater('setrow', 0, {age: 10}, true)
sort/togglesort	Set sorting status.	<repeater variable>.__repeater('sort', 'id', 'desc') <repeater variable>.__repeater('togglesort', 'id')
update	Modify a row.	<repeater variable>.__repeater('update', 0)

Related Content

Binding And Handling JSON Field In jQuery Repeater
Using jQuery Repeater To Group EMail Messages
Add And Set Datepicker, Drop Down Check Box And So On Into jQuery Repeater
Show Message In jQuery Repeater When Validate Or Update
Retrieve Data In jQuery Repeater
Sort On Multiple Fields In jQuery Repeater
Using jQuery Repeater To Expand Page Preview Like Google

Revision History

2011-11-17: Increase Related Content section, and links to validation function of Repeater.
2011-11-19: Increase link to Message function of Repeater.
2011-11-22: Increase link to retrieve function of Repeater.
2011-11-25: Increase link to sorting function of Repeater.
2011-11-26: Modifying presentation on referencing jQueryUI.

comment