Listview always trigger Create event

3 posts, 1 answers
  1. Lienys
    Lienys avatar
    16 posts
    Member since:
    Feb 2014

    Posted 28 Apr 2014 Link to this post

    I have a Listview with two templates, one for show the rows info and another for edit mode. My problem is: every time i click in update or delete always triggers the create event and with cancel delete the row... What I'm doing wrong?

    this code is in my view    
    <script type="text/x-kendo-template" id="listViewTmpl">
                            <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>
                                <dl>
                                    <dt>Nominee:</dt>
                                    <dd>#:NomineeName#</dd>
                                </dl>
                                <input type="hidden" name="NomineeTitle" value="#:NomineeTitle#" />
                                <input type="hidden" name="NomineeDeptId" value="#:NomineeDeptId#" />
                                <input type="hidden" name="NomineeId" value="#:NomineeId#" />
                            </div>
                        </script>                    
                        <div class="NomineeRight">
                            <a id="addNominee" title="Add Nominee to the list"><img src=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong> Add Nominee</strong></a>
                            @(Html.Kendo().ListView<X.Models.NomineeInfo>()
                                .Name("NomineeList")
                                .TagName("div")
                                .ClientTemplateId("listViewTmpl")
                                .Editable(edit => edit.TemplateName("NomineeEditTmpl"))
                                    
                                .Events(ev =>
                                {
                                    ev.Save("checkData");
                                    ev.Cancel("cancelEdit");
                                    ev.Remove("removeElem");
                                })
                                .DataSource(dataSource =>
                                {
                                    dataSource.Events(ev => ev.Sync("listviewSync"));
                                    dataSource.Model(m => m.Id("NomineeId"));
                                    dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));
                                    dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));                               
                                    dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));
                                    dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));
                                })
                            )
                        </div>


    this is my edit template
    @model X.Models.NomineeInfo
     
    <div class="product-view k-widget">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
        </div>
        <dl>
            <dt>Employee</dt>
            <dd>
                <input type="text" class="k-textbox" data-bind="value:NomineeName" name="NomineeName" style="width:150px"/>
            </dd>
            <dt>Job Title</dt>
            <dd>
                <input type="text" class="k-textbox" data-bind="value:NomineeTitle" name="NomineeTitle" style="width:150px" />
            </dd>
            <dt>Department</dt>
            <dd>
                @(Html.Kendo().DropDownList()
                    .Name("NomineeDeptId")
                    .SelectedIndex(@Model.NomineeDeptId)
                    .HtmlAttributes(new { style = "width:150px" })
                    .DataTextField("DeptName")
                    .DataValueField("DeptID")
                    .OptionLabel("Select a Dept")
                    .DataSource(ds => ds
                        .Read(
                                read => read.Action("GetDepartments", "Utility")
                            )
                        )
                )
            </dd>
        </dl>
    </div>


    js
    // validate the information before save
    function checkData(elem)
    {
        if (elem.model.NomineeName === "")
        {
            elem.preventDefault();
            createNotification("Please enter a valid Nominated Name.", "error");
        }
        else if (elem.model.NomineeDeptId === 0)
        {
            elem.preventDefault();
            createNotification("Please enter a valid Department.", "error");
        }
    }
     
    // cancel the listview edit mode
    function cancelEdit(elem)
    {
        //var listView = $("#NomineeList").data("kendoListView");
        //listView.cancel();
     
        elem.preventDefault();
     
        listView.dataSource.read();
    }
     
    function removeElem(elem)
    {
        //var listView = $("#NomineeList").data("kendoListView");
     
        console.log("remove");
        console.log(elem);
    }
     
    // send the listview to read from server every time it sync
    function listviewSync()
    {
        this.read();
    }



    <script type="text/x-kendo-template" id="listViewTmpl">
                            <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>
                                <dl>
                                    <dt>Nominee:</dt>
                                    <dd>#:NomineeName#</dd>
                                </dl>
                                <input type="hidden" name="NomineeTitle"value="#:NomineeTitle#" />
                                <input type="hidden" name="NomineeDeptId"value="#:NomineeDeptId#" />
                                <input type="hidden" name="NomineeId"value="#:NomineeId#" />
                            </div>
                        </script>
                        @*<div class="NomineeLeft">
                            <a id="addNominee"><imgsrc=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong>Add Nominee</strong></a>
                        </div>*@
                        <div class="NomineeRight">
                            <a id="addNominee" title="Add Nominee to the list"><img src=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong> Add Nominee</strong></a>
                            @(Html.Kendo().ListView<RewardSystemMvc.Models.NomineeInfo>()
                                .Name("NomineeList")
                                .TagName("div")
                                .ClientTemplateId("listViewTmpl")
                                .Editable(edit => edit.TemplateName("NomineeEditTmpl"))
                                    //.Pageable(page => page.ButtonCount(1))
                                    //.HtmlAttributes(new { style = "height:150px;overflow: auto;" })
                                .Events(ev =>
                                {
                                    ev.Save("checkData");
                                    ev.Cancel("cancelEdit");
                                    ev.Remove("removeElem");
                                })
                                .DataSource(dataSource =>
                                {
                                    dataSource.Events(ev => ev.Sync("listviewSync"));
                                    dataSource.Model(m => m.Id("NomineeId"));
                                    dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));
                                    dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));                               
                                    dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));
                                    dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));
                                })
                            )
                        </div>
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Apr 2014 Link to this post

    Hello Lienys,

    Usually such issues are connected with the model ID.
    I noticed that you have defined the ID field in the DataSource configuration.
    dataSource.Model(m => m.Id("NomineeId"));

    Could you please confirm that the field name is correct (it is case sensitive)? Could you please confirm that each existing record in the dataSource has unique ID different from 0/null?
    The dataSource will consider a given record as newly created if it have no ID value or if its ID value is equal to the default one. If the record has ID it should be updated via update transport.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Lienys
    Lienys avatar
    16 posts
    Member since:
    Feb 2014

    Posted 29 Apr 2014 in reply to Alexander Valchev Link to this post

    thank you very much... that was exactly my problem... I initialize the Id in 0 and that make the new item and the first item created had the same id.. so.. i change the id to start in 1.. and is working perfectly..

    thanks a lot...
Back to Top