Passing data to editor template during item creation

3 posts, 1 answers
  1. Marek
    Marek avatar
    2 posts
    Member since:
    Dec 2013

    Posted 20 Dec 2013 Link to this post

    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. Answer
    Marek
    Marek avatar
    2 posts
    Member since:
    Dec 2013

    Posted 21 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Marek
    Marek avatar
    2 posts
    Member since:
    Dec 2013

    Posted 23 Dec 2013 Link to this post

    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.
Back to Top