We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125269 Aug 4,2016 03:59 AM Aug 9,2016 10:41 AM JavaScript 5
loading
Tags: ejGrid
Milos
Asked On August 4, 2016 03:59 AM

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 [Syncfusion]
Replied On August 5, 2016 08:34 AM

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
Replied On August 5, 2016 09:23 AM

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 [Syncfusion]
Replied On August 8, 2016 09:11 AM

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
Replied On August 8, 2016 11:57 AM

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 [Syncfusion]
Replied On August 9, 2016 10:41 AM

Hi Milos, 

Thank you for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;