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.
Sorry but I think I spoke too soon. Trying the above code on my MVC wrapper didn't enable the sortable function. Here's my code:
@(Html.Infragistics() .Grid(Model) .ID("Grid")
...........
//Delegate $(document).delegate("#Grid", "iggridrowsrendered", function (evt, ui) { //return reference to igGrid ui.owner; //return grid's table body DOM element ui.tbody; }); //Initialize $(".selector").igGrid({ rowsRendered: function(evt, ui) { // initialize sortable on the grid tbody initSortable(); } }); function initSortable() { $("#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()); }); } }); }
Maybe this is just a syntax issue but the delegate doesn't seem to work for me. I should be able to sort the rows by dragging them on the grid. This works with a javascript igGrid widget. Please help.
Hi Zdravko,
Thank you, that's exactly what I needed! I have another question that hopefully you can answer that might be doable using a delegate. How would I prevent the user from clicking away from a row when a new row is added. I've noticed when I add a new row and click away from it, the new data gets lost. I want to force the user to either click Done or Cancel when adding a new row and not be able to click away from the row being added, is that possible with a delegate? I'd like to know how to use this with the MVC wrapper and I'd appreciate if you can show me an example. Thanks so much.