Hi!
Please help me!
I'm working an igGrid with add new, update, delete feture like sample in you support page but my igGrid can'n not fired event and i try to disable button but it throw error
here are my code
@(Html.Infragistics().Loader() _ .ScriptPath(strRoot + "Scripts/") _ .CssPath(strRoot + "Content/") _ .Resources("igGrid,igGrid.*, igEditors, grid-modal-loading-inicator.js, infragistics.core.js, infragistics.lob.js, infragistics.dv.js") _ .Render())
@(Html.Infragistics() _ .Grid(Of TPG.DataWarehouse.Models.tbl_TDW_RequestType)() _ .ID("grdRequestType") _ .Width("100%") _ .AutoGenerateColumns(False) _ .AutoGenerateLayouts(False) _ .RenderCheckboxes(True) _ .EnableUTCDates(False) _ .AutofitLastColumn(True) _ .PrimaryKey("RequestTypeID") _ .Columns(Sub(column) column.For(Function(x) x.RequestTypeID).HeaderText("Request Type ID").Hidden(True) column.For(Function(x) x.RequestName).HeaderText("Request Name") column.For(Function(x) x.Description).HeaderText("Description") End Sub) _ .Features(Sub(features) features.Sorting().Type(OpType.Remote).ColumnSettings(Sub(cs) cs.ColumnSetting().ColumnKey("RequestName").CurrentSortDirection("asc") End Sub) features.Paging().PageSize(PAGE_SIZE_20) features.Filtering().ColumnSettings(Sub(settings) 'settings.ColumnSetting().ColumnKey("Action").AllowFiltering(False) End Sub) features.Resizing().AllowDoubleClickToResize(True) features.Updating().ColumnSettings(Sub(cs) cs.ColumnSetting.ColumnKey("RequestTypeID").ReadOnly(True) cs.ColumnSetting().ColumnKey("RequestName").EditorType(ColumnEditorType.Text).Required(True) cs.ColumnSetting().ColumnKey("Description").EditorType(ColumnEditorType.Text).Required(True) End Sub) End Sub) _ .DataSourceUrl(Url.Action("GetRequestType", "Request")) _ .UpdateUrl(Url.Action("SaveRequestType","Request")) _ .DataBind() _ .Render() )
<input type="button" id="saveChanges" class="btn-primary" value="Save Changes" /> <input type="button" id="undo" class="btn-info" value="Undo" /> <input type="button" id="redo" class="btn-info" value="Redo" />
<script type="text/javascript">
var updates, loadingIndicator; $(function () { var grid = $("#grdRequestType");
$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true }); $("#undo").igButton({ labelText: $("#undo").val(), disabled: true }); $("#redo").igButton({ labelText: $("#redo").val(), disabled: true });
loadingIndicator = new GridModalLoadingIndicator(grid);
grid.on("iggriddatabinding", function (e, args) { loadingIndicator.show(); });
grid.on("iggriddatabound", function (e, args) { loadingIndicator.hide(); });
grid.on("iggridupdatingrowdeleted", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingrowadded", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } });
$("#undo").on('igbuttonclick', function (e, args) { updates = $.extend({}, grid.data('igGrid').pendingTransactions()); $.each(updates, function (index, transaction) { grid.igGrid("rollback", transaction.RequestTypeID, true); });
$("#redo").igButton("option", "disabled", false); $("#undo").igButton("disable"); $("#saveChanges").igButton("disable");
return false; } );
$("#redo").on('igbuttonclick', function (e) { $.each(updates, function (index, transaction) { switch (transaction.type) { case "row": grid.igGridUpdating('updateRow', transaction.RequestTypeID, transaction.row, null, false); break; case "newrow": grid.igGridUpdating('addRow', transaction.row, false); break; case "deleterow": grid.igGridUpdating('deleteRow', transaction.RequestTypeID, false); break; }
}); $(this).igButton("disable"); $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } );
)};
</script>
that's all!
Please tell me! Where was i wrong? and how to fix it
Thanks you very much!
Hello Cuong Tran,
I am glad that you find my suggestion helpful.
Please let me know if you need any further assistance with this matter,
thanks for support! it working
because i render save and other js function before page load. so it is not working
and now i locate it in $(window).load(function(){}) it work
thanks again!
Hello Cuong,
Thank you for posting in our community.
What I can suggest is explicitly adding an ID option to the igGrid and afterwards use delegate to attach handlers to events. For example:
@(Html.Infragistics().Grid(Model.Customers.AsQueryable()) .Width("100%") .ID("grdRequestType") .AutoGenerateColumns(true) . . . . $(document).delegate("#grdRequestType", "iggridupdatingrowadded", function (evt, ui) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); });
@(Html.Infragistics().Grid(Model.Customers.AsQueryable())
.Width("100%")
.ID("grdRequestType")
.AutoGenerateColumns(true)
.
$(document).delegate("#grdRequestType", "iggridupdatingrowadded", function (evt, ui) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
});
Actually, this is the way how event handlers are attached to the corresponding events shown in our API documentation, available at:
http://help.infragistics.com/jQuery/2014.2/ui.iggridupdating#events
I hope you find my information helpful.
Please let me know if you have any additional questions regarding this matter.