Add New Item (MVC)

[Alex]

I'm trying to set up a MultiSelectFor to be used NoDataTemplate, but the pop-up just never seems to appear. There is an HTML5 version on the site,but not one for MVC: http://demos.telerik.com/kendo-ui/multiselect/addnewitem

Here is what I have wrriten, but the template never appears

 

<script id="@noDataTemplateID" type="text/x-kendo-tmpl">
    <div>
        No data found. Do you want to add new item - '#: instance.input.val() #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>


<script>
    //the actual data won't get synced to the server, but that's okay because when we save this new item on the update of the parent model, we presumably will grab that newly added item on the next read
    function addNew(widgetId, value) {
        var widget = $("#" + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
                ProductID: 0,
                ProductName: value
            });

            dataSource.one("requestEnd", function (args) {
                if (args.type !== "create") {
                    return;
                }

                var newValue = args.response[0].ProductID;

                dataSource.one("sync", function () {
                    widget.value(widget.value().concat([newValue]));
                });
            });

            dataSource.sync();
        }
    }
</script>

@(
 Html.Kendo().MultiSelectFor(m => m)
        .DataTextField(descriptionField)
        .DataValueField(IDFIeld)
        .NoDataTemplate(noDataTemplateID)
        .DataSource(source =>
        {
            source.Read(read => {
                read.Action("Read", "List", new { ListType = ListType, Param1 = Param1, Param2 = Param2, Param3 = Param3 });
            })
            .ServerFiltering(true);
        })
)

 

 

[Peter Milchev]

Hello Alex,

The NoDataTemplate is used when the template is passed as a string while NoDataTemplateId property is used when you pass the template by Id which is your case. 

.NoDataTemplateId(noDataTemplateID)

Also, I would like to recommend you to review the jQuery Plug-Ins Widget Initialization where in the Duplicate Initialization the correct way to obtain a widget reference is demonstrated.

<input id="autocomplete" />
   <script>
       // initialization code here...
       $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);

       // ...
       // correct - instance reference is obtained:
       var autocomplete = $("#autocomplete").data("kendoAutoComplete");

       // INCORRECT - instance reference is obtained while creating a duplicate instance:
       var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete");
   </script>

Regards,
Peter Milchev
Telerik by Progress

[Alex]

Changing to NoDataTemplateId, did not change anything. I still get the default of "No Data Found", instead of the custom message. Is there something I can do to try and narrow down the issue?

[Peter Milchev]

Hello Alex,

Please find attached a sample runnable project implementing the MultiSelect with custom NoData template.

Would you please modify the attached project so that it reproduces the issues you are encountering and send it back to us? Also, would you please double check if you are using the latest version of the server-side wrappers (2016.3.1118)?

Regards,
Peter Milchev
Telerik by Progress

[Jason]

I tried using the code in the sample provided but instead of getting the button to add a new item it just has the name of the data template "no-data-template". Should this example still work in the most recent version of the controls? Can anyone provide a working example of adding an item in a multi select using the server side wrappers?

[Peter Milchev]

Hi Jason,

I have updated the Kendo UI version and the MVC version of the previously attached project and the button appears and works correctly as you can see in this screencast: https://screencast-o-matic.com/watch/cqfqXTZteQ

Please check if there are any JavaScript errors and verify that the template id is matching. In the provided example, a variable noDataTemplateID is used, but you can hard code the id as string, in this case "no-data-template". 

@{
    ViewBag.Title = "Home Page";
    var noDataTemplateID = "no-data-template";
}

<script id="@noDataTemplateID" type="text/x-kendo-tmpl">
    <div>
        No data found. Do you want to add new item - '#: instance.input.val() #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>

@(Html.Kendo().MultiSelect()
        .Name("multiselect")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .NoDataTemplateId(noDataTemplateID)
...

If the issue persists, please modify the attached project so that it better represents your scenario and send it back to us in an official support ticket. That would allow us to investigate your exact scenario and provide more specific and accurate suggestions.

Regards,
Peter Milchev
Progress Telerik