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

[arjunrvasisht]

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>

[Daniil]

Hi @arjunrvasisht,

Please clarify is it a continuation of this discussion?
http://forums.ext.net/showthread.php?50131

[arjunrvasisht]

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

[Daniil]

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>

[arjunrvasisht]

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.?

[Daniil]

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.