[Solved] Binding to Grouped Data

[Jako]

Hi everyone

I am trying to get a line model, with grouped line items. I am not getting an error, but its say undefined on the labels etc. I am pretty sure I am 99% there.
View:
[code]
@model NBSDashboard.Models.StoreReportNominalResultModel
<div class="centered">
@(Html.Kendo().Chart(Model.LineChartDataDecimalList)
.Name("ASPLineChart")
.DataSource(dataSource => dataSource
.Read(read => read.Action("NominalStoreLineChartData", "Dashboard", new { valueType = 2, storeId = Model.Stores.SelectedStoreId, showChart = Model.ShowASP }))
.Group(group => group.Add(model => model.Element))
.Sort(sort => sort.Add(model => model.TransactionDate).Ascending())
)
.Series(series =>
{
series.Line(model => model.Value)
.Name("#= group.value #");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels
.Format("R {0}")
.Skip(2)
.Step(2)
)
)
.CategoryAxis(axis => axis
.Categories(model => model.TransactionDate)
)
)
</div>
[/code]
Controller:
[code]
        public ActionResult NominalStoreLineChartData([DataSourceRequest] DataSourceRequest request, int valueType, int storeId, bool showChart)
        {
            if (showChart)
            {
                        return Json(LineChartDecimalValue(valueType, storeId).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
            else
                return null;
        }

        /// <summary>
        /// Generate DataSet For Nominal Report Line Chart With Decimal Values
        /// </summary>
        private IEnumerable<LineChartDataDecimal> LineChartDecimalValue(int valueType, int storeId)
        {
            var dt = _bookscanService.GetNominalStoreLineChartData(1000, storeId, valueType);

            return (from DataRow row in dt.Rows
                    select new LineChartDataDecimal
                    {
                        Element = row["Element"].ToString(),
                        TransactionDate = DateTime.Parse(row["TransactionDate"].ToString()),
                        Value = decimal.Parse(row["Value"].ToString()),
                    }).ToList();
        }
[/code]
I have attached some sample data. I am expecting to see the the Value line over the TransactionDate period, grouped by each Element?

The actual model used, doesn't carry the information though? Its just a representation of how the data looks?

I am confused as the model wont be populated with data, the AJAX call brings back List<LineChartDataDecimal> and I just want to use that?

[Jako]

Hi, sorry for the horrible formatting.

Its working now, but what I had to do is populate the Module with the List<> items for the dataset and remove the AJAX Data.Read() call.

Why does the demo example have both? Is there a way to use only the AJAX call with the model? That would be first prize for me.

Thank you.

[Hristo Germanov]

Hi Jako,

.Chart(Model.LineChartDataDecimalList)

This line of code will load the chart with initial data. If your ajax request is a bit slower you will have some data until ajax request is complete.

I think that in this case you need to pass the categoryField as an additional parameter to 

series.Line(model => model.Value)

I hope this helps.

Regards,
Hristo Germanov
Telerik

 

 

[Jako]

Hi Hristo

Is there anyway to ONLY use the Ajax binding? I dont want to prepopulate my model with the data as it takes a while to generate.

I want to load the page and then let the Ajax calls run to fetch the data.

[Hristo Germanov]

Hello Jako,

You can use Ajax binding but in this case you need to pass your fields with string. You need to use the correct overload in this case. You can examine them from the intellisense in the Visual Studio.

Regards,
Hristo Germanov
Telerik