PDA

View Full Version : [CLOSED] Disabling Context Menu in Gridpanel for specific columns only.



arjunrvasisht
Jan 06, 2015, 4:43 AM
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:inlin e-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;dis play: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;dis play: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;dis play: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;dis play: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;dis play: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;disp lay:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[0] + '</span>' + '<span style="background-color:White;color:Black;width:50%;height:22px;disp lay:inline-table;line-height: 18px;text-align:right;">' + colIndexToRemove[1] + '</span>' + '<span style="background-color:White;color:Black;width:100%;height:22px;dis play: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(!#{grdDashbo ard}.getSelectionModel().getLastSelected().getData ().IsAllowed){#{menuLable}.setText('Scorecards(Res tricted)');#{mnPEScorecard}.setVisible(true);#{mnP MScorecard}.setVisible(true);#{mnPEDetailView}.set Visible(true);#{mnPEScorecard}.disable();#{mnPMSco recard}.disable();#{mnPEDetailView}.disable();}els e{#{mnPEScorecard}.enable();#{mnPMScorecard}.enabl e();#{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
Jan 06, 2015, 11:22 AM
Hi @arjunrvasisht,

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

arjunrvasisht
Jan 07, 2015, 3:10 AM
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
Jan 07, 2015, 10:31 AM
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
Jan 08, 2015, 4:23 AM
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
Jan 08, 2015, 10:55 AM
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.