Dropdownlist add new item inside grid cell

[Jimmy]

Hi 

My grid table need to include dropdownlist in one of the cell, and i need to allow user to Add new item to the dropdownlist.

But i not sure how to select and display the New Item after i added the value to database.

Please help.

function addNewServiceProviderRole(widgetId, value) {

    if (confirm("Are you sure?")) {
        var formData = new FormData();
        formData.append("role", value);

        $.ajax({
            type: 'POST',
            url: '/ServiceProviderRole/AddServiceProviderRole',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            contentType: false,
            processData: false,
            data: formData,
            success: function (result) {
                if (result.Errors != null && result.Errors.length > 0) {

                }
                else {

                }
            }
        });
    }
}

 

This is my template.

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("IServiceProviderRoleId")
.DataTextField("URole")
//.BindTo((System.Collections.IEnumerable)ViewData["roles"])
.Filter(FilterType.Contains)
.NoDataTemplateId("noDataTemplate")
 .DataSource(dataSource => dataSource
    .Ajax()
    .Read(r => r.Url("/ServiceProviderRole/GetAllServiceProviderRole").Data("forgeryToken")))
)

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

[Martin]

Hello Jimmy,

Thank you for the provided code snippets.

Did you mean that you are not sure how to include the new item in the dropdown popup? If yes, you can go through the Add New Item demo, particularly the addNew function.

If that is not exactly what you had in mind, please get back to me with some additional information what the issue is, and I will happily assist you.

I am looking forward to your reply.

Regards,
Martin
Progress Telerik

[serge]

comment removed

[Jimmy]

Hi Martin,

I need to archive the following.

1. Grid edit incell (done, ok)

2. Add New Dropdown item (this dropdown list will show in grid column)  (done, ok)

3. Grid column will show the new item i added previously. (this is the one i failed to manage)

 

Please help, thanks.

[Martin]

Hello Jimmy,

Attached you will find a small project with a Grid with a DropDownList for an inCell editor. You will see that you are able to add new items to the DropDownList. Could you please review the project and see it works for you? Notice that I have define the DataSource separately as you will need an Update handler to update the DataSource when you add a new item, as show in the Add new item demo.

If the above still does not help you resolve the issue, please modify the project to reproduce the issue you are experiencing along with some additional explanations about the desired result.

Regards,
Martin
Progress Telerik

[serge]

this project actually is not compiling in VS 2019 with .net 5...

[Stoyan]

Hello Serge,

The reason for this is that the project is configured for .NET Core 2.2.

That being said I have updated the project for .NET 5. You can find the  attached project below.

Please let me know, if further questions arise.

[Jimmy]

Hi Martin,

I tested the solution that provided.

But once i add the a new item, the grid cell will exist the edit mode.

I need the grid cell to display the new item i added.

Example after i added "Apple", the grid cell should display "Apple" value and when i clicks on the grid cell, it will select “Apple" from the dropdownlist.

 

Please assit, thanks

[Martin]

Hello Jimmy,

You can do that by using the text method of the DropDownList if you pass the value variable in the addNew function:

function addNew(widgetId, value) {

    var widget = $("#" + widgetId).getKendoDropDownList();
    var dataSource = widget.dataSource;

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

        dataSource.one("sync", function () {
            widget.select(dataSource.view().length - 1);
        });

        dataSource.sync();
    }
    $("#Category").data("kendoDropDownList").text(value);
};

By doing that after adding the new item, the new text will be set before the cell exists the edit mode.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik