Split Button in Grid EditItemTemplate

3 posts, 0 answers
  1. Stephen
    Stephen avatar
    8 posts
    Member since:
    Feb 2011

    Posted 18 Jan 2012 Link to this post

    I am trying to get a Split Button with a context menu working inside the EditItemTemplate of a Grid. I want it to show the context menu and not postback on the "dropdown arrow" split button click, and postback on the main button click. I can get this working when its outside of the grid, but once I put it in EditItemTemplate of the Grid, it always does a postback, even when I click the split-button arrow (but the context menu still shows, so I know it hits the proper javascript) and the Click event's IsSplitButtonClick is always false. The button I am referring to is _btnFile in the following code.

    <telerik:RadGrid ID="_rgRevisions" runat="server" Skin="Office2007" Width="410px" AllowFilteringByColumn="false" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="center" FilterItemStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="center" AlternatingItemStyle-HorizontalAlign="center" OnPreRender="_rgRevisions_PreRender" OnNeedDataSource="_rgRevisions_NeedDataSource" OnItemCommand="_rgRevisions_ItemCommand" OnItemDataBound="_rgRevisions_ItemDataBound" OnItemCreated="_rgRevisions_ItemCreated" OnUpdateCommand="_rgRevisions_UpdateCommand">
                    <ClientSettings>
                        <Scrolling AllowScroll="True" ScrollHeight="200px" UseStaticHeaders="true" />
                    </ClientSettings>
                    <MasterTableView EditMode="InPlace" AutoGenerateColumns="false" DataKeyNames="Id">
                        <Columns>
                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton"
                                HeaderStyle-Width="30px" UpdateImageUrl="../../Icons/accept.png" EditImageUrl="../../Icons/EditViewDetails.png" CancelImageUrl="../../Icons/cancel.png" />
                            <telerik:GridBoundColumn DataField="linkedDocument" UniqueName="linkedDocument" HeaderText="Document" HeaderStyle-Width="70px" />
                            <telerik:GridTemplateColumn DataField="FileID" UniqueName="modifiedDoc" HeaderText="Modified Doc"
                                HeaderStyle-Width="90px" AllowFiltering="false" >
                                <ItemTemplate>
                                    <asp:ImageButton ID="_btnModDocument" runat="server" ImageUrl="~/Theme/Img/A2bIcons/PDF.png" Visible='<%# Eval("FileID") != null && ((int)Eval("FileID")) != 0 ? true : false %>' CommandArgument='<%# Eval("FileID") %>' CommandName="DownloadModDocument" />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadButton ID="_btnFile" runat="server" EnableEmbeddedSkins="true"
                                        Skin="Office2007" Text='<%# Eval("fileName") %>'
                                                         CssClass="noWrapEllBtn" ButtonType="LinkButton"
                                                         EnableSplitButton="true" Width="140px"
                                                         Visible='<%# Eval("FileID") != null && ((int)Eval("FileID")) != 0 ? true : false %>'
                                                         CommandArgument='<%# Eval("FileID") %>' OnClick="_btnFile_Click"
                                                         OnClientClicked="OnUpdateModFileClicked">
                                        <Icon PrimaryIconUrl="~/Icons/PDF.png" />
                                    </telerik:RadButton>
                                    <telerik:RadContextMenu ID="_cmFile" runat="server" OnItemClick="_cmFile_ItemClick"
                                        EnableShadows="true">
                                        <Items>
                                            <telerik:RadMenuItem Text="Remove" Value="Remove" ImageUrl="../../Icons/Delete.gif" />
                                        </Items>
                                    </telerik:RadContextMenu>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

    function OnUpdateModFileClicked(sender, args) {
                   if (args.IsSplitButtonClick()) {
                       var currentLocation = $telerik.getLocation(sender.get_element());
                       var menuID = $(sender.get_element()).siblings("div")[0].id;
                       var contextMenu = $telerik.findMenu(menuID);
                       contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
                       sender.set_autoPostBack(false);
                   }
                   else {
                       sender.set_autoPostBack(true);
                   }
               }

    protected void _btnFile_Click(object sender, EventArgs e)
            {
                if (sender == null) throw new ArgumentNullException("sender");
                if (e == null) throw new ArgumentNullException("e");
                if (((ButtonClickEventArgs)e).IsSplitButtonClick) return;
     
                int fileId;
                int.TryParse(((RadButton)sender).CommandArgument, out fileId);
                if (fileId > 0)
                
                   // Download File
                }
            }
  2. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 20 Jan 2012 Link to this post

    Hi Stephen,

    I have tested your scenario and its working fine at my end. And also it is not postback on the "dropdown arrow" split button click. May be you have some Ajax related issue at your end. Else all code works fine.

    Thanks,

    Kaushal Jani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephen
    Stephen avatar
    8 posts
    Member since:
    Feb 2011

    Posted 23 Jan 2012 Link to this post

    That's interesting considering that I'm doing that same scenario on the same page except it's not within any ItemItemplate (or EditItemTemplate in this case), with the nearly the exact same code and it works as it should (the only real difference is the markup for the split button is within the grid). I'm curious, what is the event that happens when you click the split button (in terms of it not being a postback, as I incorrectly stated)? I am ajaxing these controls:

    <telerik:RadAjaxManager ID="_raManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="_rgRevisions">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="_rgRevisions" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManager>
Back to Top