简体   繁体   中英

How to switch template column in Kendo Grid

I have a Kendo grid that has a template column of a dropdown. How do I switch the template column to use a different control on certain rows? Here is what I have with my grid

function OrderEntryOptions() {
$("#orderEntryOptions").kendoGrid({
    columns: [{
        field: "Options",
        title:"Options"
    },
    {
        field: "SelectAreas",
        template: '<select class="form-control" ><option>False</option><option>True</option></select>',
    }],
    dataSource: {
        data: [{
            Options: "Show Self Note Column"
        },
        {
            Options: "Ctrl+C, Ctrl-V for Excel Commands"
        },
        {
            Options: "Validation: Show Yellow Alerts when Printing"
        },
        {
            Options: "Default Import/Export Directory"
        },
        {
            Options:"Show Sq. Ft. on screen"
        },
        {
            Options: "Process Global Defaults"
        },
        {
            Options: "Catalog Tree Auto-Expand"
        },
        {
            Options: "Hide Sections column in Globals"
        },
        {
            Options:"First column in blank row to get focus"
        },
        {
            Options: "Search on item name only"
        }
        ]
    }
});
}

In my Options column where it says "Default Import/Export Directory", I need to remove the dropdown and use a button instead, then in my Options column where it says "First column in blank row to get focus", I need to change the values in the dropdown from True/False to column names of another grid.

You can specify the template using:

<script id="rowTemplate" type="text/x-kendo-tmpl">    
</script>

In your grid definition change:

template: '<select class="form-control" ><option>False</option><option>True</option></select>'

to:

 kendo.template($("#rowTemplate").html()

Inside this template you can add conditions, something like:

  <script id="rowTemplate" type="text/x-kendo-tmpl">
        # if (Options== "Default Import/Export Directory") { #
        <button id="button_id">Button text</button>
        # } else { #
         <select class="form-control" ><option>False</option><option>True</option></select>
        # } #            
    </script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM