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
60
Enable / Disable delete row and add row
posted

Hi

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: "&nbsp;&nbsp;&nbsp;בטל",
doneLabel: "&nbsp;&nbsp;&nbsp;המשך",
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;
}

Parents
No Data
Reply
  • 29417
    Offline posted

    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://es.infragistics.com/support

     

     

    sample.zip
Children