Jan 06, 2015, 4:43 AM
[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 :
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 9:13 AM.
Reason: [CLOSED]