Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Tamilmani Mohan
665
How to add the Custom Format code in Ig Grid with Pagination Feature
posted

Hi All,

Currently my database records are showing in ig grid with pagination.

But i want to add custom table format with pagination.  Could you please any one guide me, how to add the custom format code in ig grid with pagination or else is there any way to add the pagination by separately?

Custom Format Looks like:

<table width="97%" cellspacing="5" cellpadding="3" border="0" align="center" class="alternate_result" id="presults">
<tbody><tr>
<td nowrap="nowrap" width="20%" align="left">
<font color="black"><font size="2">
<b> Peter Cowley</b>
</font>
</font></td>
<td width="80%" align="right" colspan="2">
<a>Modify Details</a>


</td>
</tr>
<tr>

<td width="20%" align="left">
<font color="black"><font size="2">Project Name</font>
</font>
</td>
<td width="60%" align="left">
<font color="black"><font size="2">Infragistics Paging</font>
</font></td>
<td width="20%">
</td>
</tr>
<tr>

<td width="20%" align="left">
<font color="black"><font size="2">Project Type</font>
</font>
</td>
<td width="60%" align="left">
<font color="black"><font size="2">Web</font>
</font></td>
<td width="20%">
</td>
</tr>
<tr>

<td width="20%" align="left">
<font color="black"><font size="2">Project Manager</font>
</font>
</td>
<td width="60%" align="left">
<font color="black"><font size="2">Mark Henry</font>
</font></td>
<td width="20%">
</td>
</tr>
<tr>

<td width="20%" align="left">
<font color="black"><font size="2">Created Date</font>
</font>
</td>
<td width="60%" align="left">
<font color="black"><font size="2">2014-Mar-14</font>
</font>
</td>
<td width="20%">
</td>
</tr>
<tr>

<td width="20%" align="left">
<font size="2">
Status
</font>
</td>
<td width="60%" align="left">
<font color="green"><font size="2">
ACTIVE</font>
</font></td>
<td width="20%">
</td>
</tr>
</tbody></table>

Thanks

Tamilmani Mohan 

Parents
No Data
Reply
  • 23953
    Offline posted

    Hello Tamilmani Mohan,

    Sorry for the late response.

    You have 2 options:

    1. igGrid allows you to format individual cells. This can be done by using column template or the column format function. However in this case you cannot change the general DOM structure of the igGrid

    2. You can use igDataSource and igTemplating engine to build your own table with paging. In order to demonstrate this approach I'm attaching a sample to this forum post.

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc. 

    igDataSource_custom_paging.zip
Children