Problem with Column width in Grid when NOT using a popup for adding a Datarecord

[Thomas Steschulat]

Hello,

i have a strange behavior in the LS HTML Grid when adding a datarecord in fullscreen NOT dialog/popup mode.

please see this video

Here are the settings that i use for the grid:

myapp.FirmenUebersicht.FirmenUebersicht_render = function (element, contentItem)

{

  // Write code here.

  var mygridname = 'Firmenuebersicht';

  var itemTemplate = $("<div></div>").attr('id', mygridname)

  // Append the div element to screen 

  itemTemplate.appendTo($(element));

  contentItem.value.oncollectionchange = function ()

  {

    if (itemTemplate.hasClass('e-grid'))

    {

      itemTemplate.ejGrid('destroy');

    }

    var first = contentItem.children[0], fieldname = [];

    for (i = 0; i < first.children.length; i++)

    {

      fieldname[i] = { field: first.children[i].bindingPath.replace("data.", ""), headerText: first.children[i].bindingPath.replace("data.", "").replace(".", " ") };

    }

    fieldname[i] = {

      headerText: "Aktionen",

      commands: [

          { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-edit", click: "editclick", gridname: mygridname, editscreenname: "AddEditFirma" } },

          { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-delete", click: "deleteclick", gridname: mygridname } }

      ],

      isUnbound: true

    };

    //Rendering the Grid Control

    itemTemplate.ejGrid(

        {

          dataSource: contentItem.value.data,

          locale: "de-DE",

          allowPaging: true,

          allowSorting: true,

          allowMultiSorting: true,

          allowResizing: true,

          allowGrouping: true,

          allowReordering: true,

          allowTextWrap: true,

          allowResizeToFit: true,

          enablePersistence: true,

          columns: fieldname,

          toolbarClick: function (e)

          {

            var gridObj = $("#Firmenuebersicht").ejGrid('instance')

            gridObj.exportGrid = gridObj["export"];

            if (e.itemName == "Excel Export")

            {

              gridObj.exportGrid('../api/GridExporting/ExcelExport')

              e.cancel = true;

            }

            else if (e.itemName == "Word Export")

            {

              gridObj.exportGrid('../api/GridExporting/WordExport')

              e.cancel = true;

            }

            else if (e.itemName == "PDF Export")

            {

              gridObj.exportGrid('../api/GridExporting/PdfExport')

              e.cancel = true;

            }

          },

          toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] }

        });

  }

}

Please help

Kind Regards

Thomas

[Gowthami V]

Hi Thomas,

Thanks for using Syncfusion products.

We have analyzed your issue and we are able to reproduce the reported issue in the below scenario.

1.       Enable the “allowResizeToFit” property of the grid.

2.       As in your video we have shown the AddEditTemplate screen dynamically in External button click event by using below code snippet in which we have assigned a new data to the screen using "new myapp.Table1Item()" .

itemTemplate1.ejButton({

            text: "Click",

            click: function (args) {

                // Showing the screen AddEditTemplate

                myapp.showScreen("AddEditTable1Item", null, {

                    beforeShown: function (addScreen) {

                        var ord = new myapp.Table1Item();

                        addScreen.Table1Item = ord;

                    }

                });

            }

        });

While using the above code snippet, the method “oncollectionchange” will be invoked and in which, by default we have destroyed the grid(When grid screen created using template). Due to this reason the grid header is misaligned.

If you are using the code snippet as in the above snippet to show the “AddEditTemplate” screen then please put the grid rendering code directly in the “FirmenUebersicht_render” method instead of “oncollectionchange” method to avoid the reported issue.

Please refer the below code snippet.

myapp.Table1ItemsGridEditingTemplate.FirmenUebersicht_render = function (element, contentItem) {

              if (itemTemplate.hasClass('e-grid'))

                  {

                  itemTemplate.ejGrid('destroy');

                  }

                  var first = contentItem.children[0], fieldname = [];

            . . . .

            . . . .

            . . . .

            //Rendering the Grid Control

            itemTemplate.ejGrid(

                {

                    dataSource: dataManger,

                    allowPaging: true,

                    allowSorting: true,

                    allowMultiSorting: true,

                    allowResizing: true,

                    allowGrouping: true,

                    allowReordering: true,

                    allowTextWrap: true,

                    allowResizeToFit: true,

                    enablePersistence: true,

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] },

                    columns: fieldname

                });

        }

Please try the above suggestion and if you are still facing the same issue ,then please share us the code snippet that you have used for showing the AddEditTemplate screen externally and the provided information will help us to analyze the issue and update you the response as early as possible.

Please let us know if you have any queries.

Regards,

Gowthami V.

[Thomas Steschulat]

Hello Gowthami,

i think i have done something wrong... 

When i use your code snippet no data and no colum headers are shown in the grid. The grid is "empty"...

 

my code to test our suggestion looks like this:

myapp.FirmenUebersicht.AddFirma_Tap_execute = function (screen)

{

  // Write code here.

  myapp.showScreen("AddEditFirma", null, {

    beforeShown: function (addEditScreen)

    {

      addEditScreen.Firma = new myapp.Firma();

    },

    afterClosed: function (addEditScreen, navigationAction)

    {

      var gridObj = $("#Firmenuebersicht").ejGrid('instance')

      gridObj.refreshContent(true);

    }

  });

};

myapp.FirmenUebersicht.FirmenUebersicht_render = function (element, contentItem)

{

  // Write code here.

  var gridname = "Firmenuebersicht";

  var editscreenname = "AddEditFirma";

  var itemTemplate = $("<div></div>").attr('id', gridname);

  // Append the div element to screen 

  itemTemplate.appendTo($(element));

  if (itemTemplate.hasClass('e-grid'))

  {

    itemTemplate.ejGrid('destroy');

  }

  var first = contentItem.children[0], fieldname = [];

  for (var i = 0; i < first.children.length; i++)

  {

    fieldname[i] = { field: first.children[i].bindingPath.replace("data.", ""), headerText: first.children[i].bindingPath.replace("data.", "").replace(".", " ") };

  }

  fieldname[i] = {

    headerText: "Aktionen",

    commands: [

        { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-edit", click: "wiutils.editclick", gridname: gridname, editscreenname: editscreenname } },

        { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-delete", click: "wiutils.deleteclick", gridname: gridname } }

    ],

    isUnbound: true,

    width: 70

  };

  //Rendering the Grid Control

  itemTemplate.ejGrid(

  {

    dataSource: contentItem.value.data,

    locale: "de-DE",

    allowPaging: true,

    allowSorting: true,

    allowMultiSorting: true,

    allowResizing: true,

    allowGrouping: true,

    allowReordering: true,

    allowTextWrap: true,

    allowResizeToFit: true,

    //enablePersistence: true,

    columns: fieldname,

    toolbarClick: function (e)

    {

      var gridObj = $("#" + gridname).ejGrid('instance');

      gridObj.exportGrid = gridObj["export"];

      if (e.itemName == "Excel Export")

      {

        gridObj.exportGrid('../api/GridExporting/ExcelExport');

        e.cancel = true;

      }

      else if (e.itemName == "PDF Export")

      {

        gridObj.exportGrid('../api/GridExporting/PdfExport');

        e.cancel = true;

      }

    },

    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PdfExport] }

  });

}

When i open the screnn it looks like this

Regards

Thomas

[Gowthami V]

Hi Thomas,

We have analyzed your issue and based on your code snippet we have modified the solution and attached the sample below.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119945/ze/local-lightswitch-334243869

While rendering the grid in “FirmenUebersicht_render” method , the data source of the grid is not set properly and so the mentioned issue occurred.

In the above sample we have reset the data source of the grid by passing the screen data to the “dataSource” method and columns in the “columns” method of the grid under “oncollectionchange” method.

myapp.FirmenUebersicht.AddFirma_Tap_execute = function (screen) {

    // Write code here.

    myapp.showScreen("AddEditFirma", null, {

. . . .

. . . .

        afterClosed: function (addEditScreen, navigationAction) {

/*flag setting for preventing reset data source after saving the data*/

            window.isOpen = true;

            var gridObj = $("#Firmenuebersicht").ejGrid('instance')

            gridObj.refreshContent(true);

        }

    });
};

myapp.FirmenUebersicht.FirmenUebersicht_render = function (element, contentItem)

{

    // Write code here.

    var gridname = "Firmenuebersicht";

    var editscreenname = "AddEditFirma";

    var itemTemplate = $("<div></div>").attr('id', gridname);

    . . . .

    . . . .

    itemTemplate.appendTo($(element));

Remove the below commented code.no need to destroy the grid

     //if (itemTemplate.hasClass('e-grid')) {

    //    itemTemplate.ejGrid('destroy');

    //}

     . . . .

     . . . .

itemTemplate.ejGrid(

   {

       dataSource: contentItem.value.data,

     . . . .

     . . . .
  });
}

contentItem.value.oncollectionchange = function () {

       

        var gridObj;

/*Preventing reset data source after initial rendering*/

        if (window.isOpen) return;

        if (itemTemplate.hasClass('e-grid')) {

            gridObj = itemTemplate.ejGrid('instance');

        }

/*Resetting the datasource and columns */

        if (gridObj) { /*Public method to update columns and dataSource*/

            gridObj.dataSource(contentItem.value.data);

            gridObj.columns(gridObj.model.columns);

          

        }

       
    }

Please try the above snippet and let us know if you have any queries.

Regards,
Gowthami V.