CODEWITHSUNDEEP
jsonasp.net-mvckendo-ui
Turo
Turo

Reputation: 1607

Kendo UI access separately 2 array Json

I have a json that is returned from MVC controller as 2 arrays of data (1st - object, 2nd - primitive type string).

public ActionResult CategoriesChartFilteredData(string[] brands)
{
    List<CategoryData> categoryData = getCategoryData();
    List<string> brandNames = getBrandNames();
    return Json( new { allBrandNames = brandNames, categoriesData = categoryData }
            , JsonRequestBehavior.AllowGet);
}

I thought I would access the individual arrays(or properties - here these are brandNames and categoryData) via dot notation in data-bind: "source: ...", but it's not working. I tried with [0] as well, which I found somewhere, but not sure If I use this right. I'm wrapping my head around it, while it's probably something very basic, but I cannot trace a good example in docs or online.

<div id="container">
    <select multiple="multiple" data-role="multiselect"
        data-bind="source: dataComparisons.allBrandNames"></select>

    <div data-role="chart" data-bind="source: dataComparisons.categoriesData" 
    data-series-defaults="{type: 'column'}" data-series="[{field: 'Coverage'}]"></div> 
</div>

I'm using viewmodel as below:

<script type="text/javascript">

    var viewModel = kendo.observable({
        autoSync: true,
        dataComparisons: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/dashboard/categoriesChartFilteredData",
                    dataType: "json"
                }
            },
        })
    });

    kendo.bind($("#container"), viewModel);
</script>

Upvotes: 1

Views: 161

Answers (1)

Gene R
Gene R

Reputation: 3744

kendo.data.DataSource is not designed to handle multiple data arrays. Split it in separate requests or make custom manual ajax request and then fill viewModel

Update

1.Separate datasources (two separate mvc actions categoriesData and brandNames and binddings data-bind="source: categoriesData and data-bind="source: brandNames):

var viewModel = kendo.observable({
    autoSync: true,
    categoriesData: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/dashboard/categoriesData",
                dataType: "json"
            }
        },
    }),
    brandNames: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/dashboard/brandNames",
                dataType: "json"
            }
        },
    })
});

2.External ajax request:

$.ajax({
    type:'post', //or 'get'
    url:'/dashboard/categoriesChartFilteredData',
    success:function(data){
        var viewModel = kendo.observable({
            autoSync: true,
            dataComparisons: data
        });
        kendo.bind($("#container"), viewModel);
    }
})

Upvotes: 1

Related Questions