1. Home
  2. Forum
  3. AngularJS
  4. grid show empty rows

grid show empty rows

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

7 Replies
MP Manivannan Padmanaban Syncfusion Team 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. 



MC Manolo Capdevila 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

MP Manivannan Padmanaban Syncfusion Team 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. 


MC Manolo Capdevila 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



MP Manivannan Padmanaban Syncfusion Team 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.  


MC Manolo Capdevila July 4, 2019 09:55 AM UTC

Thanks a  lot!

MP Manivannan Padmanaban Syncfusion Team 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. 


Loader.
Up arrow icon