Ajax Grid Solution

Setup - Parent Container Object

You may use any html element as a parent container object to render a list. Start out by using a table or a div.
<table class="table table-bordered" data-resultset="list" data-loaded="false"> </table>
  1. The attribute data-resultset is what identifies the container as a listing agent. Value can be list or grid.
  2. The attribute data-loaded is what keeps a state of whether data was loaded. Value can be true or false.

Configurations

The following attributes must be added to the parent container object.
<table class="table table-bordered" data-resultset="list" data-loaded="false" data-currentpage="1" data-pagesize="10" data-service-url-list-get="ajax.grid.xml" data-independentfield-pagesize="25" data-independentfield-startrowindex="1" data-independentfield-sortexpression="" data-independentfield-sortdirection="" data-method-render="Redirect_RenderGenericTable" data-event-reload-button="data-button-filter" data-result-info="data-result-info" data-requesttype="GET" data-responsetype="xml"> </table>
  1. The attribute data-currentpage specifies the current page of data being displayed. This is handled by your datasource coming from a restful api. Value can be any integer value.
  2. The attribute data-pagesize specifies how many items will be displayed on a page. This is handled by your datasource coming from a restful api. Value can be any integer value.
  3. The attribute data-service-url-list-get specifies the url that will return the result set. This could be a server page, for example asmx, svc, asp, aspx, etc. Value can be list or grid.
  4. The attribute data-independentfield-pagesize specifies a static value to pull page size from. Value can be any integer value.
  5. The attribute data-independentfield-startrowindex specifies a static value to pull startrowindex from. Value can be any integer value.
  6. The attribute data-independentfield-sortexpression specifies a static value to pull sortexpression from. This is currently in development.
  7. The attribute data-independentfield-sortdirection specifies a static value to pull sortdirection from. This is currently in development.
  8. The attribute data-method-render specifies your own javascript function that will handle how to render the data, this overrides the default render method.
  9. The attribute data-event-reload-button specifies this specifies a html element that when clicked will reload the data of the list. Value can be html element id string value.
  10. The attribute data-result-info specifies the element that will contain the total count. Value can be html element id string value.
  11. The attribute data-requesttype specifies the type of request to the restful api. Value can be GET or POST.
  12. The attribute data-responsetype specifies . Value can be xml or json.
  13. The attribute data-qsfield-[any name you give it] specifies a query string value to send as a parameter to the datasource restful api. Value can be any contiguous string with no special characters.
Back To Top

Elements

You may use any html element as a parent container object to render a list. Start out by using a table or a div.
<table class="table table-bordered" data-resultset="list" data-loaded="false"> </table>
  1. Just remember, your parent container holds the repeating list of items. Whether a table, div, ol, ul, or select.
Back To Top

Customizations

You may use any html element as a parent container object to render a list. Start out by using a table or a div.
<div class="container text-center" data-resultset="list" data-loaded="false"><div class="row"> <div data-itemtemplate="1" class="col-md-3 d-none mb-5"> <div class="panel panel-info text-center"> <div class="panel-heading" style="font-weight: bold;"> <img src='[Logo]' width="175" alt='[Name]' /> <br /> </div> <div class="panel-body"> <a data-ignore="1" class="btn btn-light" href="https://www.abstrasoft.com/" target="_blank" data-isactive="[ISACTIVE]">Visit Now</a> </div> </div> </div> </div> </div>
  1. Item Template data-itemtemplate is what the listing container will repeat after looping through the datasource. For tables use a "tr" element. Value can be anything. This is where most of the customization occurs for look of items. Place datasource fields you desire to show inside square brackets like this: [some field name].
Back To Top

Data Source

You may use any html element as a parent container object to render a list. Start out by using a table or a div.
[ { "TOTALROWS": 18, "ROWNUM": 1, "AUNIQUEID": 501, "Name": "Random Name - ", "Description": "Random Description - ", "Logo": "https://www.abstrasoft.com/images/main.logo.jpg" }, { "TOTALROWS": 18, "ROWNUM": 2, "AUNIQUEID": 502, "Name": "Random Name - ", "Description": "Random Description - ", "Logo": "https://www.abstrasoft.com/images/main.logo.jpg" }, { "TOTALROWS": 18, "ROWNUM": 3, "AUNIQUEID": 501, "Name": "Random Name - ", "Description": "Random Description - ", "Logo": "https://www.abstrasoft.com/images/main.logo.jpg" } ]
  1. Data Source Response Type data-responsetype is the data source for the listing object. Value can be XML or JSON.
  2. Example of xml source can be viewed here.
  3. Example of json source can be viewed here.
Back To Top

Examples

You may use any html element as a parent container object to render a list. Start out by using a table or a div.
  1. Example of Ajax Datagrid as a table in Html can be viewed here.
  2. Example of Ajax Datagrid as a grid in Html can be viewed here.
  3. Example of Ajax Datagrid as a grid Aspx can be viewed here.
Back To Top