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.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119945 Aug 18,2015 01:00 AM Aug 28,2015 04:50 AM LightSwitch HTML 3
loading
Tags: Grid
Thomas Steschulat
Asked On August 18, 2015 01:00 AM

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 [Syncfusion]
Replied On August 19, 2015 01:05 PM

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
Replied On August 27, 2015 01:26 AM

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 [Syncfusion]
Replied On August 28, 2015 04:50 AM

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.

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.

Warning Icon 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.Close Icon

;