Mar 07, 2018, 2:04 PM
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:
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
Update 1:
I solve my problem with TemplateColumn. i there any simpler solution?
here's my problem
i am trying to add three progress bars to each column of a grid.
i want something like this:
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
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 :
{
"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 helpUpdate 1:
I solve my problem with TemplateColumn. i there any simpler solution?
Last edited by misaqsaadat; Mar 07, 2018 at 3:10 PM.