0

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.

1 Answer 1

0

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>
8
  • I'll give this a try, the only thing is my kendo grid is being called from an external file
    – Chris
    Aug 27, 2015 at 16:06
  • Once it's working you can pass it as before template: '#if....' i wrote it down that way for reading purposes
    – calinaadi
    Aug 27, 2015 at 16:14
  • So the rowTemplate will need to be in the view and the rest in my external file?
    – Chris
    Aug 28, 2015 at 13:02
  • Yes, where you have $("#orderEntryOptions") you can add also the template and it should be visible.
    – calinaadi
    Aug 28, 2015 at 13:05
  • I'm not sure I understand what you mean...are you meaning that I can add that <script id="rowTemplate"...> into the function?
    – Chris
    Aug 28, 2015 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.