Conditional Error Message MVC

[Mengqing]

Hi,

 

We are wondering if it is possible to create a pop up message box using kendo UI for MVC that only shows up in the webpage if any value within a Kendo grid's column exceeds a certain number? Below is the code we have.  col.Bound(c => c.Current).Title("Current") would be the column that contains Double and if any of the values under Current exceeds the number 3, we'd like to have a pop up box in the web. 

Thanks!

    @(Html.Kendo().TabStrip()
    .Name("Tabs")
         .Items(items =>
         {

         items.Add()
         .Text("Table").Selected(true)

                    .Content(@<text>

             <div>

                            @(Html.Kendo().Grid(Model.XXTable).Name("XXTable")
                                .Columns(col =>
                                {
                                    col.Bound(c => c.Name).Title("XXX").Width(200).HeaderHtmlAttributes(new {style = "background:#d50032;font-weight:bold;color:white"});
                                    col.Bound(c => c.Current).Title("Current").Width(100).HeaderHtmlAttributes(new { style = "background:#d50032;font-weight:bold;color:white" });

                                }))
        </div>

         

[Patrick | Technical Support Engineer, Senior]

Hi Mengqing,

Please take a look at the following pertaining to UI for ASP.NET MVC support and a possible solution:

UI for ASP.NET MVC Support

Thank you for sending in your question and the relevant code. Before I get started, I want to let you know that we've changed the product to UI for ASP.NET MVC because that is what you're using. At the same time, it was necessary to modify the case from a private priority support to a public Q&A forum post because you do not have support for UI for ASP.NET MVC.

For this specific response, I will treat as a priority, but in the future you'll need to add UI for ASP.NET MVC to your Support account to open any new Priority Support cases. You can open Q&A Forum posts at any time.

Thank you for your understanding in the matter.

 

Show Kendo UI Notification Based on Amount

One way you can show a message if a specific field has a certain amount in the view is to enable an animationless Kendo UI Notification to show during the Kendo UI Grid's DataBound event.  You could append the notification above the Kendo UI TabStrip.  

Appended Container, Kendo UI TabStrip, Grid, and Notification

 

<div id="container"></div>

@(Html.Kendo().TabStrip()
.Name("Tabs")
 .Items(items =>
 {
    items.Add()
        .Text("Table").Selected(true)

                .Content(@<text>

                <div>
                    @(Html.Kendo().Grid<GridExample.Models.OrderViewModel>()
                                    .Name("grid")
                                    .Columns(columns =>
                                    {
                                        columns.Bound(p => p.OrderID).Width(200).HeaderHtmlAttributes(new { style = "background:#d50032;font-weight:bold;color:white" });
                                        columns.Bound(p => p.Freight).Width(100).HeaderHtmlAttributes(new { style = "background:#d50032;font-weight:bold;color:white" }); ;
                                    })
                                    .Pageable()
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(2)
                                        .Read(read => read.Action("Orders_Read", "Grid"))
                                    )
                                    .Events(e => e.DataBound("onDataBound"))
                        )
                </div>
                </text>);
     items.Add().Text("Tab 2").Content("Another Tab");
            })
)

@(Html.Kendo().Notification()
    .Name("greatAmount")
    .AppendTo("#container")
    .Animation(e => e.Enable(false))
    .AllowHideAfter(1000)
    .Templates(t => {
        t.Add().Type("info").ClientTemplateID("amountTooBig");
    })
)

 

Using a Kendo UI Template, you could define the message to be shown to the user.  

 

<script id="amountTooBig" type="text/x-kendo-template">
    <div class="messageWrapper">
        <h6>#= title #</h6>
        <p>#= message #</p>
    </div>
</script>

 

This can be defined in the Kendo UI Grid's DataBound event using some custom logic depending on the Grid DataSource's view.    

JavaScript

 

    function onDataBound(e) {
        //reference the Kendo UI Notification
        var notification = $("#greatAmount").data("kendoNotification");

        //Hide previous messages
        notification.hide();

        //create a string to hold the messages
        var messages = "";

        //get the items in the Grid's current View
        var data = e.sender.dataSource.view();

        //Loop through the data to determine if the amount is more and 2
        for (var x = 0; x < data.length; x++) {
            if (data[x].Freight > 2) {

                //If so, add a message
                messages += "Order " + data[x].OrderID + " has " + data[x].Freight + " amount of Freight. <br/> "
            }
        }

        //If there are items, show the notification
        if (messages.length > 0) {
            notification.show({
                title: "Too much Freight",
                message: messages
            }, "info");
        }

    }

 

Please take a look at the attached sample which demonstrates the above, and let me know if you have any questions.

Regards,
Patrick
Progress Telerik