Triggering RadGrid's EnableNextPrevFrozenColumns from External Buttons
Environment
Product | RadGrid for ASP.NET AJAX |
---|---|
Version | All |
Description
I need to control the EnableNextPrevFrozenColumns feature of the RadGrid from external buttons, without using a template inside the RadGrid. I want to trigger this feature using an OnClientClick event from these external buttons.
This KB article also answers the following questions:
- How can I use external buttons to navigate frozen columns in RadGrid?
- Is it possible to trigger RadGrid's next and previous frozen columns from buttons outside the grid?
- Can external buttons control the EnableNextPrevFrozenColumns feature in RadGrid?
Solution
To control the EnableNextPrevFrozenColumns feature of RadGrid from external buttons, follow these steps:
-
Add two external buttons outside the RadGrid. Set their
AutoPostBack
property tofalse
and subscribe them to theOnClientClicked
event.ASP.NET<telerik:RadButton runat="server" ID="RadButton2" Text="Previous" AutoPostBack="false" OnClientClicked="onClientClick" /> <telerik:RadButton runat="server" ID="RadButton1" Text="Next" AutoPostBack="false" OnClientClicked="onClientClick" />
-
Implement the
onClientClick
JavaScript function. This function will programmatically click the corresponding next or previous button within the RadGrid based on the text of the sender button.JavaScriptfunction onClientClick(sender, args) { var button = undefined; // Declare the button var text = sender.get_text(); // Get the text of the sender button if (text === "Next") { button = document.querySelector(".rgNext"); // Select the next button by its class name } else if (text === "Previous") { button = document.querySelector(".rgPrev"); // Select the previous button by its class name } if (button) { button.click(); // Programmatically click the selected button } }
-
Ensure the RadGrid is properly configured to use the EnableNextPrevFrozenColumns feature.
This approach allows you to control the navigation of frozen columns in RadGrid using external buttons, facilitating a more flexible UI design.