Hi,
If I wanted to use a javascript based igGrid how would I use that with an MVC controller. I'm looking to use this as I need the sortable function here:
$("#grid1").igGrid({ autoGenerateColumns: false, autoCommit: false, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" } ], primaryKey: "ProductID", dataSource: adventureWorks, rowsRendered: function(evt, ui) { // initialize sortable on the grid tbody initSortable(); } }); }); function initSortable() { $( "#grid1 tbody" ).sortable({ containment: "parent", start: function(evt, ui) { var children = ui.item.children(); $("#grid1_headers thead th").each(function(ix, el) { // set the width of each td to its header width $(children[ix]).width($(el).width()); }); } });
Please let me know how to push data from an MVC controller as well as to post back to that controller.
Conversely, how would I define an MVC databound Grid to use the initSortable function above. I don't see the rowsRendered property exposed when using the MVC helper. Please help, thanks!
Hello,
Thank you for contacting us.
It is not a problem to use a delegate with our igGrid widget, in fact when MVC Grid wrapper is used, when the browser renders it the result is igGrid widget implementation, so you can use $(document).delegate to add rowsRendered event, like it is shown here (http://help.infragistics.com/jQuery/2014.2/ui.iggrid#events:rowsRendered).
//Delegate
$(document).delegate(
"yourGridId"
,
"iggridrowsrendered"
function
(evt, ui) {
//return reference to igGrid
ui.owner;
//return grid's table body DOM element
ui.tbody;
});
//Initialize
$(
".selector"
).igGrid({
rowsRendered:
(evt, ui) {...}
About your question how to use the grid with mvc controller, I have created a sample for you that is using igGrid widget that gets data from controller and also have UpdateURL which is used to update data. Please have a look at it, I think that you will find it helpful.
Looking forward to hearing from you.
I wanted to follow-up on this, I'm having trouble getting the delegate example you pointed out to work with the sortable function I have. Can you please give me a working MVC sample with the function I have:
rowsRendered: function(evt, ui) { // initialize sortable on the grid tbody initSortable(); }
function initSortable() { $( "#grid1 tbody" ).sortable({ containment: "parent", start: function(evt, ui) { var children = ui.item.children(); $("#grid1_headers thead th").each(function(ix, el) { // set the width of each td to its header width $(children[ix]).width($(el).width()); }); } });
Hopefully I can receive a sample soon as the project I'm working on is time sensitive. Thank you so much.
I just wanted to point out that I figured out the problem and it was because I thought I needed both delegate and initialization functions. Sorry but I'm new to your components. Your samples are correct and this delegate works for me:
$(document).delegate("#Grid", "iggridrowsrendered", function (evt, ui) { $("#Grid tbody").sortable({ containment: "parent", start: function (evt, ui) { var children = ui.item.children(); $("#Grid_headers thead th").each(function (ix, el) { // set the width of each td to its header width $(children[ix]).width($(el).width()); }); } }); });
I'm able to drag the rows to re-arrange the order within the igGrid MVC. Hope this helps someone out there.