Converting to Telerik Grid from ComponentArt Grid

[Rajah]

We're using the free trial to perform a trial run of converting to Telerik since ComponentArt has abandoned their UI Framework product. The most used control in our system is the grid control.  With the ComponentArt grid we bind it to a DataView and everything is passed once to the client where it's formatted, paginated, searchable, etc.  There is no AJAXing of data or postbacks - the data can be navigated and interacted with on the client side quickly and easily.

The closest I can get with a Telerik grid is pagination and formatting but all interaction with the grid causes a postback and reloading of the data.  Is AJAX simply a requirement of using the Telerik grid or is there a way to get similar functionality where all the data is sent once and then everything happens on the client?  I'd rather not create a bunch of web services since we have close to a 100 unique grids in the app that all work this way.

Sample ComponentArt grid code:

01.<ComponentArt:Grid ID="gdCards" runat="server" EnableViewState="false" PageSize="17" RunningMode="Client">
02.    <Levels>
03.    <ComponentArt:GridLevel
04.        DataKeyField="card_id">
05.        <Columns>
06.            <ComponentArt:GridColumn DataField="card_id" HeadingText="Card ID" Width="60" FixedWidth="true" DefaultSortDirection="Ascending" />
07.                <ComponentArt:GridColumn DataField="card_tp_desc" HeadingText="Card Type" />
08.                <ComponentArt:GridColumn DataField="trk_act_dt" HeadingText="Activate Date" Width="85" FixedWidth="true" FormatString="d" />
09.                <ComponentArt:GridColumn DataField="fname" HeadingText="First Name" />
10.                <ComponentArt:GridColumn DataField="lname" HeadingText="Last name" />
11.                <ComponentArt:GridColumn DataField="amt_left" HeadingText="Amount Left" FixedWidth="true" Width="75" />
12.                <ComponentArt:GridColumn DataField="needs_printed" HeadingText="Print?" FixedWidth="true" Width="50" ColumnType="CheckBox" />
13.                <ComponentArt:GridColumn DataField="card_num" HeadingText="Card #" FixedWidth="true" Width="100" />
14.            </Columns>
15.        </ComponentArt:GridLevel>
16.    </Levels>
17.</ComponentArt:Grid>

ComponentArt grid data binding:

1.gdCards.DataSource = tblCards.DefaultView;
2.gdCards.DataBind();

Telerik grid trial implementation:

01.<telerik:RadGrid ID="rgCards" runat="server" PageSize="17" AllowPaging="true">
02.    <MasterTableView AutoGenerateColumns="false" DataKeyNames="card_id">
03.        <Columns>
04.            <telerik:GridBoundColumn DataField="card_id" HeaderText="Card ID" HeaderStyle-Width="60"></telerik:GridBoundColumn>
05.            <telerik:GridBoundColumn DataField="card_tp_desc" HeaderText="Card Type"></telerik:GridBoundColumn>
06.            <telerik:GridBoundColumn DataField="trk_act_dt" HeaderText="Activate Date" HeaderStyle-Width="85" DataFormatString="{0:d}"></telerik:GridBoundColumn>
07.            <telerik:GridBoundColumn DataField="fname" HeaderText="First Name"></telerik:GridBoundColumn>
08.            <telerik:GridBoundColumn DataField="lname" HeaderText="Last name"></telerik:GridBoundColumn>
09.            <telerik:GridBoundColumn DataField="amt_left" HeaderText="Amount Left" HeaderStyle-Width="75" DataFormatString="{0:c}"></telerik:GridBoundColumn>
10.            <telerik:GridCheckBoxColumn DataField="needs_printed" HeaderText="Print?" HeaderStyle-Width="50"></telerik:GridCheckBoxColumn>
11.            <telerik:GridBoundColumn DataField="card_num" HeaderText="Card #" HeaderStyle-Width="100"></telerik:GridBoundColumn>
12.        </Columns>
13.    </MasterTableView>
14.</telerik:RadGrid>

Telerik grid data binding:

1.rgCards.DataSource = tblCards.DefaultView;
2.rgCards.DataBind();

Thanks in advance for your help.  Also, sorry if this information is somewhere else in the forums - I did several searches but nothing seemed relevant.

[Konstantin Dikov]

Hello Rajah,

The only way for having complex operations like paging, sorting, filtering, etc., entirely on client-side is with a client-side binding through the RadClientDataSource control or to a service. Online demos for such implementations is available in the following links:

• Grid - Binding to Telerik ClientDataSource 
• Grid - Declarative Binding

When RadGrid uses server-side binding, each complex operation will cause a postback and due to the way that the control is designed and implemented, this could not be changed.

Nevertheless, I think that the client-side binding solution is the one that will meet all your requirements. 


Regards,
Konstantin Dikov
Telerik

 

 

[Rajah]

Thank you, I will attempt to implement that.

[Rajah]

I've taken a first stab at using the RadClientDataSource and I'm confused on how this solves the complexity issue.  It appears the RadClientDataSource is nothing more than a data broker that still relies on AJAX web services so instead of controlling that directly from the grid it's offloaded onto this object.  This seems like even more work than implementing the AJAX components of the grid as we still have to create the web services *plus* add a 2nd object to the client markup.

Is there truly no baked in way to send the data down to the client grid once and have it just be a good looking, easy to use grid?  I don't need editing, adding, deleting - just navigating, sorting, and searching.  ComponentArt's grid control was cake to deploy and doesn't force AJAX down our throats for simple situations.  While Telerik objects look far more sophisticated it appears to force maximum complexity even in situations where you want just basic functionality.  Please tell me I'm missing something? :)

Thanks for your help.

[Konstantin Dikov]

Hi Rajah,

As I have explained, if you want to take advantage of the paging, sorting, filtering, etc., operations  you will have to use one of the two suggested approach (binding through RadClientDataSource or directly to a Web Service). 

You could however add a JSON object as a data source of the client object of RadGrid (as demonstrated in our help article for Client-side Binding Specifics), but it will not support any of the listed above functionalities.


Regards,
Konstantin Dikov
Telerik