many ProgressBars in one WidgetColumn

hello everybody
here's my problem

i am trying to add three progress bars to each column of a grid.
i want something like this:

Attachment 25118

now i have two questions:

1- i try adding a Contained inside a widgetColumn. and add three ProgressBarWidgets to it. how can i bind Data to each progressBar? it has no dataIndex. (data is passed to container )

2- i think maybe progressbar is not best component i can use for my problem. is there anything else i can use to achieve my goal? i think i should work on changing width (or flex) of each progressbar for complete my job.

here's my cshtml code

Code:

---


X.GridPanel().Store(X.Store()
            .Proxy(X.AjaxProxy()
            .Url(Url.Action("GetData"))
            .Reader(X.JsonReader()
            .RootProperty("data")))
                        .Model(X.Model()
            .IDProperty("Id")
            .Fields(
                    X.ModelField().Name("OperationType").Type(ModelFieldType.String),
                    X.ModelField().Name("Name").Type(ModelFieldType.String),
                    X.ModelField().Name("StatusType").Type(ModelFieldType.String),
                    X.ModelField().Name("ProgressBar")
                              )
                          )
                      )
                    .ColumnModel(
                          X.Column().Text("Campaign").DataIndex("Name").Flex(1),
                          X.Column().Text("Operation").DataIndex("OperationType").Flex(1),
                          X.WidgetColumn().Text("Status").DataIndex("ProgressBar").Widget(x =>
                          {
                              x.Add(X.Container().Layout(LayoutType.HBox).Items(y =>
                              {
                                  y.Add(X.ProgressBarWidget().RippleString("blue"));
                                  y.Add(X.ProgressBarWidget().RippleString("green"));
                                  y.Add(X.ProgressBarWidget().RippleString("red"));
                              }));
                          }).Flex(2),
                          X.DateColumn().Text("start date").DataIndex("StartDate").Flex(1)


                      )

---

and here's how my data is posted to grid store :

Code:

---


{ 
  "data":[ 
      { 
        "Id":0,
        "Name":"Campaign0",
        "OperationType":"Uploaded",
        "StatusType":"NotStarted",
        "StartDate":"2018-03-07T18:17:58.0280403",
        "Progress":{ 
            "Successful":10,
            "Failed":70,
            "Pending":20
        },
        "ProgressBar":[ 
            0.1,
            0.7,
            0.2
        ]
      },
      { 
        "Id":1,
        "Name":"Campaign1",
        "OperationType":"Install",
        "StatusType":"InProgress",
        "StartDate":"2018-03-07T18:17:58.0280403",
        "Progress":{ 
            "Successful":50,
            "Failed":10,
            "Pending":40
        },
        "ProgressBar":[ 
            0.5,
            0.1,
            0.4
        ]
      },
      { 
        "Id":2,
        "Name":"Campaign2",
        "OperationType":"Update",
        "StatusType":"Finished",
        "StartDate":"2018-03-07T18:17:58.0280403",
        "Progress":{ 
            "Successful":90,
            "Failed":10,
            "Pending":0
        },
        "ProgressBar":[ 
            0.9,
            0.1,
            0.0
        ]
      },
      { 
        "Id":3,
        "Name":"Campaign3",
        "OperationType":"Remove",
        "StatusType":"Canceled",
        "StartDate":"2018-03-07T18:17:58.0280403",
        "Progress":{ 
            "Successful":10,
            "Failed":80,
            "Pending":10
        },
        "ProgressBar":[ 
            0.1,
            0.8,
            0.1
        ]
      },
      { 
        "Id":4,
        "Name":"Campaign4",
        "OperationType":"Remove",
        "StatusType":"Canceled",
        "StartDate":"2018-03-07T18:17:58.0280403",
        "Progress":{ 
            "Successful":20,
            "Failed":80,
            "Pending":0
        },
        "ProgressBar":[ 
            0.2,
            0.8,
            0.0
        ]
      }
        ]
}

---

sorry of my English and thank for your help



Update 1:

I solve my problem with TemplateColumn. i there any simpler solution?