This is a migrated thread and some comments may be shown as answers.

kendo.observable and html template data-source

1 Answer 55 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 27 Oct 2016, 05:27 PM

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>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 31 Oct 2016, 09:19 AM
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.
 
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or