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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

grid show empty rows

Thread ID:

Created:

Updated:

Platform:

Replies:

145488 Jun 25,2019 08:19 AM UTC Jul 4,2019 10:30 AM UTC AngularJS 7
loading
Tags: ejGrid
Manolo Capdevila
Asked On June 25, 2019 08:19 AM UTC

Hi,

In grid, when I define e-columns, it shows rows with empty data.

If I pass the columns as parameter works fine, (but I can't format date values), anyway I prefer define columns with tags

I attach an example

Thanks


Attachment: angularvs2013startermaster_5c37178c.zip

Manivannan Padmanaban [Syncfusion]
Replied On June 26, 2019 09:01 AM UTC

Hi Manolo, 

Thanks for contacting Syncfusion Support. 

Query: In grid, when I define e-columns, it shows rows with empty data. 

We are able to reproduce the reported issue at our end while using the shared sample. On further validating we could see that at the time of grid rendering in the column definition div’s are closed with spaces. Due to this, the reported issue will occur.  

To avoid the issue we suggest you to close the div’s without space. Refer the below code, 


<div id="gridSolicitudes2" ej-grid 
         e-datasource="vm.data"          
         e-allowselection="true" 
         e-isResponsive="true" 
         e-allowpaging="true" e-load="load"> 
        <div e-columns> 
            <div e-column e-field="NumeroOrden"></div> 
            <div e-column e-field="FechaCreacion" e-headertext="F. Creación" e-format="{0:dd/MM/yyyy}" ></div> 
            <div e-column e-field="FechaValidez" e-headertext="F. Validez"></div> 
        </div> 
    </div> 


And also, we could able to understand that you want to define the columns tag in order to set the format to the date column. But from the share code, we could see that the date column dataSource value is defined as string instead of proper date object. So, the date format won’t work in this case. 

In order to achieve this, we suggest you to change the date column dataSource as dateObject  using new Date conversion in the load event of ejGrid. Kindly refer the below code example, 

<div id="gridSolicitudes2" ej-grid 
         e-datasource="vm.data"          
         e-allowselection="true" 
         e-isResponsive="true" 
         e-allowpaging="true" e-load="load"> 
        <div e-columns> 
            <div e-column e-field="NumeroOrden"></div> 
            <div e-column e-field="FechaCreacion" e-headertext="F. Creación" e-format="{0:dd/MM/yyyy}" ></div> 
            <div e-column e-field="FechaValidez" e-headertext="F. Validez"></div> 
        </div> 
    </div> 
 
    <script> 
        function load(args) { 
            for (var i = 0; i < this.model.dataSource().length; i++) { 
                this.model.dataSource()[i].FechaCreacion = new Date(this.model.dataSource()[i].FechaCreacion); // convert the data to dateobject using field name 
            } 
 
        } 
 
    </script> 

Note: If you have give proper date object value to the date column, then there is no need of above new Date conversion. 

Output: 
 

For your convenience we have modified the provided sample, refer the below link. 

Kindly get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 



Manolo Capdevila
Replied On July 2, 2019 12:17 PM UTC

Hi,

Thanks for your answer.

But, anothers doubts

1. How can I init the grid with row select by Id?
2. How can I init the grid with a determinate filter?

Thanks

Manivannan Padmanaban [Syncfusion]
Replied On July 3, 2019 05:56 AM UTC

Hi Manolo, 

Thanks for the update. 

Query 1. How can I init the grid with row select by Id? 
 
From the shared query, we are able to understand that you want to select the row based on the Id (i.e. based on row data). Using selectedRowIndex property of ejGrid in rowDataBound event we have achieved your requirement. Refer the below code example, 
 
<body ng-controller="PhoneListCtrl"> 
    <div id="Grid" ej-grid e-datasource="data" e-rowdatabound="rowdatabound" e-allowpaging="true" e-allowfiltering="true" e-filtersettings="filterType"> 
        <div e-columns> 
            <div e-column e-field="OrderID"></div> 
            .. 
        </div> 
    </div> 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
            .controller('PhoneListCtrl', function ($scope) { 
                $scope.data = window.gridData; 
……………………………. 
                $scope.rowdatabound = function (args) { 
                    if (args.data.OrderID == 10248) { //use your custom condition here. 
                        var index = $(args.row).index(); 
                        $("#Grid").ejGrid({ selectedRowIndex: index }); // use your grid id here. 
                    } 
                } 
            }); 
 
    </script> 
 
 
Query 2. How can I init the grid with a determinate filter? 
 
From the above query, we are able to understand that you want to achieve the initial filtering. Using filteredColumns property of filterSettings we can achieve the initial filtering. Refer the below code example, 

<body ng-controller="PhoneListCtrl"> 
    <div id="Grid" ej-grid e-datasource="data" e-rowdatabound="rowdatabound" e-allowpaging="true" e-allowfiltering="true" e-filtersettings="filterSettings"> 
        <div e-columns> 
            ……………. 
            <div e-column e-field="ShipCity"></div> 
        </div> 
    </div> 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
            .controller('PhoneListCtrl', function ($scope) { 
                $scope.data = window.gridData; 
                $scope.filterSettigns = { filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "startswith", value: "re", predicate: "and", matchCase: true }] }; 
                ……………………… 
            }); 
 
    </script> 

Also, refer the below link for sample. 

Kindly get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 


Manolo Capdevila
Replied On July 3, 2019 07:38 AM UTC

Thanks for your answers,

but in question 2 I want to say, load a grid filtered intially,

For example, in your example, set the filter Shipcity in Reims in first load.

Thanks



Manivannan Padmanaban [Syncfusion]
Replied On July 3, 2019 12:13 PM UTC

Hi Manolo, 

Thanks for the update. 

Query: For example, in your example, set the filter Shipcity in Reims in first load. 

We are able to understand that, you want to show the Shipcity Reims record alone in the grid. We can achieve this using filter operator “equal”. Refer the below code example, 

<div id="Grid" ej-grid e-datasource="data" e-rowdatabound="rowdatabound"  e-allowpaging="true" e-allowfiltering="true" e-filtersettings="filterType" > 
          <div e-columns> 
             …………………….. 
          </div> 
     </div> 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
                      .controller('PhoneListCtrl', function ($scope) { 
                          $scope.data = window.gridData; 
                $scope.filterType = {  filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "equal", value: "Reims", predicate: "and", matchCase: true }] }; 
                      ………………………… 
            } 
            }); 
    
  </script> 


If we misunderstood your query, kindly get back to us with details explanation. 

Regards, 
Manivannan Padmanaban.  


Manolo Capdevila
Replied On July 4, 2019 09:55 AM UTC

Thanks a  lot!

Manivannan Padmanaban [Syncfusion]
Replied On July 4, 2019 10:30 AM UTC

Hi Manolo, 

Thanks for the update. 

Kindly get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon