Creating Dynamic Columns in Grid and accessing column details in template

[Neill]

I have a List of Stages, such as Stage 1, Stage 2, Stage 3 etc.

I have a list of devices that have a Start Stage and an End Stage

The list of stages is dynamic

I would like to display a grid with the devices and various stages and in each stage row display if that device is in that stage or not.

See example:

Device	Stage 1	Stage 2	Stage 3
Device 1	X	X
Device 2
Device 3	X	X
Device 4		X	X
Device 5	X  X

I am using a ViewModel:

public class ProgressViewModel

    {

        public int Id { get; set; }

        public string Device{ get; set; }

        public ProgressStage FromStage { get; set; }

        public ProgressStage ToStage { get; set; }

    }

The list of Stages is in a ViewBag

@(Html.EJ().Grid<object>("Grid")

                      .Datasource((IEnumerable<object>)Model)

                      .AllowPaging().PageSettings(page => page.PageSize(20))

                    .Columns(col =>

                    {

                        col.Field("SerialNumber").HeaderText("Serial Number").IsPrimaryKey(true).Add();

                        foreach (var stage in @ViewBag.Stages)

                        {

                            col.Field(stage.Stage).Template("#stageTemplate").Add();

                        }

                    })

    )

I am using the above code for the grid and dynamically adding the Stages, using a template.

In the template code I want to check if the current stage is the FromStage or the ToStage so I can display it?

Is there a better way of doing it? I fnot how do I access the stage tht is passed to template?

<script type="text/x-jsrender" id="stageTemplate">

?????

</script>

Thanks,

Neill

[Mani Sankar Durai]

Hi Neill 

Thanks for contacting Syncfusion support.  

We have analyzed your query and we have prepared a sample based on the requirement that can be available from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134933/ze/EntityCodeFirst847788656 

We found that you are trying to display the template value based on the values of columns in grid (Fromstage and ToStage).  

Please refer the below code example 

@(Html.EJ().Grid<object>("Grid") 

       .Datasource((IEnumerable<object>)ViewBag.dataSource) 

                .AllowPaging() 

                .Columns(col => 

                { 

                    col.Field("OrderID").IsIdentity(true).IsPrimaryKey(true).Width(70).Add(); 

                    col.Field("CustomerID").Width(70).Add(); 

                    col.HeaderText("Stage 1").Width(70).Template("#template").TextAlign(TextAlign.Center).Add(); 

                    col.HeaderText("Stage 2").Width(70).Template("#template1").TextAlign(TextAlign.Center).Add(); 

                   

                }) 

                   

) 

<script type="text/x-jsrender" id="template"> 

 

    {{if EmployeeID == 3 }} 

  <span>value for stage 1</span> 

    {{/if}} 

   

</script> 

<script type="text/x-jsrender" id="template1"> 

    {{if CustomerID == "VINET" || CustomerID == "HANAR" }} 

    <span>value for stage 2</span> 

    {{/if}} 

</script> 

 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Neill]

Thank you for the reply.

The code provided does not show how to dynamically create Columns.

@(Html.EJ().Grid<object>("Grid")

                      .Datasource((IEnumerable<object>)Model)

                      .AllowPaging().PageSettings(page => page.PageSize(20))

                    .Columns(col =>

                    {

                        col.Field("SerialNumber").HeaderText("Serial Number").IsPrimaryKey(true).Add();

                        foreach (var stage in @ViewBag.Stages)

                        {

                            col.Field(stage.Stage).Template("#stageTemplate").Add();

                        }

                    })

    )

<script type="text/x-jsrender" id="emplate"> 

 

    {{if FromStage == "Dynamically_Create_Stage" }} 

            <span>value for dynamic stage</span> 

    {{/if}} 

     {{if ToStage == "Dynamically_Create_Stage" }} 

            <span>value for dynamic stage</span> 

    {{/if}} 

   

</script> 

How do I access the stage passed in?

I hope I am clear on what it is I am trying to do.

[Mani Sankar Durai]

Hi Neill, 

We have checked your query and we have prepared a sample based on your requirement that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134933/ze/EntityCodeFirst1291972731 

In this sample we have created a template column dynamically and thereby we have set the value for the dynamic template column based on the other two column value using helper function.  

Please refer the below code example 

 

@(Html.EJ().Grid<object>("Grid") 

       ... 

                .Columns(col => 

                { 

                    col.Field("OrderID").IsIdentity(true).IsPrimaryKey(true).Width(70).Add(); 

                    col.Field("EmployeeID").Width(70).Add(); 

                    foreach (var stage in @ViewBag.Stages) 

                    { 

                        col.Field(stage).Template("#stageTemplate").Add(); 

                    } 

              

                }) 

 

) 

<script type="text/x-jsrender" id="stageTemplate"> 

    <span>{{:~temp(val)}}</span> 

</script> 

 

<script> 

    var Value = { 

        temp: function (val) { 

            if (this.data.EmployeeID == 3 && this.ctx.prop.field == "stage1") 

                return "stage1 value" 

           if ((this.data.CustomerID == "VINET" || this.data.CustomerID == "HANAR") && this.ctx.prop.field == "stage2") 

               return "stage2 value" 

 

            if ((this.data.EmployeeID == 4) && this.ctx.prop.field == "stage3") 

                return "stage3 value"; 

             

        } 

    }; 

 

    $.views.helpers(Value); 

</script> 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Neill]

Wonderful, I was able to achieve what I wanted with the provided code.

Thank you,

Neill

[Mani Sankar Durai]

Hi Neill, 

We are happy to hear that your problem has been solved.  

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai.