Kendo UI Grid popup editing with MVVM

Question

I am using Kendo UI Grid and I have configured it to use popup editing with custom template

    <script id="popup_editor" type="text/x-kendo-template">
    <div id="editor">
            <div class="k-edit-label">
                <label for="Type">Type</label>
            </div>

    <select data-role="dropdownlist" data-value-field="Type" data-text-field="Type"
                         data-bind="source: typeSource, value: selectedProduct"></select>

<div class="k-edit-label">
                <label for="Type">Option</label>
            </div>

<select data-role="dropdownlist" data-value-field="Option" data-text-field="Option"
                         data-bind="source: productsSource.Options, value: selectedOption"></select>
            </div>

</script>

This is my ViewModel:

    function ViewModel() {
        var getTypesUrl = "/Controller/Action";

        var viewModel = kendo.observable({
            typeSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: getConditionTypesUrl,
                        dataType: "json"
                    },
                },
                batch: true,
                schema: {
                    model: {
                        id: "Type"
                    }
                }
            }),
            selectedType: null,
            selectedOption: null
        });

        kendo.bind($("#editor"), viewModel);
    }

ViewModel();

My action returns JSON.

The problem is that when I click on the "Add new record" button, there is no call to the getTypesUrl and the dropdownlist is not populated. The general idea is to have different options for different types and to populate the Option dropdownlist depending on the selected type. I believe, that the problem occurs because the editor is showed only when the button is clicked and the kendo can not create the bindings.

Jason Robertson Jason Robertson · Accepted Answer · 2013-03-19T02:53:20

If the Drop down list is the same for each row get its values from the Data Source and store these in a variable in the page in JavaScript and point the Drop Down list at this new Data Source. Use some JavaScript to associate the id and name.

Alternatively if this is loaded based on some other logic implement a separate call to populate the Data source for the drop down list in your view model.

http://www.aspnetwiki.com/page:introduction-to-kendo-mvvm

http://www.aspnetwiki.com/page:kendo-mvvm-ui-grid

Further note your can write your template purely in JavaScript and bind this to the html, advantage of which is you can debug it and it can still be loaded by an ajax call later and it is likely going to be smaller.

Kendo UI Grid popup editing with MVVM

1 Answers