This is a migrated thread and some comments may be shown as answers.

Radgrid with contextmenu to enter edit mode of the selected item

2 Answers 47 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 2
Carlos asked on 08 Aug 2014, 11:04 AM
Hi Guys,

I'm having a bit of a problem with my javascript not occurring after the radgrid has one item in edit mode. I'm using editforms with a custom user control to display the data needed. I've got the exact same code on several other pages and there it works 100% fine. 

My radgrid displays all the items and whenever i want to edit a item I right click and it will display the Context Menu with options to either edit, remove or enable based on the status of a item.

ASPX:

<%@ Page Title="" Language="C#" MasterPageFile="~/SystemSettings.Master" AutoEventWireup="true" CodeBehind="mergefields.aspx.cs" Inherits="CT_Administer_Website.mergefields" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script>
        function RowContextMenu(sender, eventArgs) {
            var menu = $find("<%=cmuMergeFieldsMenu.ClientID %>");
            var evt = eventArgs.get_domEvent();

            if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                return;
            }

            var index = eventArgs.get_itemIndexHierarchical();
            document.getElementById("<%= radGridClickedRowIndex.ClientID %>").value = index;

            sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

            menu.show(evt);

            evt.cancelBubble = true;
            evt.returnValue = false;

            if (evt.stopPropagation) {
                evt.stopPropagation();
                evt.preventDefault();
            }
        }



        function OnClientContextMenuShowing(sender, args) {
            var rowindex = document.getElementById("<%= radGridClickedRowIndex.ClientID %>").value;
            var DataItem = $find("<%= rgdMergeFields.ClientID %>").get_masterTableView().get_dataItems()[rowindex];
            var keyValues = DataItem.getDataKeyValue("_Active");

            document.getElementById("<%= radGridClickedRowValue.ClientID %>").value = DataItem.getDataKeyValue("_MergeFieldID");
            var nodeActiveState = keyValues;

            var menu = $find("<%= cmuMergeFieldsMenu.ClientID %>");

            if (nodeActiveState == "False") {
                menu.findItemByValue("Remove").hide();
                menu.findItemByValue("Enable").show();
            } else {
                menu.findItemByValue("Enable").hide();
                menu.findItemByValue("Remove").show();
            }
        }

        function OnClientItemClicked(sender, args) {
            var itemValue = args.get_item().get_value();
            var menu = $find("<%= cmuMergeFieldsMenu.ClientID %>");

            if (itemValue == "Remove") {
                if (confirm("Are you sure you want to remove the selected Merge Field?") == true) {

                }
                else {
                    menu.hide();
                    eventArgs.set_cancel(true);
                }
            }
            else if (itemValue == "Enable") {
                if (confirm("Are you sure you want to enable the selected Merge Field?") == true) {

                }
                else {
                    menu.hide();
                    eventArgs.set_cancel(true);
                }
            }
        }
    </script>
    <div style="position: absolute; top: 1px; left: 0px; width: 100%;">
        <telerik:RadGrid ID="rgdMergeFields" runat="server" ViewStateMode="Disabled" AutoGenerateColumns="False"
            ClientSettings-Resizing-AllowColumnResize="false" AllowPaging="True" AllowSorting="True"
            PageSize="25" ResolvedRenderMode="Classic" OnItemDataBound="rgdMergeFields_ItemDataBound"
            OnPageIndexChanged="rgdMergeFields_PageIndexChanged" OnItemCommand="rgdMergeFields_ItemCommand"
            OnNeedDataSource="rgdMergeFields_NeedDataSource" OnUpdateCommand="rgdMergeFields_UpdateCommand">
            <MasterTableView DataKeyNames="_MergeFieldID" ClientDataKeyNames="_Active, _MergeFieldID"
                AllowCustomPaging="false" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage">
                <CommandItemSettings AddNewRecordImageUrl="icon/plus.png" ShowRefreshButton="False" />
                <RowIndicatorColumn Visible="False">
                </RowIndicatorColumn>
                <ExpandCollapseColumn Created="True">
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridTemplateColumn HeaderText="Status" UniqueName="_Status">
                        <HeaderStyle Width="8%" />
                        <ItemTemplate>
                            <asp:Image ID="imgStatus" runat="server" Height="16px" Width="16px" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="_MergeFieldName" FilterControlAltText="Filter _MergeFieldName column"
                        HeaderText="Merge Field" SortExpression="_MergeFieldName" UniqueName="_MergeFieldName">
                        <HeaderStyle Width="60%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="_LastUpdated" FilterControlAltText="Filter _LastUpdated column"
                        HeaderText="Last Updated" SortExpression="_LastUpdated" UniqueName="_LastUpdated">
                        <HeaderStyle Width="32%" />
                    </telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings EditFormType="WebUserControl" FormStyle-BackColor="Black" UserControlName="editForms/MergeFieldsControl.ascx">
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowContextMenu="RowContextMenu" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
            <PagerStyle Mode="NextPrev" PageButtonCount="5" />
        </telerik:RadGrid>
        <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" runat="server" />
        <input type="hidden" id="radGridClickedRowValue" name="radGridClickedRowValue" runat="server" />
        <telerik:RadContextMenu ID="cmuMergeFieldsMenu" runat="server" EnableRoundedCorners="true"
            EnableShadows="true" OnClientShowing="OnClientContextMenuShowing" OnClientItemClicked="OnClientItemClicked"
            OnItemClick="cmuMergeFieldsMenu_ItemClick">
            <Items>
                <telerik:RadMenuItem Text="Edit" Value="Edit">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Remove" Value="Remove">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Enable" Value="Enable">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
    </div>
    <telerik:RadNotification ID="rdnNotification" runat="server" Position="Center" Title="Please Note!"
        AutoCloseDelay="0" ResolvedRenderMode="Classic">
    </telerik:RadNotification>
</asp:Content>


Code Behind:

using System;
using System.Linq;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace CT_Administer_Website
{
    public partial class mergefields : System.Web.UI.Page
    {
        Administer_WCFService.MergeFieldsClient wcf = new Administer_WCFService.MergeFieldsClient();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Cookies["LoginUser"] != null)
            {
                permissions.permissions p = (permissions.permissions)Session["Permissions"];
                rgdMergeFields.DataSource = wcf.DisplayMergeFields(p.ViewInactives);
                rgdMergeFields.DataBind();
            }
            else
            {
                Response.Redirect("login.aspx");
            }
        }

        protected void rgdMergeFields_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
        {
            if (e.CommandName.Equals(RadGrid.InitInsertCommandName))
            {
                e.Item.Edit = true;
                e.Item.OwnerTableView.Rebind();
            }
        }

        protected void rgdMergeFields_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            try
            {
                //Add an icon to the Grid items to show as a status
                if (e.Item is GridDataItem)
                {
                    Administer_WCFService.ct_MergeFields dataSourceRow = (Administer_WCFService.ct_MergeFields)e.Item.DataItem;
                    GridDataItem dataItem = (GridDataItem)e.Item;

                    Image newImage = dataItem.FindControl("imgStatus") as Image;
                    //tick.png for Enabled & cross.png for Disabled
                    newImage.ImageUrl = dataSourceRow._Active.Equals(true) ? "icon/tick.png" : "icon/cross.png";
                }
            }
            catch
            {
                rdnNotification.Title = Resources.MyGlobalResource.NotificationTitle_FatalError;
                rdnNotification.Show(Resources.MyGlobalResource.NotificationMessage_FatalError);
            }
        }

        protected void rgdMergeFields_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            permissions.permissions p = (permissions.permissions)Session["Permissions"];
            rgdMergeFields.DataSource = wcf.DisplayMergeFields(p.ViewInactives);
        }

        protected void rgdMergeFields_PageIndexChanged(object sender, Telerik.Web.UI.GridPageChangedEventArgs e)
        {
            try
            {
                rgdMergeFields.CurrentPageIndex = e.NewPageIndex;
            }
            catch
            {
                rdnNotification.Title = Resources.MyGlobalResource.NotificationTitle_FatalError;
                rdnNotification.Show(Resources.MyGlobalResource.NotificationMessage_FatalError);
            }
        }

        protected void rgdMergeFields_UpdateCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
        {
            permissions.permissions p = (permissions.permissions)Session["Permissions"];
            rgdMergeFields.DataSource = wcf.DisplayMergeFields(p.ViewInactives);
            rgdMergeFields.DataBind();
        }

        protected void cmuMergeFieldsMenu_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
        {
            try
            {
                //Context Menu Items
                if (e.Item.Value.Equals("Edit"))
                {
                    rgdMergeFields.Items[Convert.ToInt32(radGridClickedRowIndex.Value)].Edit = true;
                    rgdMergeFields.Items[Convert.ToInt32(radGridClickedRowIndex.Value)].OwnerTableView.Rebind();
                }
                else if (e.Item.Value.Equals("Enable"))
                {
                    //Enable a Disabled Report Profile
                    wcf.ChangeMergeFieldStatus(Convert.ToInt32(radGridClickedRowValue.Value), true, Request.Cookies["LoginUser"].Values["UserName"], Convert.ToInt32(Request.Cookies["LoginUser"].Values["UserID"]));
                    permissions.permissions p = (permissions.permissions)Session["Permissions"];
                    rgdMergeFields.DataSource = wcf.DisplayMergeFields(p.ViewInactives);
                    rgdMergeFields.DataBind();
                }
                else if (e.Item.Value.Equals("Remove"))
                {
                    //Disable an Enabled Report Profile
                    int result = wcf.ChangeMergeFieldStatus(Convert.ToInt32(radGridClickedRowValue.Value), false, Request.Cookies["LoginUser"].Values["UserName"], Convert.ToInt32(Request.Cookies["LoginUser"].Values["UserID"]));
                    permissions.permissions p = (permissions.permissions)Session["Permissions"];
                    rgdMergeFields.DataSource = wcf.DisplayMergeFields(p.ViewInactives);
                    rgdMergeFields.DataBind();

                    if (result.Equals(2))
                    {
                        rdnNotification.Show("Disabled");
                    }
                    else
                    {
                        rdnNotification.Show("Removed");
                    }
                }
            }
            catch
            {
                rdnNotification.Title = Resources.MyGlobalResource.NotificationTitle_FatalError;
                rdnNotification.Show(Resources.MyGlobalResource.NotificationMessage_FatalError);
            }
        }
    }
}

Thanks in advance


2 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 13 Aug 2014, 11:21 AM
Hi Carlos,

I believe you are using the following sample as a base:
http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx#

Please temporarily disable any ajaxification on the page and enable your script debugger(FireBug or F12) to see whether there are any script errors interfering.

Hope this helps.

Regards,
Eyup
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Carlos
Top achievements
Rank 2
answered on 13 Aug 2014, 11:34 AM
Hi 

I resolved the issue last week. Was calling two javascript functions in the context menu. These javascript functions didn't exist though

Thanks for the reply
Tags
Grid
Asked by
Carlos
Top achievements
Rank 2
Answers by
Eyup
Telerik team
Carlos
Top achievements
Rank 2
Share this question
or