how to add unique username in kendo ui and show alert or message after this insert duplicate username

Question

I want to use kendo ui for manage the users in asp.net mvc and i need that kendo ui don't create duplicate username and display the error message that "the user name is duplicate"

this is my action for create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNewCountry([DataSourceRequest]DataSourceRequest request, CountryViewModel c,int countryId)
{
    if (c != null && ModelState.IsValid)
    {
        countryService.Create(c);
    }
    return Json(new[] { c }.ToDataSourceResult(request, ModelState));
}

Thanks in advance for your help

Answer 1

I sent you a solution in your other post (see here). But here is how you handle SERVER side errors using the kendo CLIENT grid. Some of these steps could be changed. For example, you could popup an alert instead of displaying the error on the editor template.

1) Add a model state error to your action:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNewCountry([DataSourceRequest]DataSourceRequest request, CountryViewModel c,int countryId)
{
    if (countryService.UserExists(c.UserName) // You need to code this
    {
        ModelState.AddModelError("UserName", "User name already exists.");
    }

    if (c != null && ModelState.IsValid)
    {
        countryService.Create(c);
    }
    return Json(new[] { c }.ToDataSourceResult(request, ModelState));
}

2. Handle the error event on your DataSource:

@(Html.Kendo().Grid<OrderDetailViewModel>()
    .Name("orderDetailsGrid")

    /* Not relevant grid setup code... */

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(builder => builder.Url("/api/CustomerOrderDetails/GetOrderDetails/" + Model.OrderId).Type(HttpVerbs.Get))
        .Create(builder => builder.Url("/api/CustomerOrderDetails/CreateOrderDetail/" + Model.OrderId).Type(HttpVerbs.Put))
        .Update(builder => builder.Url("/api/CustomerOrderDetails/UpdateOrderDetail").Type(HttpVerbs.Post))
        .Destroy(builder => builder.Url("/api/CustomerOrderDetails/DeleteOrderDetail").Type(HttpVerbs.Delete))
        .Model(model => {
            model.Id(x => x.OrderDetailId);
            model.Field(m => m.OrderDetailId).DefaultValue(0);
        })
        .Events(events =>  events.Error("OrderDetails_Error"))
    ))

3) Add a placeholder for the errors to your editor template:

<ul class="errors"></ul>

4) Setup a kendo template to process the errors:

<script type="text/x-kendo-template" id="orderDetailsValidationMessageTemplate">
    # if (messages.length) { #
        <li>#=field#
            <ul>
                # for (var i = 0; i < messages.length; ++i) { #
                    <li>#= messages[i] #</li>
                # } #
            </ul>
        </li>
    # } #
</script>

5. Write the js error handler that will look at the server errors returned and format them into a template that can be displayed on the editor page:

OrderDetails_Error = function(args) {
    if (args.errors) {
        var grid = $("#orderDetailsGrid").data("kendoGrid");
        var validationTemplate = kendo.template($("#orderDetailsValidationMessageTemplate").html());
        grid.one("dataBinding", function(e) {
            e.preventDefault();

            $.each(args.errors, function(propertyName) {
                // take the template and insert it into the placeholder
                var renderedTemplate = validationTemplate({ field: propertyName, messages: this.errors });
                grid.editable.element.find(".errors").append(renderedTemplate);
            });
        });
    }
};