[CLOSED] Disabling Context Menu in Gridpanel for specific columns only.

  1. #1

    [CLOSED] Disabling Context Menu in Gridpanel for specific columns only.

    Hello,
    I have gridpanel which is generated dynamically. I have context menu associated to that. I want the right click to be happened for only specific columns and it should not work for the others. Below is a runnable test case in which I don't want the context menu to be worked for the first two columns. Currently it is working for all the columns. Please tell me how do I disable it only for the first two columns.

    aspx code :

    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Main.master" CodeBehind="POC2V1_11.aspx.cs"
        Inherits="Honeywell.Ap3.WebApp.Pages.Views.POC2V1_11" Title="Unit Product Cost (UPC) Form" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="headContentPlaceHolder" runat="Server">
        <style type="text/css">
            .colEditIcon div.x-grid3-hd-editColumnID {
                background: url(../../Images/16x16/date_edit.png) no-repeat left;
            }
    
            .x-grid3-cell-inner, .x-grid3-hd-inner {
                white-space: normal; /* changed from nowrap */
                overflow: visible;
            }
    
            .x-form-cb-label {
                font-size: 8.5pt !important;
                font-family: Arial !important;
            }
    
            .save-label-note {
                font-style: italic;
                color: Red;
            }
    
            .lnkCls {
                padding-top: 5px;
            }
    
            .x-form-trigger-input-cell {
                border: none !important;
            }
    
            .x-form-item-body {
                border: none !important;
            }
    
    
            .x-grid-cell-first {
                border-right-width: 1px !important;
                border-right-style: solid !important;
                border-right-color: #ededed !important;
                border-bottom-style: none !important;
            }
        </style>
    
        <script src="../../JavaScriptFiles/Jquery/Jquery1.6.1.js" type="text/javascript"></script>
    
        <script type="text/javascript">
    
            var count = 1;
            var newRowCount = 0;
            var R = "#FF0000";
            var G = "#008000";
            var Y = "#FFFF00";
            var test = "check";
            var RenderColor = function (columnValue, columnValueCSS, record, rowIndex) {
                //var RenderColor = function(columnValue, metadata, record, rowIndex, colIndex, store, view) {
                // debugger;
                if (rowIndex == 0) {
                    if (columnValue == "R") {
                        columnValue = R;
                    }
                    else if (columnValue == "Y") {
                        columnValue = Y;
                    }
                    else {
                        columnValue = G;
                    }
                    return '<span style="background-color:' + columnValue + ';color:Black;width:100%;height:20px;display:inline-table;text-align:center;font-weight:bold"></span>';
                }
                if (rowIndex == 1) {
                    var colIndexToRemove = columnValue.split(",");
                    for (var i = 0 ; i < 12 ; i++) {
                        if (colIndexToRemove[i] == "R") {
                            colIndexToRemove[i] = R;
                        }
                        else if (colIndexToRemove[i] == "Y") {
                            colIndexToRemove[i] = Y;
                        }
                        else {
                            colIndexToRemove[i] = G;
                        }
                    }
    
    
                    return '<span title="' + test + '" style="background-color:' + colIndexToRemove[0] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[1] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[2] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[3] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[4] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[5] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[6] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[7] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[8] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[9] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[10] + ';color:White;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>' + '<span style="background-color:' + colIndexToRemove[11] + ';color:Black;width:8%;height:22px;display:inline-table;line-height: 18px;text-align:center;"></span>';
                }
                else {
                    //debugger;
                    var colIndexToRemove = columnValue.split(",");
                    var txtcolor = "White";
    
                    if (colIndexToRemove[2] == "R") {
                        colIndexToRemove[2] = R;
                    }
                    else if (colIndexToRemove[2] == "Y") {
                        colIndexToRemove[2] = Y;
                        txtcolor = "Black";
                    }
                    else {
                        colIndexToRemove[2] = G;
                    }
    
    
    
                    return '<span style="background-color:' + colIndexToRemove[2] + ';color:' + txtcolor + ';width:100%;height:22px;display:inline-table;line-height: 18px;text-align:right;">' + colIndexToRemove[0] + '</span>' + '<span style="background-color:' + colIndexToRemove[2] + ';color:' + txtcolor + ';width:100%;height:22px;display:inline-table;line-height: 18px;text-align:right;">' + colIndexToRemove[1] + '</span>'
                }
                return columnValue;
            };
    
    
            var RenderAlternateColor = function (columnValue, columnValueCSS, record, rowIndex, columnIndex) {
    
                if (columnValue == "Counts") {
                    return '<span style="background-color:White;color:Black;width:100%;height:22px;display:inline-table;text-align:right;font-weight:bold"></span>';
                }
                else if (columnValue == "color") {
                    return '<span style="background-color:White;color:Black;width:100%;height:20px;display:inline-table;text-align:right;font-weight:bold"></span>';
                }
                else {
                    columnValueCSS.style = "border-top-color: inherit;border-top-style: double;border-top-width: thin;text-align: left;";
                    return '<span style="background-color:White;color:Black;width:100%;height:20px;display:inline-table;text-align:right;font-weight:bold;">' + columnValue + '</span>';
                }
    
                return columnValue;
            };
    
    
            var RenderAlternateColor2 = function (columnValue, columnValueCSS, record, rowIndex, columnIndex) {
                //debugger;
                if (rowIndex == 0) {
                    return '<span style="background-color:White;color:Black;width:100%;height:22px;display:inline-table;text-align:right;font-weight:bold"></span>';
                }
                else if (rowIndex == 1) {
                    return '<span style="background-color:White;color:Black;width:100%;height:22px;display:inline-table;text-align:right;font-weight:bold"></span>';
                }
                else {
                    var colIndexToRemove = columnValue.split(",");
                    return '<span style="background-color:White;color:Black;width:50%;height:22px;display:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[0] + '</span>' + '<span style="background-color:White;color:Black;width:50%;height:22px;display:inline-table;line-height: 18px;text-align:right;">' + colIndexToRemove[1] + '</span>' + '<span style="background-color:White;color:Black;width:100%;height:22px;display:inline-table;line-height: 18px;text-align:right;">' + colIndexToRemove[2] + '</span>';
                }
                return columnValue;
            };
        </script>
        <ext:XScript ID="XScriptdd1" runat="server">
                <script type="text/javascript">
                    var applyFilter = function (a, b) {
                       // debugger;
                    }
    
                    preventRightClick = function (view, record, item, index, e) {
                       // debugger;
                        // Stop the browser getting the event
                        e.preventDefault();
                    }
        </script>
        </ext:XScript>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" runat="Server">
        <ext:ResourceManager ID="ResourceManager2" runat="server" ShowWarningOnAjaxFailure="false" Namespace="" />
        <ext:GridPanel ID="grdERL" runat="server" MinHeight="0" MaxHeight="670" EnableColumnMove="false" MinWidth="1211" MaxWidth="2000" ContextMenuID="dashMenu">
            <Store>
                <ext:Store ID="strERL" runat="server" IgnoreExtraFields="false">
                    <Model>
                        <ext:Model ID="Model39" runat="server" />
                    </Model>
                </ext:Store>
            </Store>
            <View>
                <ext:GridView ID="GridView1" runat="server" DeferEmptyText="false"
                    EmptyText="<%$ Resources:WebResource,GeneralMsg_NoRecordsFound %>" StripeRows="false" TrackOver="false" />
            </View>
            <ColumnModel>
                <Columns>
                </Columns>
            </ColumnModel>
            <Listeners>
                <ItemContextMenu Fn="preventRightClick" />
            </Listeners>
           
        </ext:GridPanel>
    
        <ext:Menu ID="dashMenu" runat="server">
            <Items>
                <%--<ext:Label ID="menuLable" runat="server" CtCls="contextHeader" />--%>
                <ext:MenuItem ID="mnPEScorecard" runat="server" Text="Tier-2 Summary" Icon="ChartBar" ComponentCls="contextHeader-label">
                    <DirectEvents>
                        <%--  <Click OnEvent="ViewProgram_Scorecard_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="IsPMScoreCard" Value="false" />
                                </ExtraParams>
                                <EventMask ShowMask="true" CustomTarget="#{grdDashboard}" />
                            </Click>--%>
                    </DirectEvents>
                </ext:MenuItem>
                <%-- <ext:MenuItem ID="mnPMScorecard" runat="server" Text="PM scorecard" Icon="ChartPie" ComponentCls="contextHeader-label">
                        <DirectEvents>
                            <Click OnEvent="ViewProgram_Scorecard_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="IsPMScoreCard" Value="true" />
                                </ExtraParams>
                                <EventMask ShowMask="true" CustomTarget="#{grdDashboard}" />
                            </Click>
                        </DirectEvents>
                    </ext:MenuItem>
                    <ext:MenuItem ID="mnPEDetailView" runat="server" Text="Drilldown View" Icon="ChartOrganisation" ComponentCls="contextHeader-label">
                        <DirectEvents>
                            <Click OnEvent="DetailviewWinScorecard_Click">
                                <EventMask ShowMask="true" CustomTarget="#{grdDashboard}" />
                            </Click>
                        </DirectEvents>
                    </ext:MenuItem>--%>
            </Items>
            <Listeners>
                <BeforeShow Handler="applyFilter(this,#{strERL})"></BeforeShow>
                <%--<BeforeShow Handler="#{menuLable}.setText('Scorecards');if(!#{grdDashboard}.getSelectionModel().getLastSelected().getData().IsAllowed){#{menuLable}.setText('Scorecards(Restricted)');#{mnPEScorecard}.setVisible(true);#{mnPMScorecard}.setVisible(true);#{mnPEDetailView}.setVisible(true);#{mnPEScorecard}.disable();#{mnPMScorecard}.disable();#{mnPEDetailView}.disable();}else{#{mnPEScorecard}.enable();#{mnPMScorecard}.enable();#{mnPEDetailView}.enable();}" />--%>
            </Listeners>
        </ext:Menu>
    </asp:Content>
    .cs Code:

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    try
                    {
                        string path = "C:/AP3/06-SourceCode/AP3 2012/Honeywell.Ap3.WebApp/PEviewMatrixApproach.xml";
                        DataSet ds = new DataSet();
                        ds.ReadXml(path);
                        DataTable dt = GenerateTransposedTable(ds.Tables[0]);
    
    
    
                        DynamicGridView1 dynGV = new DynamicGridView1();
                        dynGV.createGrid(grdERL, strERL, dt);
    
                    }
                    catch
                    {
                        throw;
                    }
                }
            }
    
    
    
            private DataTable GenerateTransposedTable(DataTable inputTable)
            {
                DataTable outputTable = new DataTable();
                // Add columns by looping rows 
                // Header row's first column is same as in inputTable 
                outputTable.Columns.Add(inputTable.Columns[0].ColumnName.ToString());
                // Header row's second column onwards, 'inputTable's first column taken 
                foreach (DataRow inRow in inputTable.Rows)
                {
                    string newColName = inRow[0].ToString();
                    outputTable.Columns.Add(newColName);
                }
                // Add rows by looping columns        
                for (int rCount = 1; rCount <= inputTable.Columns.Count - 1; rCount++)
                {
                    DataRow newRow = outputTable.NewRow();
                    // First column is inputTable's Header row's second column 
                    newRow[0] = inputTable.Columns[rCount].ColumnName.ToString();
                    for (int cCount = 0; cCount <= inputTable.Rows.Count - 1; cCount++)
                    {
                        string colValue = inputTable.Rows[cCount][rCount].ToString();
                        newRow[cCount + 1] = colValue;
                    }
                    outputTable.Rows.Add(newRow);
                }
                return outputTable;
            }
    
            private class DynamicGridView1
            {
                public void createGrid(GridPanel grdERL, Store strERL, DataTable dt)
                {
                    if (X.IsAjaxRequest)
                    {
                        strERL.RemoveFields();
                    }
    
                    for (int i = 0; i < dt.Columns.Count; i++)
                    {
                        AddField(new ModelField(dt.Columns[i].ToString()), strERL, dt);
                    }
    
    
                    strERL.RebuildMeta();
    
                    BindSet1(strERL, dt);
    
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
    
                        if (j == 0)
                        {
                            Renderer objRenderAlternate = new Renderer();
                            objRenderAlternate.Fn = "RenderAlternateColor";
                            grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = false, Lockable = false, Width = 310, Wrap = true, Renderer = objRenderAlternate, Resizable = false, Sortable = false, MenuDisabled = true });
                        }
                        else if (j == 1)
                        {
                            Renderer objRenderAlternate = new Renderer();
                            objRenderAlternate.Fn = "RenderAlternateColor2";
                            grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = false, Lockable = false, Width = 80, Wrap = true, Renderer = objRenderAlternate, Resizable = false, Sortable = false, MenuDisabled = true });
                        }
                        else
                        {
                            Renderer objRender = new Renderer();
                            objRender.Fn = "RenderColor";
                            grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = false, Width = 165, Wrap = true, Renderer = objRender, Resizable = false, Sortable = false, MenuDisabled = true });
                        }
                    }
    
                    if (X.IsAjaxRequest)
                    {
                        grdERL.Reconfigure();
                    }
                }
    
    
    
                private void BindSet1(Store strERL, DataTable dt)
                {
                    strERL.DataSource = dt;
                    strERL.DataBind();
                }
    
                private void AddField(ModelField field, Store strERL, DataTable dt)
                {
                    if (X.IsAjaxRequest)
                    {
                        strERL.AddField(field);
                    }
                    else
                    {
                        strERL.Model[0].Fields.Add(field);
                    }
                }
            }
    below is the xml code. Please create an xml file and use the data given below for the Gridpanel:

    <?xml version="1.0" encoding="utf-8" ?>
    <EngineeringReadinessLevel>
      <authors>
        <Metric>Period</Metric>
        <color>Month</color>
        <Counts></Counts>
        <Cat1Milestone_Fidelity>Month,Actual,Plan</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>YTD,Actual,Plan</Cat2Milestone_Fidelity>
      </authors>
      <authors>
        <Metric>ECOE1</Metric>
        <color>R</color>
        <Counts>R,Y,G,G,Y,R,G,R,Y,R,G,Y</Counts>
        <Cat1Milestone_Fidelity>234,456,G</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>1,2,Y</Cat2Milestone_Fidelity>
      </authors>
      <authors>
        <Metric>ECOE2</Metric>
        <color>Y</color>
        <Counts>R,Y,G,G,Y,R,G,R,Y,R,G,Y</Counts>
        <Cat1Milestone_Fidelity>65,567,R</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>2,78,Y</Cat2Milestone_Fidelity>
      </authors>
      <authors>
        <Metric>ECOE3</Metric>
        <color>G</color>
        <Counts>Y,Y,G,G,G,R,G,Y,Y,R,G,R</Counts>
        <Cat1Milestone_Fidelity>345,987,R</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>434,7655,G</Cat2Milestone_Fidelity>
      </authors>
      <authors>
        <Metric>ECOE4</Metric>
        <color>Y</color>
        <Counts>G,Y,G,G,Y,G,G,R,Y,R,G,Y</Counts>
        <Cat1Milestone_Fidelity>23,34,Y</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>456,76,R</Cat2Milestone_Fidelity>
      </authors>
      <authors>
        <Metric>ECOE5</Metric>
        <color>R</color>
        <Counts>Y,Y,G,G,Y,G,G,R,Y,R,G,R</Counts>
        <Cat1Milestone_Fidelity>987,456,G</Cat1Milestone_Fidelity>
        <Cat2Milestone_Fidelity>345,987,Y</Cat2Milestone_Fidelity>
      </authors>
    </EngineeringReadinessLevel>
    Last edited by Daniil; Jan 16, 2015 at 10:13 AM. Reason: [CLOSED]
  2. #2
    Hi @arjunrvasisht,

    Please clarify is it a continuation of this discussion?
    http://forums.ext.net/showthread.php?50131
  3. #3
    Hi Daniil,
    Yes it is the same issue. Is my question clear to you or do u need more info on it.? I can share u the screen shot if u want.

    Thanks,
    Arjun
  4. #4
    It is how I would implement it.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test", "test", "test" },
                    new object[] { "test", "test", "test" },
                    new object[] { "test", "test", "test" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var onCellContextMenu = function (view, td, cellIndex, record, tr, rowIndex, e) {
                e.preventDefault();
    
                if ((cellIndex !== 0) && (cellIndex !== 1)) {
                    App.Menu1.showAt(e.getXY());
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Menu ID="Menu1" runat="server">
                <Items>
                    <ext:MenuItem runat="server" Text="Item 1" />
                    <ext:MenuItem runat="server" Text="Item 2" />
                </Items>
            </ext:Menu>
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test 3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <ViewConfig>
                    <Listeners>
                        <CellContextMenu Fn="onCellContextMenu" />
                    </Listeners>
                </ViewConfig>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hi Daniil,
    Thanks it is working fine. But when I use <Listeners> under <ViewConfig>, Striperows = false and TrackOver = false inside <View><ext:GridView></ext:GridView>/<View> is not working.
    Please let me know how do I do that.?
  6. #6
    You should use only one - ViewConfig or View. All the options should be possible to set for both. I mean if you already use a GridView, please use Listeners of that GridView, not of ViewConfig.
    Last edited by Daniil; Jan 08, 2015 at 12:07 PM.

Similar Threads

  1. [CLOSED] Disabling context menu in Gridpanel.
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 06, 2015, 12:21 PM
  2. GridPanel with context menu
    By Zirc75 in forum 2.x Help
    Replies: 0
    Last Post: Jan 10, 2014, 8:41 AM
  3. [CLOSED] Disabling specific Checkboxes ina Checkbox-Tree
    By macap in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 07, 2013, 10:37 PM
  4. Replies: 1
    Last Post: Jan 12, 2013, 5:30 AM
  5. Replies: 6
    Last Post: Aug 17, 2012, 3:02 PM

Tags for this Thread

Posting Permissions