Grid does not expand (shrink) columns in firefox but works fine in chrome

[Milos]

Hi,

I have durandal dialog and one grid in it. My huge problem is that grid does not want to expand columns in Firefox and IE in localhost (in Chrome it works) and in all browser when I publish project on my server.

I tried to fix this with one simple css rule:

         .e-table {
                width: 100% !important;
          }

But after this, firefox and internet explorer needed 30-60s to render grid, in normal situation it takes 1s. One CSS rule slow down everything, except chrome.

When dialog opens request to the service starts and when service response, I fill data source with the data.
Code is below and attached images shows how it is rendered in browser.

I do not what I am missing here ?

view.html

<div class="dialog-container">
    <div class="grid-container" data-bind="attr: { id: gridId }, ejGrid: ejGrid"></div>
</div>

viewmodel.html

define(['durandal/system', 'knockout', 'jquery', 'services/service', 'helpers/utils', 'web/ej.button.min', 'web/ej.dropdownlist.min', 'web/ej.maskedit.min', 'web/ej.grid.min', 'common/ej.widget.ko.min'], function (system, ko, $, service, utils) {

    var ctor = function () {

    };

    var selectedRow;
   
    ctor.prototype.getView = function () {
        return 'dialogs/searchlookup/view'
    }

    ctor.prototype.activate = function (settings) {
        var self = this;

        self.gridId = system.guid().replace(/-/g,"");

        function updateGridData() {
            service.getData().then(
                    function (data) {
                        self.ejGrid.dataSource(data);
                    },
                    function (error) {
                        console.log("Error: " + error);
                    }
                );
        }

        var gridColumns = utils.getGridColumns();
        updateGridData();

        var grid = {
            dataSource: ko.observableArray([]),
            columns: gridColumns,
            allowSorting: true,
            allowScrolling: true,
            scrollSettings: { width: '100%', height: 324 },
            rowSelected: function (args) {
                selectedRow = args.data;
            }
        }
        self.ejGrid = grid;
    };
   
    return ctor;
});

Regards,
Milos

Attachment: Images_33804c00.zip

[Venkatesh Ayothi Raman]

Hi Milos, 

Thank you for using Syncfusion products. 

We are unable to reproduce the issue at our end. You have mentioned as “I publish project on my server” so can you please share the hosted link for us. It would be helpful for us to reproduce the issue and provide the appropriate solution. 

Regards, 

Venkatesh Ayothiraman. 

[Milos]

Hi Venkatesh

This:  https://xrmservices.vde.com/calc/20160802/index.html

 is solution which has shrunken  columns in all browsers.

This:   https://xrmservices.vde.com/calc/20160803/index.html

is the solution which I have fixed with:

       .e-table {

                width: 100% !important;

          }

But that solution with only this css rule destroys browser, slow down Firefox and IE until death :)

Grid appears when you click on magnifier on the right side (for example: 'Choose client' field, the first of that type). That kind of field should load grid in dilaog.

Just for your information, magnifier  does not work in all fields but in most of them works.

Regards,

Milos

[Venkatesh Ayothi Raman]

Hi Milos, 

We went through the link that you have shared. The cause of the issue is Grid element width is not set on initial rendering while applying the scroller. So, we suggest you to enable the scroller after Dialog opens or rendering the Grid after dialog opens. 

You can render the scroller dynamically like as follows, 

 

. . . 

 

//Render the scroller by using setModel 

 

$(".e-grid").ejGrid('option', { allowScrolling: true, scrollSettings: { height: 150, width: "100%" } }); 

 

.  .  . 

Regards, 

Venkatesh Ayothiraman. 

[Milos]

Hi Venkatesh,

That solve my problem.

In case that I use durandal, I did it in 'compositionComplete' function of my dialog.

ctor.prototype.compositionComplete = function (settings) {

        var self = this;

        self.ejGrid.allowScrolling = true;

        self.ejGrid.scrollSettings = { width: '100%', height: 324 };

    }

Regards,

Milos

[Venkatesh Ayothi Raman]

Hi Milos, 

Thank you for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.