kendo crud listview在插入后更改模型值

时间:2013-04-22 10:03:49

标签: kendo-ui

这是我的代码。

$(document).ready(function() {

    var kendoWindow_room = $("#window_room");
    kendoWindow_room.hide();

    $("#roombut").on(
            'click',
            function()
            {
                home_id = $("#home_id").val();
                if (home_id) {
                    kendoWindow_room.data("kendoWindow").open();
                    $('.k-window').css({'marginLeft': -$('.k-window').width() / 2});
                    dataSource.read();
                    $("#room_listview_pager .k-link:first").hide();
                    $("#room_listview_pager .k-link:last").hide();

                    $("#room_listview_pager a.k-link").each(function(index) {
                        $(this).addClass("pager_new_icons");
                        $(this).addClass("mortgage");
                    });
                }
            }
    );

    home_datasource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "<?php echo BASE_URL . 'user/get_edit_home_name' ?>",
                dataType: "json"
            }
        }
    });
    room_datasource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "<?php echo BASE_URL . 'common/get_dropdown_entries' ?>",
                dataType: "json",
                data: {thisisfor: "floortype"}
            }
        }
    });

    var crudServiceBaseUrl = "<?php echo BASE_URL . 'user/room_crud_listview_' ?>",
            dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: function() {
                    return crudServiceBaseUrl + "read?home_id=" + $("#home_id").val()
                },
                dataType: "json",
                contentType: "application/json"
            },
            update: {
                url: crudServiceBaseUrl + "update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "create",
                dataType: "json",
                type: "POST"
            }
        },
        batch: true,
        pageSize: 1,
        schema: {
            model: {
                id: "id",
                fields: {
                    rd_home_id: "rd_home_id",
                    homename: "homename",
                    nickname: "nickname",
                    type: "type",
                    wallcolor: "wallcolor",
                    trimcolor: "trimcolor",
                    floorcolor: "floorcolor",
                    floortype: "floortype",
                    windows: "windows"
                }
            }
        }
    });

    $("#room_listview_pager").kendoPager({
        dataSource: dataSource,
        info: false,
        numeric: false
    });

    var room_listview = $("#room_listview").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#room_listview_template").html()),
        editTemplate: kendo.template($("#room_editview_template").html())
    }).data("kendoListView");


    // Add Row
    $("#room_add_row").on("click", function(event) {
        event.preventDefault();
        room_listview.add();
    });

    // Delete Row
    $("#room_delete_row").on("click", function(event) {
        event.preventDefault();
        room_listview.remove(room_listview.element.children().first());
        if (dataSource.total() < 1) {
            room_listview.add();
        } else {
            dataSource.read();
        }
    });

    // edit row
    $("#room_edit_row").on("click", function(event) {
        event.preventDefault();
        room_listview.edit(room_listview.element.children().first());
    });

    // save row
    $("#room_save_row").on("click", function(event) {
        event.preventDefault();
        room_listview.save();
    });

    if (!kendoWindow_room.data("kendoWindow")) {
        kendoWindow_room.kendoWindow({
            width: "520px",
            title: "Room Designer"
        });
    }

});

<div style="background-color: #FFFFFF; border: 0; max-width: 90px; float: left;" id="room_listview_pager"></div>
<span style="float: right; margin-top: 4px;">
    <a id="room_add_row" class="k-add" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon7.png" alt="" height="36" width="37"></a>
    <a id="room_delete_row" class="k-delete" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon8.png" alt="" height="36" width="37"></a>
    <a id="room_edit_row" class="k-edit" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon9.png" alt="" height="36" width="37"></a>
    <a id="room_save_row" class="k-insert" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon10.png" alt="" height="36" width="37"></a>
</span><div class="clear"></div>

          
This is the kendo template with id - "room_listview_template"
<div class="product-view k-widget">            
    <dl>    
        <dt>Home</dt>
        <dd>#:homename#</dd>            
        <dt>Nickname</dt>
        <dd>#:nickname#</dd>
        <dt>Type</dt>
        <dd>#:type#</dd>
        <dt>Wall Color</dt>
        <dd>#:wallcolor#</dd>
        <dt>Trim Color</dt>
        <dd>#:trimcolor#</dd>
        <dt>Floor Color</dt>
        <dd>#:floorcolor#</dd>
        <dt>Floor Type</dt>
        <dd>#:floortype#</dd>
        <dt>Windows</dt>
        <dd>#:windows#</dd>
    </dl>
</div>


This is the kendo template with id - "room_editview_template"

<div class="product-view k-widget">            
<dl>
    <dt>Home</dt>
    <dd>
        <select id="home" 
        data-role="dropdownlist" 
        data-text-field="nickname" 
        data-value-field="id"
        data-source="home_datasource" 
        data-bind="value:rd_home_id" 
        name="rd_home_id" 
        required="required" 
        validationMessage="required">
        </select>
        <span data-for="rd_home_id" class="k-invalid-msg"></span>
    </dd>
    <dt>Nickname</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:nickname" name="nickname" required="required" validationMessage="required" />
        <span data-for="nickname" class="k-invalid-msg"></span>
    </dd>
    <dt>Type</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:type" name="type" required="required" min="1" validationMessage="required" />
        <span data-for="type" class="k-invalid-msg"></span>
    </dd>
    <dt>Wall Color</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:wallcolor" name="wallcolor" required="required" validationMessage="required" />
        <span data-for="wallcolor" class="k-invalid-msg"></span>
    </dd>
    <dt>Trim Color</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:trimcolor" name="trimcolor" required="required" validationMessage="required" />
        <span data-for="trimcolor" class="k-invalid-msg"></span>
    </dd>
    <dt>Floor Color</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:floorcolor" name="floorcolor" required="required" validationMessage="required" />
        <span data-for="floorcolor" class="k-invalid-msg"></span>
    </dd>
    <dt>Floor Type</dt>
    <dd>
        <select 
        data-role="dropdownlist" 
        data-text-field="name" 
        data-value-field="value"
        data-source="room_datasource" 
        data-bind="value:floortype" 
        name="floortype" 
        required="required" 
        validationMessage="required">
        </select>
        <span data-for="floortype" class="k-invalid-msg"></span>
    </dd>
    <dt>Windows</dt>
    <dd>
        <input type="text" class="k-textbox" data-bind="value:windows" name="windows" required="required" validationMessage="required" />
        <span data-for="windows" class="k-invalid-msg"></span>
    </dd>
</dl>
</div>

我在kendowindow中有一个listview,其中包含创建,读取,更新和删除选项。

它使用一个模板列出记录,使用另一个模板进行编辑。

在字段中,我有一个下拉列表,字段名称为“rd_home_id”,其data-text-field和data-value-field不同。它显示主页名作为选项,每个选项都有其整数值。

插入,并且更新工作正常,我在服务器端获取整数值。

在阅读时,显然我想显示主页名称 - 所以,我有字段名称“homename” - 并且从服务器,我传递了这个值,我能够在列表模板中看到它 - 这是有效的非常好。

剩下的唯一问题是 - 在我插入记录后,“homename”没有显示 - 它为null - 所有其他值都显示并且是正确的。

如何在插入后立即显示值“homename”?

我知道我可以在调用listview的save函数之后立即调用room_save_row的onclick中的数据源的read函数 - 这将解决问题,但这样做会使验证无效。

有没有办法更改模板中呈现的字段的值?

谢谢

刚刚解决了问题

如果插入的记录作为来自服务器的响应(来自创建URL)发送 - 它将被更新 - 并且值将反映在列表模板中 - 在我没有从服务器发送任何内容之前。那就是问题所在。

0 个答案:

没有答案