Link to home
Start Free TrialLog in
Avatar of Stacey Fontenot
Stacey Fontenot

asked on

Can't Display Bootstrap 4 Alert With DataGrid

I have a web application that is leveraging Telerik RadGrid to display database content. Framework is MVC with C#. I am trying to display a bootstrap alert with a message "Record Successfully Added". The issue is the Bootstrap Alert is never displayed. When I move the code to a page without the RadGrid, the Alert displays perfectly...So I believe this is a timing issue. I believe the placement of the Alert could also be the issue, but I can't seem to get this to work. See chtml code below. @Html.Action("ShowAlert") is the call for the Alert which I can run in debug and see the alert populated.

@{
    ViewData["Title"] = "Meals";
    ViewData["Icon"] = "fa-utensils";
    ViewData["Subtitle"] = "Stay tuned, wonderful content will arrive here soon.";
}

<div class="br-section-wrapper">
    @Html.Action("ShowAlert")

    @(Html.Kendo().Grid<synergix365.Models.Maintenance.Master.Meals>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Meal_ID).Title("Meal ID").Visible(false);
                    columns.Bound(p => p.Coop_ID).Title("Co-op ID").Visible(false);
                    columns.Bound(p => p.Meal_Name).Title("Meal Name");
                    columns.Bound(p => p.Meal_Type_ID).Title("Meal Type ID").Visible(false);
                    columns.Bound(p => p.Meal_Type_Name).Title("Meal Type");
                    columns.Bound(p => p.Charge).Title("Charge");
                    columns.Bound(p => p.Cost).Title("Cost");
                    columns.Bound(p => p.Active).Title("Active").Visible(false);
                    columns.Bound(p => p.Created_Date).Title("Date Created").Hidden(true);
                    columns.Bound(p => p.Updated_Date).Title("Date Updated").Hidden(true);
                    columns.Bound(p => p.Created_By).Title("Created By").Hidden(true);
                    columns.Bound(p => p.Updated_By).Title("Updated By").Hidden(true);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(220);
                })
                .HtmlAttributes(new { @class = "grid" })
                .ToolBar(toolbar =>
                {
                    toolbar.Create().Text("Add Meal");
                    toolbar.Excel();
                    toolbar.Pdf();
                })
                .Excel(excel => excel
                    .FileName("Kendo UI Grid Export.xlsx")
                    .Filterable(true)
                    .ProxyURL(Url.Action("Excel_Save", "Base"))
                )
                .Pdf(pdf => pdf
                    .AllPages()
                    .AvoidLinks()
                    .PaperSize("A4")
                    .Scale(0.8)
                    .Margin("2cm", "1cm", "1cm", "1cm")
                    .Landscape()
                    .RepeatHeaders()
                    .TemplateId("page-template")
                    .FileName("Kendo UI Grid Export.pdf")
                    .ProxyURL(Url.Action("Pdf_Save", "Base"))
                )
                .Editable(editable =>
                    editable.Mode(GridEditMode.PopUp).TemplateName("MealsEditor"))
                .Scrollable(s => s.Height("auto"))
                .Sortable()
                .Filterable()
                .Reorderable(reorder => reorder.Columns(true))
                .Resizable(resizable => resizable.Columns(true))
                .ColumnMenu()
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(8)
                    .Model(model =>
                    {
                        model.Id(p => p.Meal_ID);
                        model.Field(p => p.Coop_ID);
                        model.Field(p => p.Meal_Name);
                        model.Field(p => p.Meal_Type_ID);
                        model.Field(p => p.Meal_Type_Name);
                        model.Field(p => p.Charge);
                        model.Field(p => p.Cost);
                        model.Field(p => p.Active).DefaultValue(true);
                        model.Field(p => p.Created_Date).Editable(false);
                        model.Field(p => p.Updated_Date).Editable(false);
                        model.Field(p => p.Created_By).Editable(false);
                        model.Field(p => p.Updated_By).Editable(false);
                    })
                    .Read("Meals_Read", "Meals")
                    .Create("Meals_Create", "Meals")
                    .Update("Meals_Update", "Meals")
                    .Destroy("Meals_Destroy", "Meals")
                )
                .Events(events => events.Save("onGridSave"))
    )
</div>

<script type="text/javascript">
    //adding remote rule to handle validation based on Remote attribute set in the model.
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();

                    var validator = this;
                    var currentInput = input;
                    input.attr("data-val-remote-requested", true);
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: JSON.stringify(postData),
                        dataType: "json",
                        traditional: true,
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data == true) {
                                input.attr("data-val-remote", "");
                            }
                            else {
                                input.attr("data-val-remote", data);
                            }
                            input.attr("data-val-remote-recieved", true);
                            validator.validateInput(currentInput);

                        },
                        error: function () {
                            input.attr("data-val-remote-recieved", true);
                            validator.validateInput(currentInput);
                        }
                    });
                    return true;
                }
            },
            messages: {
                remote: function (input) {
                    return input.attr("data-val-remote");
                }
            }
        });
    })(jQuery, kendo);

    function onGridSave(e) {
        e.sender.one("dataBound", function () {
            e.sender.dataSource.read();
        });
    }

    //show server errors if any
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

Open in new window

Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

First check if you have any error using chrome  right click inspect, if you have error you will need to fix it first.

I don't know about your grid script but I know that in most of grid and table script that have a lot of features
most of the time alert / toggle / popup are in conflict and need custom code to make it work.
Avatar of Stacey Fontenot
Stacey Fontenot

ASKER

There are no errors occurring. Any idea for the custom script to get it to work?
check the console when you trigger the alert
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.