New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Disable Postback on DropDownTree inside Grid when EnablePostBackOnRowClick is true


Product RadGrid for ASP.NET AJAX


DropDownTree in Grid

Sometimes, one might have a DropDownTree inside a Grid, which has the EnablePostBackOnRowClick property set to true, but experience a weird behavior, that causes the DropDownTree to close immediately after clciking on it.


To fix this, you can employ a function to the OnClientDropDownOpening event of the DropDownList, that gets the instance of the Grid and disables the postback when the DropDownList is being opened:

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false">
                    <telerik:RadDropDownList OnClientDropDownOpening="stopPostback" ID="RadDropDownList1" runat="server" AutoPostBack="True">
                            <telerik:DropDownListItem Text="Item 1" />
                            <telerik:DropDownListItem Text="Item 2" />
    <ClientSettings EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="True"></Selecting>
function stopPostback(sender, args) {
    var grid = $find("<%= RadGrid1.ClientID %>");
    grid.ClientSettings.EnablePostBackOnRowClick = false;

Alternatevely, you could also use an approach that overrides the built-in method and prevents calling the RowClick if the click was initiated on the DropDownList, like this:

(function () {
    try {
        var $T = Telerik.Web.UI;
        var _gridSelection_click = $T.GridSelection.prototype._click;
        var $ = $ || jQuery || $telerik.$;

        $T.GridSelection.prototype._click = function (e) {
            // if the clicked element belongs to the DropDownList
            if ($('.RadDropDownList').length > 0) {
                // exit the function
            // call the original function
  , e);
    } catch (e) {
        // Try catch just to handle the error when the Grid is not loaded on the page.
In this article