Can someone explain to me the igGrtid event "responsiveModeChanged"?
I am seeing inconsistent results from this event. Meaning, it does not appear to fire at times.
Also, I am seeing calls to "getCurrentResponsiveMode" such as "var mode = $(".selector").igGridResponsive("getCurrentResponsiveMode");" appear to be returning the previous ResponsiveMode vs the actual current mode.
getCurrentResponsiveMode" such as "var mode = $(".selector").igGridResponsive("getCurrentResponsiveMode");" appear to be returning the previous ResponsiveMode vs the actual current mode.
var
mode = $(
".selector"
).igGridResponsive(
"getCurrentResponsiveMode"
);"
I should add this is using 2015.1.
Hello Cecil,
By design this event is fired when the widget detects change in the responsive mode. However, what your igGrid recognizes as a mode change is configurable. By default there are three modes, phone, tablet and desktop. When there is a switch between these modes responsiveModeChanged event is expected to fire.
In regards to your second question getCurrentResponsiveMode method returns the current responsive mode. If you would like to retrieve the current responsive mode in the responsiveModChanged event you could alternatively use the ui argument. For example:
//Delegate $(document).delegate(".selector", "iggridresponsiveresponsivemodechanged", function (evt, ui) { //return the previous responsive mode ui.previousMode; //return the current responsive mode ui.mode; });
//Delegate
$(document).delegate(
,
"iggridresponsiveresponsivemodechanged"
function
(evt, ui) {
//return the previous responsive mode
ui.previousMode;
//return the current responsive mode
ui.mode;
});
Additionally, I made a small sample illustrating when the rsponsiveModeChanged event is fired and what getCurrentResponsiveMode method returns.
I am setting igGrid`s width option to 100%. Afterwards I am resizing the window to make it similar in size to phone or tablet. There is an alert in the event handler showing the new mode when this event is fired.
features: [ { name:"Responsive", responsiveModeChanged: function (evt, ui) { alert("Mode retrieved using ui.mode: " + ui.mode); } } ]
Please have a look at my sample and let me know if you need any further assistance afterwards
Vasya,
I've been down this path already. Unfortunately, what I am seeing is that the event is actually NOT firing at times when I think it should.
Steps to repeat.
1 - start the page with the grid displayed under the phone size so that it begins in in phone mode. The grid should display as expected in phone mode.
2 - Send the browser to full screen size. The grid should display as expected in desktop mode.
3 - Minimize the browser back down to the phone size. The responsiveModeChanged event does not fire.
Thank you for getting back to me.
I tested your suggested steps on my side and everything was working as expected. The event was correctly fired every time the responsive mode was changed.
I made a small video illustrating the behavior on my side and I am attaching it for your reference.
If this is not an accurate demonstration of what happens on your side please feel free to get back to me with more clarifications or with a vide illustrating the behavior on your side.
Looking forward to hearing from you.
That is exactly what I would have expected to happen. But not what I get. Please see the attached video.
Thank you very much for the provided video.
Since I am not able to reproduce this on my side could you please try creating an isolated sample where this issue is reproducible. It is very hard for me to investigate this further without being able to run this and debug on my side. Please remove all the code that is not directly related to the issue and attach the sample in this thread.
This is going to be highly appreciated and will help me find the root cause fir this issue.
Please let me know if you need any further assistance with this matter.