kendo.observable and html template data-source

2 posts, 0 answers
  1. Steve
    Steve avatar
    35 posts
    Member since:
    Apr 2015

    Posted 27 Oct Link to this post

    Hi All,

    I has been awhile since I used kendo and I have no idea why my values are not observable. What I am missing when I'm calling a popup html template and no data are showing in the textbox or data are not updated after I modified them.  Any suggestions or an example is much appreciated.

    TIA

     

    .js

    var rEditor= rEditor || {};

    var rEditor = (function () {
        var kendoViewModel;

        function createViewModel() {
            kendoViewModel = kendo.observable({
                selectedCategoryId: null,
                selectedCategoryDesc: "test description",
                selectedCategoryCode: null,

    kendoViewModel.Codes
            });
        }

        function loadData() {
            jsonCall({
                url: "/sample/LoadCode",
                type: "GET",
                async: true,
                success: function (result) {
                }
            });

            jsonCall({
                url: "/sample/Loadother",
                type: "GET",
                async: true,
                success: function (result) {                
                    }
                }
            });
        }
        
      function setupResourceDropDown() {
    $('#ResourceCode_DropDownMenu')
     .kendoDropDownList({              
     dataTextField: "Description",
     dataSource: kendoViewModel.Codes,
     change: function () {
     ..filter the data and call

     setGrid();
     }
     });
        
        }

        function setGrid() {
            $('#resourceCategoryGrid').empty().kendoGrid({
                dataSource: {
                    data: filterCategory,
                    schema: {
                        model: {
                            fields: {
                                Id: { type: "string", editable: false },
                                Code: { type: "string", editable: true },
                                Description: { type: "string", editable: true }
                            }
                        }
                    },
                },
                selectable: "row",
                editable: true,
                columns: [
                {
                    hidden: true,
                    field: "Id",
                    title: "Id",
                    width: 200
                },
                {
                    title: "Code",
                    field: "Code",
                    width: 100
                },
                {
                    title: "Description",
                    field: "Description",
                    width: 300,                
                },
                {
                   title: "test",
                   field: "Code",
                   template: "#=Code#",
                   editor: editCategory,
                }],
                dataBound: function (e) {
                    telerikFilterIndicator(e, this);
                }
            }).data("kendoGrid");   
        }

        function editCategory(container, options) {
            //var model = options.model;
            //kendoViewModel.set("selectedCategoryId", model.Id);
            //kendoViewModel.set("selectedCategoryDesc", model.Description);
            //kendoViewModel.set("selectedCategoryCode", model.Code);

            var editWindow = $("#editResource-dialog").kendoWindow({
                resizable: false,
                title: "Edit",
                modal: true,
                width: "575px",
                height: "185px",
                visible: false
            });

            editWindow.data("kendoWindow")
                .content($("#editResource-dialog").html())
                .center().open();

            $("#confirmUpdateButton").click(function () {
                editWindow.data("kendoWindow").close();
            });

            $("#confirmCancelButton").click(function () {
                editWindow.data("kendoWindow").close();
            });
        }

        function init() {
       
            createViewModel();
            loadData();
            setupResourceDropDown();
       
            kendo.bind($("#MainWrapper"), kendoViewModel);

        }

        return {
            Init: init
        };

    }(jQuery));

    -----------------cshtml----------------------
    <div id="MainWrapper" class="MainWrapperCls">
        <div id="Main" class="row">
            <div class="row">
                <div class="col-lg-1">
                    <label>Code:</label>
                </div>
                <div class="col-lg-2">
                    <select id="ResourceCode_DropDownMenu" class="form-control"></select>
                </div>   
            </div>  
        </div>

        <div id="editResource-dialog" title="Resource Editor" type="text/x-kendo-template" style="display: none">
            <div class="modal-body" id="editorWindow">
                <div class="input-group" style="padding-bottom: 5px">
                    <span class="input-group-addon" style="padding-right: 3.5em">Code:</span>
                    <input type="text" class="form-control" id="resourceCode" name="resourceCode" aria-describedby="resourceCode" data-bind="value: selectedCategoryCode">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">Description:</span>
                    <input type="text" class="form-control" id="resourceDescription" name="resourceDescription" data-bind="value: selectedCategoryDesc">

                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary" type="button" id="confirmUpdateButton">Update</button>
                <button class="btn btn-default" type="button" id="confirmCancelButton">Cancel</button>
            </div>
        </div>
    </div>
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 31 Oct Link to this post

    Hello Steve,

    From the provided information it seems that you are trying to reimplement the Grid build-in popup editor - could you please clarify why you are using this approach? In current setup I would instead suggest to use the Grid build-in popup editor as it will handle the binding automatically. Please check the following example:

    Regards,
    Vladimir Iliev
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Kendo UI is VS 2017 Ready
Back to Top