Forums Ignite UI for jQuery
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
Close
Jonathan Hart
20
igGrid iggridselectionrowselectionchanged only fires once
posted

hello,

I am developing a UI around an igGrid.  The grid is being rendered with the MVC html helper classes, but then I want to wire up events client side.  I can select a row exactly one time, then am unable to select any other rows after that.  No errors appear in the console.  The row style still changes on hover, but clicking and double clicking doesn't cause the row selection to change.  I can somewhat "force" a new row selection by holding ctrl and double-clicking, but it doesn't fire an event - it just changes the color as if multiselect is enabled.

I'm rendering the grid using the MVC helper, but binding the event client side.

//Javascript

$("#grid").on("iggridselectionrowselectionchanged", function (evt, ui) {
if (ui.row.index) {
hudData = liveBoardData[ui.row.index];
LoadHUD();
}
});

//MVC HTML Helper

Html.Infragistics().Grid<LiveBoard.LiveBoardLine>()
.ID("grid")
.PrimaryKey("ReservationId")
.AutoGenerateColumns(false)
.Columns(c =>
{
c.For(i => i.ReservationDetails.ReservationId).Hidden(true);

c.For(i => i.ReservationDetails.ReservationType).HeaderText("T").Template("{{if ${ReservationDetails.ReservationType.Name} === 'Arrival'}}A{{else}}D{{/if}}");

c.For(i => i.ReservationDetails.Times.Time).HeaderText("Time").Template("${ReservationDetails.Times.Time}");
c.For(i => i.ReservationDetails.Times.Stage).HeaderText("Stage").Template("${ReservationDetails.Times.Stage}");
c.For(i => i.ReservationDetails.Times.TMinus).HeaderText("T-").Template("${ReservationDetails.Times.TMinus}");
c.For(i => i.ReservationDetails.TailNumber).HeaderText("Tail#").Template("${ReservationDetails.TailNumber}");
c.For(i => i.ReservationDetails.ACType).HeaderText("A/C Type").Template("${ReservationDetails.ACType}");
c.For(i => i.ReservationDetails.Client).HeaderText("Client").Template("${ReservationDetails.Client}").Width("15%");
c.For(i => i.ReservationDetails.Days).HeaderText("D").Template("${ReservationDetails.Days}");
c.For(i => i.ReservationDetails.Loc).HeaderText("Loc").Template("${ReservationDetails.Loc}");
c.For(i => i.ReservationDetails.Money).HeaderText("$").Template("${ReservationDetails.Money}");
c.For(i => i.FuelStatus).HeaderText("Fuel").Template("${FuelStatus.Notes}");
c.For(i => i.FuelStatus).HeaderText("F").Template("<div><span class='col-md-12 text-center' style='background-color:${FuelStatus.Color};color:#DDDDFF;padding:5px;'>&nbsp;</span></div>").Width("30px");
c.For(i => i.VehicleStatus).HeaderText("V").Template("{{if ${VehicleCount} > 0}}<div><span class='col-md-12 text-center' style='background-color:${VehicleStatus.Color};color:#DDDDFF;padding:5px;'>${VehicleCount}</span></div>{{/if}}").Width("30px");
c.For(i => i.CatererStatus).HeaderText("C").Template("{{if ${CatererCount} > 0}}<div><span class='col-md-12 text-center' style='background-color:${CatererStatus.Color};color:#DDDDFF;padding:5px;'>${CatererCount}</span></div>{{/if}}").Width("30px");
c.For(i => i.HotelStatus).HeaderText("H").Template("{{if ${HotelCount} > 0}}<div><span class='col-md-12 text-center' style='background-color:${HotelStatus.Color};color:#DDDDFF;padding:5px;'>${HotelCount}</span></div>{{/if}}").Width("30px");
c.For(i => i.Services).HeaderText("Services").Template("<div class='container-fluid'><div class='row'>{{each ${Services} }}<div class='col-md-2 col-sm-4 text-center' data-toggle='tooltip' title='${Services.Name}' style='background-color:${Services.Color};color:#DDDDFF;padding:5px;float:left;'><strong>${Services.Abbreviation}</strong></div>{{/each}}</div></div>").Width("225px");
c.For(i => i.CCs).HeaderText("CC").Template("{{each ${CCs}}}<a href='' onClick='${CCs.onClick}'><img title='${CCs.Title}' src='${CCs.Source}' alt='${CCs.AltText}' /></a> {{/each}}");

c.For(i => i.ReservationDetails.Notes).HeaderText("Notes").Template("{{each ${Notes}}}<p>${Notes.NoteType} Notes: ${Notes.Notes}</p>{{/each}}").Width("20%");
})

.Features(features =>
{
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true).Activation(true).AddClientEvent("iggridselectionrowselectionchanging", "onRowSelectedChange");
features.Paging().PageSize(20).PrevPageLabelText(StringResources.String_Previous).NextPageLabelText(StringResources.String_Next);

}).Virtualization(false)
.Width("100%")
.DataSource(Model.Lines.AsQueryable<LiveBoard.LiveBoardLine>().OrderBy(l => l.ReservationDetails.Times.TMinus))
.DataBind()
.Render()

  • 17590
    Offline posted

    Hello Jonathan,

    Thank you for posting in our community.

    I followed the steps that you suggested and created a small sample. However, I was unable to reproduce the behavior that you are describing. I created igGrid and enabled selection feature (as in the code snippet provided). I set the multiple selection to true and handled row selection changing event. On my side the event was correctly fired and rows were selected as expected. For example when I initially select row event is fired. Afterwards, if I want to select one more row I hold the Ctrl key, click the row that I would like to select and it behaves as expected (new row is selected and event is fired)

    I am attaching my sample for your reference. Could you please test my application on your side; whether or not it works as expected could help me identify the root cause for this matter.

    If this is not an accurate demonstration of what you are trying to achieve please feel free to modify my sample and send it back to me for further investigation.

    Also, another suggestion that I can make is try binding the event as mentioned in our documentation using delegate. For instance:

    

    

    

    

    

    


    


    

    //Delegate
    

    $(document).delegate(".selector", "iggridselectionrowselectionchanging", function (evt, ui) {
    

        //return reference to igGridSelection object
    

        ui.owner;
    

        //return reference to igGrid object
    

        ui.owner.grid
    

        //return reference to row object in format {index, element}
    

        ui.row;
    

        //return reference to selected cells object array
    

        ui.selectedCells;
    

        //return reference to fixed rows object array if any
    

        ui.selectedFixedRows
    

        //return true if it is internal trigger or false if it is triggered by user action
    

        ui.manual;
    

    });
    

    
    		

    
    

    

    

    

                              

    I hope you find my information helpful.

    Please let me know if you need any further assistance with this matter.

    igGridSelection.zip