Add New Item (MVC)

6 posts, 1 answers
  1. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 07 Dec 2016 Link to this post

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

     

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    608 posts

    Posted 09 Dec 2016 Link to this post

    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.
  3. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 09 Dec 2016 Link to this post

    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?
  4. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    608 posts

    Posted 13 Dec 2016 Link to this post

    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.
  5. Jason
    Jason avatar
    1 posts
    Member since:
    Dec 2018

    Posted 17 Apr in reply to Peter Milchev Link to this post

    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?
  6. Peter Milchev
    Admin
    Peter Milchev avatar
    608 posts

    Posted 19 Apr Link to this post

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