EnableAdaptiveUI onLoad event

[Rodrigo]

Hi, i'm trying to dynamically set EnableAdaptiveUI onLoad event, but doesn't seems to do any change. Only works when i set the property directly to the Grid object (EnableAdaptiveUI(true)) This is the code i'm using:

function sfIndexOnLoad() {
        var sfGrid = document.getElementById('sfIndex').ej2_instances[0];

        if (ej.base.Browser.isDevice) {
            sfGrid.EnableAdaptiveUI = true;
            document.querySelector('.e-mobile-content').classList.add('e-bigger');
            sfGrid.rowRenderingMode = 'Vertical';
            sfGrid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
            sfGrid.columns.map((e) => {
                e.textAlign = "Left";
            });
        }
        else {
            sfGrid.EnableAdaptiveUI = false;
            sfGrid.rowRenderingMode = "Horizontal";
        }
    }

[Rajapandi Ravi]

Hi Rodrigo,

Greetings from Syncfusion support

Through the Grid load event, you can change the Grid view by changing the enableAdaptiveUI and rowRenderingMode properties dynamically based on your device. We have already discussed about this in our KB which can be accessed from the below link,

KB: https://www.syncfusion.com/kb/12924/how-to-switch-the-javascript-datagrid-in-mobile-and-desktop-views

Regards,

Rajapandi R

[Rodrigo]

Hi Rajapandi, thanks for your quick response. Actually, the JavaScript i used is based in that code. I'm attaching an example project. 

If you use it on Desktop View, it works OK. But if you use it on Responsive, the Sorting and Filtering gives an error. The only way it works OK is if i set the property EnableAdaptiveUI(true) in the Grid object directly.

The rowRenderingMode works ok in the JS script. Also the align.

Like this:

Attachment: SyncfusionMvcApplication2_8fbfd2a1.7z

[Rajapandi Ravi]

Hi Rodrigo,

Greetings from Syncfusion support

Currently we are validating query with your shared information, and we will update you the details on or before 8^th July 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Rodrigo]

Hi Rajapandi, thanks for your reply. Will be waiting this day for updates. 

Regards,

[Rajapandi Ravi]

Hi Rodrigo,

You can show the Grid rows vertically based on the device by using the “rowRenderingMode” property by defining the EnableAdaptive property initially. Please refer to the below code example and API link for more information.

 

<div class="e-mobile-content">

                        @Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).EnableAdaptiveUI(true).AllowSorting().AllowFiltering().Columns(col =>

                       {

                                   .  .  .  .  .  .  .  .

                                   .  .  .  .  .  .  .  .

                       }).AllowPaging().PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Load("onLoad").Render()

                    </div>

 

<script type="text/javascript">

    function onLoad() {

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0]

        if (ej.base.Browser.isDevice) {

            document.querySelector('.e-mobile-content').classList.add('e-bigger');

            gridObj.rowRenderingMode = 'Vertical';

            gridObj.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];

            gridObj.columns.map((e) => {

                e.textAlign = "Left";

            });

        }

        else {

            gridObj.rowRenderingMode = "Horizontal";

        }

    }

 

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1864490871.zip

Regards,

Rajapandi R

[Rodrigo]

Hi Rajapandi, thanks for your response.

I think there's been a confusion in what is the problem, It's not about rowRenderingMode. As I stated in the beginning of the thread, it works well if we set the .EnableAdaptiveUI(true) property hard-coded in the object.

The problem happens when we set Dinamically the enableAdaptiveUI = true or enableAdaptiveUI = false on the onLoad() javascript Event.

Please check the beginning of the thread and example given.

Thanks in advanced for your help.

[Rajapandi Ravi]

Hi Rodrigo,

Thanks for your update

We suggest you enable the adaptive UI initially and based on the browser device condition we can enable/disable the property, because the UI will generate properly only on when we enable the property in the initial definition.

 

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).EnableAdaptiveUI(true).AllowSorting().AllowFiltering().Columns(col =>

                       {

                           .  .  .  .  .  .  .  .

                           .  .  .  .  .  .  .  .

                       }).AllowPaging().PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Load("onLoad").Render()   

 

<script type="text/javascript">

    function onLoad() {

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0]

        if (ej.base.Browser.isDevice) {

            document.querySelector('.e-mobile-content').classList.add('e-bigger');

            gridObj.rowRenderingMode = 'Vertical';

            gridObj.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];

            gridObj.columns.map((e) => {

                e.textAlign = "Left";

            });

        }

        else {

            gridObj.rowRenderingMode = "Horizontal";

            gridObj.EnableAdaptiveUI = false;

        }

    }

 

</script>

 

Please share the details about why you are not enabling the EnableAdaptiveUI property initially, Please share the details with detailed description and share what problem you are facing on enabling initially.

Regards,

Rajapandi R

[Rodrigo]

Hi Rajapandi. Thanks for your reply.

The issue we're facing is that when the EnableAdaptiveUI=true, but the device is a desktop the rendering is wrong. Also, if we use EnableAdaptiveUI=false but the device is a mobile phone the rendering doesn't works properly. That's why we need to set the property dinamically.

Examples:

Desktop device with EnableAdaptiveUI=false. Works ok:

Desktop device with EnableAdaptiveUI=false. Works wrong. The icon text is hidden and the search icon is hidden. When click the magnifier button renders all the way to the left.

Mobile device with EnableAdaptiveUI=true. Works ok.

Mobile device with EnableAdaptiveUI=false. Works Wrong. When filter or sorting button is clicked shows errors.

As you can see, we need to set the EnableAdaptiveUI dinamically according to user's device.

Thanks in advanced for your help.

I'm attaching the code.

Attachment: SyncfusionMvcApplication2_d2b1fab8.7z

[Rajapandi Ravi]

Hi Rodrigo,

Currently we are validating query with your shared information, and we will update you the details on or before 19^th July 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Rodrigo,

We have confirmed and logged this as a bug in the component. So, we have considered ” Dynamically setting EnableAdaptiveUI onLoad event is not working properly” as a defect and logged a report for the same. We will include the defect fix in our upcoming Aug 10^th, 2022, patch release.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback link : https://www.syncfusion.com/feedback/36413/dynamically-setting-enableadaptiveui-onload-event-is-not-working-properly

Regards,

Rajapandi R

[Rodrigo]

Hi Rajapandi, thanks for your update.

Best regards,

[Rajapandi Ravi]

Hi Rodrigo,

Currently, we are working on this and we will update you the details as we promised.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Rodrigo,

Due to some internal complexities, we could not include the fix for (“Dynamically setting EnableAdaptiveUI onLoad event is not working properly”) this issue as promised. We are currently working on it with high priority and will include it in our upcoming weekly patch release scheduled to be rolled out by 24^th Aug 2022.

We apologize for the inconvenience caused and appreciate your patience until then.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Rodrigo,

We have checked your shared sample and we found that you are defining the wrong case sensitive property which is EnableAdaptiveUI instead of enableAdaptiveUI. So, to resolve the problem we suggest you use the correct property and achieve your requirement. Please refer the below code example and sample for more information.

<script type="text/javascript">

 

    function onLoad() {

        var sfGrid = document.getElementById('FlatGrid').ej2_instances[0];

 

        if (ej.base.Browser.isDevice) {

            sfGrid.enableAdaptiveUI = true; //here you should set true to render the grid properly

            document.querySelector('.e-mobile-content').classList.add('e-bigger');

            sfGrid.rowRenderingMode = 'Vertical';

            sfGrid.columns.map((e) => {

                e.textAlign = "Left";

            });

        }

        else {

            sfGrid.rowRenderingMode = "Horizontal";

            sfGrid.enableAdaptiveUI = false;

        }

    }

 

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample734872171.zip

API: https://ej2.syncfusion.com/documentation/api/grid/#enableadaptiveui

Regards,

Rajapandi R

[Rodrigo]

Hi, Rajapandi. It works Great. Thank you very much for your support.

[Rajapandi Ravi]

Hi Rodrigo,

We are happy to hear that our provided solution was helpful to resolve the problem.

Please get back us if you need further assistance

Regards,

Rajapandi R