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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic Matrix

Thread ID:





127334 Nov 9,2016 07:36 AM UTC Apr 5,2017 12:09 PM UTC ASP.NET Web Forms 6
Tags: Grid
Ashok Kumar
Asked On November 9, 2016 07:36 AM UTC

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 

Ashok Kumar
Replied On 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.

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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. 



Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 

Replied On April 4, 2017 04:54 AM UTC

I have similar requirement,Can you guide me please?


Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 


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

or the page will be automatically redirected to 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