Kendo Grid Datasource with Radio buttons

2 posts, 0 answers
  1. crazy05
    crazy05 avatar
    74 posts
    Member since:
    Sep 2014

    Posted 03 Mar 2015 Link to this post

    Here is my Kendo Datasource and code related to it. I want to display radio button list in Access Type column so that user can select Read or Read/Write or None type access. How can I pass that in my datasource ?I want radiobuttonlist at group level too.

    var words = {
    'count': 4,
    'input': 'kendo',
    'groups': [{
    'field': 'Word 1',
    'value': '3',
    'items': [
    { 'Word': 'ACT', 'AccessType' : 'Read' },
    { 'Word': 'ADG', 'AccessType': 'Read' },
    { 'Word': 'ALF', 'AccessType': 'Read / Write' }
    ],
    'hasSubgroups': false,
    'aggregates': {}
    }, {
    'field': 'Word 2',
    'value': '4',
    'items': [
    { 'Word': 'BCB', 'AccessType': 'Read' },
    { 'Word': 'BCC', 'AccessType': 'Read / Write' },
    { 'Word': 'BCH', 'AccessType': 'None' },
    { 'Word': 'BCT', 'AccessType': 'Read' }
    ],
    'hasSubgroups': false,
    'aggregates': {}
    }, {
    'field': 'Word 3',
    'value': '6',
    'items': [
    { 'Word': 'CCC', 'AccessType': 'Read / Write' },
    { 'Word': 'CCT', 'AccessType': 'None' },
    { 'Word': 'CHH', 'AccessType': 'Read' },
    { 'Word': 'CFF', 'AccessType': 'None' },
    { 'Word': 'GCC', 'AccessType': 'Read / Write' },
    { 'Word': 'GCT', 'AccessType': 'Read' }
    ],
    'hasSubgroups': false,
    'aggregates': {}
    }] 
    };

    var wordsDataSource = new kendo.data.DataSource({
    data: words,
    schema: {
    groups: 'groups',
    },
    group: {
    field: 'length'
    },
    serverGrouping: true,
    columns: [
    { field: "Word", title: "Sites" },
    { field: "Access", title: "Access" }
    ]
    });

    $("#grid").kendoGrid({
    autoBind: false,
    dataSource: wordsDataSource
    });

    wordsDataSource.read();
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 05 Mar 2015 Link to this post

    Hello crazy05,

    This could be achieve by using a columns.template (see Templates Overview) to render the three radio buttons and assign each one a value - Read, Read/Write or None. Then check what the current item's AccessType is and add a "checked" property to the matching radio button. The same can be done in the group header templates as well. I also noticed that the columns array is specified in the DataSource, which is unsupported - it should be part of the Grid's configuration options.

    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top