Using GridTemplateColumn in Radgrid on clientside binding with pagination

[Siri]

Hi,

Currently, I have a rad grid which populates search results using client side binding (Select Method). However, I need to update this rad grid now to add new column to it which allows users to select values from a drop down and then save the selected value. I have been trying to use the same client side binding on this grid with the new GridTemplateColumn with a RadComboBox in it, but the issue is that it disappears on pagination and I cannot use NeedDataSource to render the server side RadCombobox as this is a search page and I do not want it to post back for the search results to display each time.

 

Can anyone please help me on how to achieve using a GridTemplateColumn with client side binding?

 

Thanks!

[Eyup]

Hi Siri,

In this scenario, you can have client-side elements in the grid item templates. Let me clarify this behavior, which is related to the specifics of RadGrid bound with client-side source:

The generated items on the server-side by the RadGrid are determined by its PageSize property(+1), which is 10 by default. If you test it using ItemCreated or ItemDataBound event handler, you will notice that these events are raised depending on this property, even if you have 50 items bound using a client-side source. 

Also, any controls which should be generated on server-side will be loaded only for these items. For example, if you have the following configuration, only the first 11 items will have control:

<telerik:GridTemplateColumn ... >
    <ItemTemplate>
        <telerik:RadDropDownList ID="RadDropDownList1" runat="server">
        </telerik:RadDropDownList>
    </ItemTemplate>

Having this in mind, the RadGrid dev team introduced a new option to define a template when the grid is bound on client-side - the ClientItemTemplate:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-item-template/defaultcs.aspx

Of course, this means that this template option can hold only client-side objects:

<telerik:GridTemplateColumn ... >
    <ClientItemTemplate>
        <span>Success</span>
    </ClientItemTemplate>

If you need to have a server-side control every item, the only option to achieve this requirement is to set the PageSize of the grid before the items are generated on server-side. The reason for this is that in contrast to the server-side binding when the grid knows the exact count of your database records beforehand, it does not know this info from any client-side source. So, in order to generate more server-side items and their corresponding inner template controls for a different amount than 11, you will need to manually set its PageSize on server-side.

Also, please note that using RadComboBox is not supported with Batch editing. We suggest that you use RadDropDownList instead:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

For client-side bound grid, you can check the following live demos:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx
https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/insert-update-delete-client/defaultcs.aspx

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Siri]

Thanks Eyup for your response to my query. However, I can see in the below mentioned live demo RadDropdownList is rendered when navigated to the next page too though it is a server side control, which is precisely what I am looking for. Can you please let me know how, not sure if I am missing anything here?

http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

Also, I have set the page size currently to 10 and if I need to achieve RadDropDownList rendering for all the items in all the pages, as you mentioned, how do I manually set its PageSize on server-side? 

Can you please provide me with a sample code? Very much appreciate your response.

 

Thanks!

 

 

[Eyup]

Hello Siri, 

The grid in the mentioned demo link is bound on server-side.

For client-side binding with server-side templates, you can manually set greated PageSize:

<telerik:RadGrid ... PageSize="1000">

Or initiate an request to the server to refresh the grid content. I am sending 2 web site samples to demonstrate similar implementations.

Regards,
Eyup
Progress Telerik

[Siri]

Thanks a lot Eyup for the samples you provided. Really appreciate it!

However, after your earlier reply I modified the GridTemplate I was using to add a ClientTemplate and EditTemplate with RadDropDownList just like in the demo. And now the drop down shows up on page size changed and page index changed as expected on the row click though I am using client side binding as I believe it is based on the row on click. 

But now I am working on invoking batch edit command from javascript from an external button without using an ajax request. Can you please let me know how to achieve this?

 

[Eyup]

Hello,

I'm glad the provided directions have proven helpful.
For the saving command requirement, you can use the dedicated API of the Batch editing to achieve this, as demonstrated in the following post:
https://www.telerik.com/forums/how-to-fire-the-updateedited-method-from-an-outside-button#5Af7aU0fFEa0UKS5HOhyjA

You can also check this resource:
https://www.telerik.com/support/kb/aspnet-ajax/grid/details/how-to-update-batch-edit-grids-from-outside-button-and-also-save-external-user-input

Regards,
Eyup
Progress Telerik

[Siri]

Hi Eyup,

Thanks for the provided suggestions. 

Meanwhile, I tried an alternate approach of creating an explicit save method on click of the ribbon button and getting the modified values from the BatchEditCellValueChanged  into a local variable at client side method and calling a PageMethod to save the edited values to the database. And it works.

[Eyup]

Hi Siri,

I'm glad the provided directions have been helpful.
For further info about Batch editing, you can check these resources:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-batch-edit-mode
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/client-side-api
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/working-with-templates

Regards,
Eyup
Progress Telerik