Passing data to editor template during item creation

[Marek]

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>

 

[Petur Subev]

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

[Marek]

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.