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. Image for the cookie policy date

Dynamic Matrix

i would like to generate a dynamic grid as attached in the picture in asp.net
with Sizes(horizontally) and Colors(vertically). all these values are dynamically
generated @ run time.

user can choose a combination of color and Size by clicking on the checkbox.
to select all the sizes across all colors user needs to click on select all colors and Sizes(marked in blue)

User can choose all sizes of particular color by choosing the check box @ the last column
(marked in purple) CW:2.
and while making the save operation how would decide which color and size has been selected /deselected.

how can this be achieved ?

Attachment: Color_SizeMatrix_3302d73e.zip

6 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team November 10, 2016 12:11 PM UTC

Hi Ashok, 

Thanks for contacting Syncfusion support. 

According to your screenshot, we suspect that you are expecting Pivot Grid in your application. So, please confirm with the below online sample that you are expecting this type of grid in your sample? 

Prasanna Kumar N.S.V 

AK Ashok Kumar November 10, 2016 01:36 PM UTC

yes, something like this online sample you shown. but instead of numbers, we need to have check boxes wherever applicable. Just in case if the color do not have its own size then that cell is not editable and no checkbox.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 11, 2016 01:22 PM UTC

Hi Ashok, 

We have analyzed your query and we  does not have support for grid layout as per your requirement. We will provide you the solution using normal Table with Layout on  14th November 2016. 



PK Prasanna Kumar Viswanathan Syncfusion Team November 14, 2016 12:59 PM UTC

Hi Ashok, 

We regret for the inconvenience.  

Query: “Dynamic Matrix.” 

As per your requirement we creating a sample with normal Table with mentioned layout. But we face several issues in the sample regarding your requirement. So, we have created custom sample task for that query and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
Prasanna Kumar N.S.V 

SA sahana April 4, 2017 04:54 AM UTC

I have similar requirement,Can you guide me please?


PK Prasanna Kumar Viswanathan Syncfusion Team April 5, 2017 12:09 PM UTC

Hi Jayshri,  
We have already created a custom sample based on this requirement. 
Find the code example:  
<ej:Grid ID="Grid1"    AllowPaging="True" ShowStackedHeader="True"                runat="server">  
           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="normal"></EditSettings>  
              <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>  
                <ej:Column Field="TrimItemCode" HeaderText="trim Item Code"   TextAlign="Right" Width="90" />  
                <ej:Column Field="S" HeaderText="S size"   Width="100"  />  
                 <ej:Column Field="XL" HeaderText="XL size"     Width="100"  />  
                 <ej:Column Field="M" HeaderText="M size"   Width="100"  />  
                 <ej:Column Field="XXL" HeaderText="XXL size"   Width="100"  />  
                  <ej:Column Field="Column" Template="True" TemplateID="#columnTemplate"  HeaderText="Last column"  Width="100"  />  
                        <ej:StackedHeaderColumn Column="S,XL,M,XXL,Column" HeaderText="Order Details" />  
      <script type="text/x-jsrender" id="columnTemplate">  
             {{if Verified}}  
                <input type="checkbox" id="Verified" name="Verified" checked="checked" class="e-field e-checkbox"style="width:30px" />  
                <input type="checkbox" id="Verifd" name="Verified" class="e-field e-checkbox" style="width:30px" />  
We have grouped the size column through ‘stackedHeader’ property of Grid.     
Please find the online sample browser link for Stacked Header column.  

Server Code:  
private void BindDataSource()  
            order.Add(new Orders("CW:1/white grey", false, false, false, true, false));  
            order.Add(new Orders("CW:2/Copper tin", true, true, true, true, true));  
            order.Add(new Orders("CW:3/White tin", false, false, true, false, false));  
            this.Grid1.DataSource = order;  
        public class Orders  
            public Orders()  
            public Orders(string Trimitemcode, bool s, bool xl, bool m, bool xxl, bool column)  
                this.TrimItemCode = Trimitemcode;  
                this.S = s;  
                this.XL = xl;  
                this.M = m;  
                this.XXL = xxl;  
                this.Column = column;  
            public string TrimItemCode { get; set; }  
            public bool S { get; set; }  
            public bool XL { get; set; }  
            public bool M { get; set; }  
            public bool XXL { get; set; }  
            public bool Column { get; set; }  

Please find UG Link for your reference.  

If you want to add the records to the grid based on the selection ,please use the addRecord Method. 
If we misunderstood your requirement then could you please share more details about your requirement and we will proceed with your information.  
Prasanna Kumar N.S.V 

Live Chat Icon For mobile
Up arrow icon