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

Passing data to editor template during item creation

2 Answers 329 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Marek
Top achievements
Rank 1
Marek asked on 20 Dec 2013, 12:24 PM
Hello,
I am newbie in telerik kendo UI. I start with list view and I don't have a clue how to pass some data during item creation. My scenario: I have some Types.  Each type has some groups. For each typeI want to create List View with  some groups. I used sample List View editing and have some questions:

- where Can I find information about different types of client template. I mean this markups because in samples there is only string display, and convert to string with some format

- how can I pass TypeID during Item Creation

My editor template code:
@model CustomFieldsGroup
 
@using (Html.BeginForm())
{
 
    @Html.HiddenFor(x => x.GroupID)
    @Html.HiddenFor(x => x.TypeID)
 
    <ul>
        <li>
            @Html.LabelFor(x => x.GroupName)
        </li>
        <li>
            @Html.EditorFor(x => x.GroupName)
        </li>
    </ul>
 
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </div>
}
My Type ID is always 0. When I am editing group Type ID is populated.

List View:
<div class="k-toolbar k-grid-toolbar">
    <a id="addRoleButton" class="k-button k-button-icontext k-add-button test" href="\\#"><span class="k-icon k-add"></span>Add new group</a>
</div>
 
<script type="text/x-kendo-tmpl" id="customFieldTemplate">
    <div class="product-view k-widget">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
        <div>
            Group Name
        </div>
        <div>
            ${GroupName}
        </div>
        @*<dl>
                <dt>GroupName</dt>
                <dd>${GroupName}</dd>
                <dt>Unit Price</dt>
                    <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                    <dt>Units In Stock</dt>
                    <dd>#:UnitsInStock#</dd>
                    <dt>Discontinued</dt>
                    <dd>#:Discontinued#</dd>
            </dl>*@
    </div>
</script>
 
<div class="fields">
    @(Html.Kendo().ListView<CustomFieldsGroup>(Model.Groups)
        .Name("listView")
        .ClientTemplateId("customFieldTemplate")
        .TagName("div")
        .DataSource(datasource =>
            datasource.Model(model=>
                {
                    model.Id(x => x.GroupID);
                    model.Field(x => x.TypeID).Editable(false);
                    model.Field(x => x.GroupName);
                })
            .Read(ac => ac.Action("Index_Read", "CustomFields"))
            .Create(ac => ac.Action("CreateGroup", "CustomFields"))
            .Update(ac => ac.Action("EditGroup", "CustomFields")))
        .Editable())
    )
</div>
 
<script>
    $(function () {
        var listView = $("#listView").data("kendoListView");
 
        $(".test").bind("click", function (e) {
            listView.add();
            e.preventDefault();
        })
    })
</script>

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 21 Dec 2013, 09:30 AM
Hello Merek,

Information about Kendo template can be found here:

http://docs.kendoui.com/getting-started/framework/templates/overview

To specify default values for item creating you need to use the Model definition of the dataSource.

e.g.

.Model(model =>
{
    model.Id(p => p.ProductID);
    model.Field(p => p.ProductID).DefaultValue(99);
})

If the above is not flexible enough and you want to execute some custom JavaScript logic you should use the edit event of the ListView, inside of it you have reference to the model (args.model) and you can use its set method to update the field that you need.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Marek
Top achievements
Rank 1
answered on 23 Dec 2013, 12:21 PM
Thank you,
I chose the second option and it is working the way I wanted. I am wondering if there is any other possibility to get filled editor template from server. First via get request server returns filled editor template (with some additional ids) and once user fill the form data is transferred via post request to server.
Tags
ListView
Asked by
Marek
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Marek
Top achievements
Rank 1
Share this question
or