many ProgressBars in one WidgetColumn

  1. #1

    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:

    Click image for larger version. 

Name:	Capture.PNG 
Views:	101 
Size:	11.7 KB 
ID:	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

    
    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 help



    Update 1:

    I solve my problem with TemplateColumn. i there any simpler solution?
    Last edited by misaqsaadat; Mar 07, 2018 at 3:10 PM.

Similar Threads

  1. [CLOSED] Grid WidgetColumn, Pie and Bar colors
    By ifminfomaster in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 22, 2016, 10:25 PM
  2. Replies: 3
    Last Post: Jan 27, 2016, 4:24 PM

Posting Permissions