Vertical Grid

Hi,

I would like to know if it's possible to create a vertical grid with heading columns in left.



thanks !

7 Replies

VA Venkatesh Ayothi Raman Syncfusion Team November 7, 2017 12:16 PM UTC

Hi Arnaud, 

Thanks for using Syncfusion products. 

We have created the sample based on your requirement that can be downloaded from below link, 
 


In the above sample, we have modified the “processResponse” method of JsonAdaptor to modify the datasource, passed to Grid. The Modified datasource in ProcessResponse populate Grid like Property Grid. Please refer to the following code example.
 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
         
        .AllowPaging() 
         
        ) 
 
 
<script type="text/javascript"> 
     
    ej.JsonAdaptor.prototype.processResponse = function (data, ds, query, xhr) { 
         
           var arraylist = data.result; 
           var prptData = []; var temp = {}; var count = 0; 
           for (var i = 0; i < arraylist.length; i++) { 
 
               for (var key in arraylist[i]) { 
                   if (!i) { 
                       temp[key] = {}; 
                       temp[key]["key" + count] = arraylist[i][key] 
                   } 
                   else 
                       temp[key]["key" + count] = arraylist[i][key]; 
 
               } 
 
               count++; 
           } 
           for (var key in temp) { 
               var tmpData = { ColKey: key }; 
               $.extend(tmpData, temp[key]); 
               prptData.push(tmpData); 
           } 
           data.result = prptData; 
           return data; 
       } 
 
</script> 
 
 


And we have hidden default Grid header using “e.gridheader” class. Please find the following code example

 
<style> 
    .e-gridheader { 
        display: none; 
    } 
 
    . .  . 
</style> 

Regards, 
Venkatesh Ayothiraman. 



AB Arnaud--Mozdzer Bastien November 8, 2017 01:31 PM UTC

Hi,

It works but the problem is to do inline editing for the column.

Can we edit a column (or a cell) without problem?



VA Venkatesh Ayothi Raman Syncfusion Team November 9, 2017 12:26 PM UTC

Hi Arnuad, 

Thanks for the update. 

Editing feature is not feasible in vertical header aligned Grid. We have provided the vertical header aligned Grid as a workaround in previous update. So, currently don’t have a support for Editing the vertical aligned Grid and we have considered this “To show Grid like all values of a field/Property in single row” as feature and logged the Epic task for this. This feature will be implemented in any of our upcoming release. 


Regards, 
Venkatesh Ayothiraman. 



AB Arnaud--Mozdzer Bastien November 10, 2017 10:59 AM UTC

Hi,

Thank you for your answers.



RP Ranjani Prabhakaran Syncfusion Team November 13, 2017 07:15 AM UTC


Hi Arnaud, 

Please let us know if you need any further assistance. 

Regards, 

Ranjani 



JC John Chellah June 13, 2019 06:17 AM UTC

Hey everyone,

is there an update since 2017 for the feature to edit cells in a vertical grid?

I have the same problem.

Thanks


MP Manivannan Padmanaban Syncfusion Team June 14, 2019 12:14 PM UTC

Hi John, 

Thanks for contacting Syncfusion Support. 

We are considering the feature based on the customer request count. Since it’s a unique feature, so we have not implemented it. And also, we don’t have the plan to implement this feature in our future release because we have moved to the next generation JavaScript product - Essential JS 2 

Regards, 
Manivannan Padmanaban. 


Loader.
Up arrow icon