Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
Context Menu in Grid with the columns fixed
posted

Hello,
I tried to create a menu context in a grid if we select and right click on a cell.
But it worked on cells of fixed columns, not with those of non-fixed columns.
Could you help me please ?
My Infragistics version is 14.2
Below is my grid and code:

@(Html.Infragistics()
.Grid<ViewPlanningProd>()
.ID("gridPlanningProd")
.Height((string)ViewBag.HeightList)
.Width("1800px")
.ResponseDataKey("Data") //pointe sur la propriété Data de PagedDataListDto
.PrimaryKey("PrimaryKey")
.RenderCheckboxes(true)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.EnableUTCDates(false)
.Columns(column =>
{

column.For(crp => crp.LigneMachine).Width("100px");
column.For(crp => crp.RefProduit).Width("100px");
column.For(crp => crp.Po).Width("100px");
column.For(crp => crp.QteCde).Width("100px");
column.For(crp => crp.Designation).Width("200px");
column.For(crp => crp.QteEq).Width("80px").Template(Html.TemplateAttributes(new { @style = Style.AlignCenter }, "${QteEq}") + Html.TemplateAttributes(new { @style = Style.AlignCenterRedNewLine }, "(${QteEq2})")).Format("#"); ;
column.For(crp => crp.NbrPersonne).Width("50px");
column.For(crp => crp.Commentaire).Width("200px");

//column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Lundi</p>").Group(c =>
//{
// c.For(crp => crp.LundiJournee).Width("100px");
// c.For(crp => crp.LundiMatin).Width("100px");
// c.For(crp => crp.LundiApresMidi).Width("100px");
// c.For(crp => crp.LundiNuit).Width("100px");
//});


column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Mardi</p>").Group(c =>
{
c.For(crp => crp.MardiJournee).Width("100px");
c.For(crp => crp.MardiMatin).Width("100px");
c.For(crp => crp.MardiApresMidi).Width("100px");
c.For(crp => crp.MardiNuit).Width("100px");
});

column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Mercredi</p>").Group(c =>
{
c.For(crp => crp.MercrediJournee).Width("100px");
c.For(crp => crp.MercrediMatin).Width("100px");
c.For(crp => crp.MercrediApresMidi).Width("100px");
c.For(crp => crp.MercrediNuit).Width("100px");
});

column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Jeudi</p>").Group(c =>
{
c.For(crp => crp.JeudiJournee).Width("100px");
c.For(crp => crp.JeudiMatin).Width("100px");
c.For(crp => crp.JeudiApresMidi).Width("100px");
c.For(crp => crp.JeudiNuit).Width("100px");
});

column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Vendredi</p>").Group(c =>
{

c.For(crp => crp.VendrediJournee).Width("100px");
c.For(crp => crp.VendrediMatin).Width("100px");
c.For(crp => crp.VendrediApresMidi).Width("100px");
c.For(crp => crp.VendrediNuit).Width("100px");
});

column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Samedi</p>").Group(c =>
{
c.For(crp => crp.SamediJournee).Width("100px");
c.For(crp => crp.SamediMatin).Width("100px");
c.For(crp => crp.SamediApresMidi).Width("100px");
c.For(crp => crp.SamediNuit).Width("100px");
});

column.MultiColumnHeader().HeaderText("<p style='text-align:center;color:violet'>Dimanche</p>").Group(c =>
{
c.For(crp => crp.DimancheJournee).Width("100px");
c.For(crp => crp.DimancheMatin).Width("100px");
c.For(crp => crp.DimancheApresMidi).Width("100px");
c.For(crp => crp.DimancheNuit).Width("100px");
});

column.For(a => a.PrimaryKey).Hidden(true);
})
.Features(features =>
{
features.Selection().Mode(SelectionMode.Cell).MultipleSelection(false);
//features.Updating().EnableAddRow(false).EnableDeleteRow(false);
//features.RowSelectors();
features.ColumnFixing().FixingDirection(ColumnFixingDirection.Left).ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("LigneMachine").IsFixed(true);
cs.ColumnSetting().ColumnKey("RefProduit").IsFixed(true);
cs.ColumnSetting().ColumnKey("Po").IsFixed(true);
cs.ColumnSetting().ColumnKey("QteCde").IsFixed(true);
cs.ColumnSetting().ColumnKey("Designation").IsFixed(true);
cs.ColumnSetting().ColumnKey("QteEq").IsFixed(true);
cs.ColumnSetting().ColumnKey("NbrPersonne").IsFixed(true);
cs.ColumnSetting().ColumnKey("Commentaire").IsFixed(true);
});
features.Sorting().Type(OpType.Remote).ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("LigneMachine").CurrentSortDirection("asc");
});
features.Paging().Type(OpType.Remote)
.PageSize(ViewBag.PageSize)
.PageSizeList(ViewBag.PageSizeList)
.RecordCountKey("TotalDataCount"); //pointe sur la propriété TotalDataCount de PagedDataListDto
features.Filtering().Type(OpType.Remote).Mode(FilterMode.Simple)
.FilterExprUrlKey(string.Empty); // ne pas oublier de mettre la ExpUrlKey à empty sans quoi le décryptage oData ne fonctionne pas
features.Tooltips().Visibility(TooltipsVisibility.Always)
.CursorLeftOffset(15).Style(TooltipsStyle.Tooltip).ShowDelay(100);
//features.Resizing().ColumnSettings(cs =>
//{
// cs.ColumnSetting().ColumnKey("Designation").AllowResizing(false);
//});
//features.CellMerging();
features.MultiColumnHeaders();
})
.DataSourceUrl(Url.Action("IndexList", Model)) // cette action renvoie une serialization JSon d'un pagedDataListDto
.DataBind()
.Render()
)

<script type="text/javascript">

var ds = new Array(), i = 0;
ds.push({ "ProductID": ++i, "UnitsInStock": "0", "ProductDescription": "Laptop", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "43", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "25", "ProductDescription": "coffee cup", "UnitPrice": "$ 2100", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "98", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 2100", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "99", "ProductDescription": "mouse", "UnitPrice": "$ 2100", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$ 2100", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "69", "ProductDescription": "fish", "UnitPrice": "$ 2100", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "0", "ProductDescription": "Laptop", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "43", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "IsActive": false });
ds.push({ "ProductID": ++i, "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "IsActive": false });

$(function () {
$(document).contextmenu({

$(document).contextmenu({
// Delegate the context menu only to selected cells/rows
delegate: ".ui-iggrid-selectedcell.ui-state-active",
preventSelect: false,
menu: [
{ title: "Get Data", cmd: "getdata", uiIcon: "ui-icon-scissors" },
{ title: "Active Row", cmd: "active", uiIcon: "ui-icon-copy" }
],
select: function (event, ui) {
var $target = ui.target;
switch (ui.cmd) {
case "getdata":
var thanh1 = $('#gridPlanningProd').igGridSelection('selectedRow');
var thanh = $('#gridPlanningProd').igGridSelection('selectedCell');
break
case "active":
//var rowId = $("#gridPlanningProd").igGridSelection("activeRow").id;
//alert("The active row is #" + rowId);
break
}
}
});

</script>