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

Add New Item (MVC)

5 Answers 510 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 07 Dec 2016, 07:21 PM

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);
        })
)

 

 

5 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 09 Dec 2016, 12:07 PM
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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
Alex
Top achievements
Rank 1
answered on 09 Dec 2016, 02:40 PM
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?
0
Accepted
Peter Milchev
Telerik team
answered on 13 Dec 2016, 09:08 AM
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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
Jason
Top achievements
Rank 1
answered on 17 Apr 2019, 02:31 PM
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?
0
Peter Milchev
Telerik team
answered on 19 Apr 2019, 11:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MultiSelect
Asked by
Alex
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Alex
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Share this question
or