Enable / Disable delete row and add row

Hagar Rachman posted over 7 years ago

I am using a igTreeGrid and I am trying to hide/show "delete row" and "add child row" buttons for each row based on some criteria.

I set up this code to run when "hover" event is fired, but it is never running: $("#treegrid > tbody > tr").hover(...);

Thank you for your help.

here is my code:

TheGrid = $("#treegrid");

TheGrid.igTreeGrid({
width: "100%",
//dataSource: gridData, //bound to flat data source,
autoGenerateColumns: false,
primaryKey: "bgt_rowid",
foreignKey: "bgt_prowid",
initialExpandDepth: 0,
updateUrl: "Services/BudgetService.asmx/Update",
autoCommit : true,
columns: [
{ headerText: "שם", key: "rowName" , width: "300px" , dataType: "string" },
{ headerText: "rowID", key: "bgt_rowid", width: "100px", dataType: "number" , hidden: true},//must column. without it the grid is not working properly.
{ headerText: "ParentID", key: "bgt_prowid", width: "100px", dataType: "number", hidden: true },//must column. without it the grid is not working properly.
//dynamically add columns
<%
foreach (Builder.Tarbut.DAL.BudgetColumn col in GridCols) {
Response.Write(string.Format("{{ headerText: \"{0}\", key: \"{1}\", dataType: \"number\" }},", col.ColTitle, col.ID));
}
%>
],
features: [
{
name: "Selection",
multipleSelection: true,
mode: "cell",
activation: true
},
{
name: "Sorting",
applySortedColumnCss: false,
//mode: "multi"
},
{
name: "Filtering",
//filterButtonLocation : "right",
labels: {
advancedButtonLabel: "Advanced",
after: "לפני",
before: "אחרי",
clear: "נקה סינון",
contains: "מכיל",
doesNotContain: "אינו מכיל",
doesNotEqual: "שונה מ",
empty: "ריק",
endsWith: "מסתיים ב",
equals: "שווה ל",
false: "false",
falseLabel: "false",
filterDialogCaptionLabel: "Advanced Filtering",
greaterThan: "גדול מ",
greaterThanOrEqualTo: "גדול או שווה ל",
lessThan: "קטן מ",
lessThanOrEqualTo: "קטן או שווה ל",
startsWith: "מתחיל ב"

},
nullTexts: {
after: "לפני...",
before: "אחרי...",
clear: "נקה סינון",
contains: "מכיל...",
doesNotContain: "אינו מכיל...",
doesNotEqual: "שונה מ...",
empty: "ריק",
endsWith: "מסתיים ב...",
equals: "שווה ל...",
false: "false",
falseLabel: "false",
filterDialogCaptionLabel: "Advanced Filtering",
greaterThan: "גדול מ...",
greaterThanOrEqualTo: "גדול או שווה ל...",
lessThan: "קטן מ...",
lessThanOrEqualTo: "קטן או שווה ל...",
startsWith: "מתחיל ב...",
}
},
/*{
name: "Paging",
pageSizeDropDownLabel: "הצג",
pageSizeDropDownTooltip: "בחר מספר רשומות לתצוגה",
pageSizeDropDownTrailingLabel: "רשומות",
currentPageDropDownLeadingLabel: "Current XX Page XX",
currentPageDropDownTrailingLabel: "X Pages XXX",
firstPageLabelText: "ראשון",
firstPageTooltip: "עבור לדף הראשון",
lastPageLabelText: "אחרון",
lastPageTooltip: "עבור לדף האחרון",
nextPageLabelText: "הבא",
nextPageTooltip: "עבור לדף הבא",
prevPageLabelText: "הקודם",
prevPageTooltip: "עבור לדף הקודם",
pagerRecordsLabelTemplate: "${startRecord} עד ${endRecord} מתוך ${recordCount}",

pageSize: 50
},*/
/*{
name: "ColumnMoving",
mode: "deferred",
columnSettings: [
{ columnKey: "bld_rowname", allowMoving: false },
{ columnKey: "bld_rowid", allowMoving: false }
]
},
{
name: "Resizing",
allowDoubleClickToResize: true
},*/
{
name: "Updating",
enableAddRow: false,
enableAddChild: true,
addRowLabel: "הוסף שורה",
cancelLabel: "   בטל",
doneLabel: "   המשך",
editMode: "cell",
enableDeleteRow: true,
excelNavigationMode: true,
horizontalMoveOnEnter: true,
validation: true,
startEditTriggers: "click,f2,enter",
columnSettings: [
{
columnKey: "rowName", editorOptions: {
type: "text",
required: true
//disabled: true
}
},
],
editCellEnded: function(evt, ui){
if (ui.update && !isCalculatingSummaries && TheGrid.igTreeGrid('columnByKey', ui.columnKey).dataType === 'number'){//calculate summary for numbers when cell changes
var parentId = TheGrid.igTreeGrid("getCellValue", ui.rowID, "bgt_prowid");
calculateSummaries(parentId, ui.columnKey);
}
},
editCellStarting: function(evt, ui){//enable or disable editing
//verify permissions to edit row and disable editing if no permission
if (!isRowEditable(ui)){
showErrMsg('אינך רשאי לערוך שורה זו');
return false;
}

//check if row has children and disable editing of numerical values if yes (parent rows cannot be edited, they are calculated)
if (isSummaryCell(ui)){
showErrMsg('לא ניתן לערוך שורת סיכום');
return false;
}

return true;
},
rowDeleted: function(evt, ui){//recalculate summaries.
$.each(TheGrid.igTreeGrid('option', 'columns'), function(i, col){//loop on all columns
if(col.hidden == false && col.dataType === "number"){ //need to recalculate summary. (ignore hidden columns, they are key columns)
calculateSummaries(ParentRow , col.key);
}
});
//TheGrid.igTreeGrid("getCellValue", 3, "ShipDate");
},
rowDeleting: function(evt, ui){
ParentRow = TheGrid.igTreeGrid("getCellValue", ui.rowID, "bgt_prowid");
}
}
]
});

$("#treegrid > tbody > tr").hover(
function(evt) {
alert(1);
var rowID = $(this).attr("data-id"); // Get the row id.
if (hasChildren(rowID)){
$("span.ui-iggrid-deletebutton").hide();
}
else
{
$("span.ui-iggrid-deletebutton").show();
}
},
function(evt) {
alert(2);
$("span.ui-iggrid-deletebutton").show();
}
);

//check if row has children
function hasChildren(rowID){
if ($(TheGrid.igTreeGrid("rowById", rowID)).attr('aria-owns')){//row has children
return true;
}
return false;
}

Offline Caty posted over 5 years ago in reply to Maya Kirova

I've tried this method, and I can get the hover function to recognize the correct cell, but the evt.preventdefault and evt.stoppropagation are not stopping the delete button from showing.

This is my code block inside the iggridrendered function.

$("#notesGrid > tbody > tr").hover(function(evt){
                var rowID = $(evt.target).closest("tr").attr("data-id");
                var deleted = grid.igGrid("getCellValue", rowID, "IsDeleted");
                if (deleted == true) {
                    evt.preventDefault();
                    evt.stopPropagation();
                }
            });

29417

Offline Maya Kirova posted over 7 years ago

Hello Hagar,

Thank you for posting in our forum.

When attaching the hover event please make sure that the target elements (treegrid > tbody > tr) are already rendered in the DOM.

You can attach the event in the grid’s rendered event, for example:

rendered: function(){

                $("#treegrid1 > tbody > tr").hover(function(evt){

                                …

                });

}

If you’d like to show the add/delete buttons only for specific rows you can cancel the event for the rows for which you don’t want to show the buttons, for example:

$("#treegrid1 > tbody > tr").hover(function(evt){

var rowID = $(evt.target).closest("tr").attr("data-id");

if(!hasChildren(rowID)){

                //cancels event and prevents the buttons from showing

                evt.preventDefault();

                evt.stopPropagation();

}

});

I’ve attached a sample for your reference where the add/delete button will be displayed only for the rows that already have chidren. They will not be displayed for rows that don’t have children.

Please refer to the attached sample and let me know if you have any questions.

Best Regards,

Maya Kirova

Infragistics, Inc.

http://ko.infragistics.com/support

sample.zip
Cancel
Reply

Cancel