Hi,

We are using Kendo controls for MVC. There was a security scan done in our application, it capture few of the security issues.

We are able to fix all of the security issues except one.

CWE 829 - The application contains unsafe Content-Security-Policy (CSP) directives that could allow malicious script code to be included on the page.

So, as a result we have removed all the custom inline javascript and css to an external files and refer those external .js and .css files in our .cshtml page.

But when we use any of the Kendo controls like Kendo grid or Kendo calendar then in the runtime it create some inline scripts and we are getting application contains unsafe Content-Security-Policy (CSP) directives.

How to bypass those runtime inline scripts created by Kendo controls so that we don't get unsafe Content-Security-Policy (CSP) directives

during the security scan of the application.

Please let me know if you need any more information on this.

Yea, I know...that's a lot to ask.  I've gotten very close.  My code is below.

What I need is a tooltip that renders the results of a partial view when user hovers a specific column (column #6) in the kendo grid (mvc razor).  I need to show a list of active orders for the given row in the grid.

If the row.OnOrder = 0, I see the proper tooltip text "- no orders found -".

But when row.OnOrder > 0 and the AJAX call is necessary, the tooltip just shows an empty tooltip box (shown in screenshot).  In Chrome Network tab I can see the ajax call made, and I can see the html response of the partial view.  So I'm fairly certain the partial call is working and responding correctly.  VS debugger shows the controller gets hit and returns the view.  But the result doesn't populate to the tooltip.  I just get a little grey box.

I feel like I'm missing some really, really small but I can't tell what.  Any suggestions?  The partial view does have a kendo grid in it as well, if that matters.

document.ready():

            $("#grdStockLevels").kendoTooltip({
                filter: "td:nth-child(6)", // Adjust the selector to target the specific column
                position: "top",
                content: function (e) {
                    var dataItem = $("#grdStockLevels").data("kendoGrid").dataItem(e.target.closest("tr"));

                    if (dataItem.OnOrder > 0) {
                        return $.ajax({
                            url: '@Url.Action("OpenOrderList", "Purchasing")',
                            type: 'GET',
                            async: false,
                            data: {
                                productId: dataItem.ProductId,
                                optionList: dataItem.OptionList
                            }, 
                            dataType: 'html'
                        });
                    } else {
                        return "- no open orders -";
                    }

                }
            }).data("kendoTooltip");

Controller partial view:

        public ActionResult OpenOrderList(int productId, string optionList)
        {
            // validate product
            Product p = _productRepo.Load(productId);
            if (p == null) return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

            // locate open order items
            var orderItemList = p.SupplierOrderItems.Where(z => z.OptionList == optionList && z.Order.OrderStatus.IsActive).ToList();

            IList<SupplierOrderModel> model = orderItemList.Select(x => new SupplierOrderModel()
            {
                OrderNumber = x.Order.OrderNumber,
                EtaDate = x.Order.EtaDate,
                SupplierShipMethodId = x.QtyRemain
            }).ToList();

            return PartialView("_OpenOrderListPopup", model);
        }

partial view:

@model IList<SupplierOrderModel>


@(Html.Kendo().Grid(Model)
    .Name("grdOpenOrderList")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderNumber).Title("Order Number");
        columns.Bound(p => p.EtaDate).Title("ETA Date").Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.PurchaseMethodId).Title("Qty On Order");
    })
    .HtmlAttributes(new { style = "height: 550px;" })
)

I would like to display data in a popup window or tooltip when users hover over or click on a cell in the Telerik grid. I tried using the Telerik tooltip, however the tooltip doesn't display at all. I also tried the jquery and bootstrap tooltips, but they do not work as well. When I use the tooltips for an element outside of the grid, they work fine. Does anyone have a razor example for using the Telerik tooltip in a grid?  Also, are there other ways to approach this? Essentially, I want to display a small popup window with a table of additional information related to one specific cell in each row of the table.

Value column has an inline validation of max and min. On entering the correct values also I am getting this error. 

I am using this JS code for custom input control. Please suggest me some approach to resolve this error.

i am getting the error when i use @html.kendo()

it showing are you missing any directives

>please suggest any solution

I just upgraded to version 2022.1412 from 2020.3.915.  I have a tooltip that loads dynamic content.  It used to show a loading panel to the user while it was reaching out the server.  After I upgraded it doesn't show it anymore and sometimes it seems like it's not doing anything because the load can take a few seconds.  Is there anyway to get this back?

This is what it used to look like...

Thanks

Hi,

I have been trying to display an image inside a Kendo Tooltip in MVC.

The image src is from web.

When I deploy my app in Azure and try to view the tooltip. It do not display the image, instead I get a <broken image> icon displayed.

Requirement:

I am displaying list of Image files in a table in a page.

The table has three columns:

Document Name  |    Date of Upload    |     Uploader name

The "Document Name" column will display the name of the documents and these names are visible in the form of hyperlink that has the URL of the document location. (The documents are from SharePoint Online).

My requirement is to on hover I must display a tooltip that will display the image file. (which resembles like a preview)

I am using the below code for kendo tooltip

Here "td.documentNo" :- .documentNo is a class name given to identify the column.

Here "a.hasTooltip" :- .hasTooltip is a class name given to identify the Anchor tag

This on testing in my local works absolutely fine. But when I upload this in Azure Cloud the code doesn't work. It display the tooltip but the image is not displayed.

Am I doing anything wrong. Please guide me.

Regards,

Niroj.

Hi,

I couldn't add the Export to Excel feature to my Dashboard due to the system error "Excel Export in Server Binding Mode".

I am wondering if it is doable by changing my current code. (As an example, I pasted one of the Dashboard tabs that we'd like to be able to download to Excel).

Thank you!

 items.Add()
         .Text("LLL")
                .Content(@<text>
                    <b>All values in $mn</b>
                <div>
                     @(Html.Kendo().Grid(Model.LLL_Item).Name("LLL")
                        .Columns(col =>
                        {
                            col.Bound(c => c.Asset).Title("Asset").Width(200);
                            col.Bound(c => c.Current).Title("Current").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE0).Title("Year End").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE1).Title("Year 1").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE2).Title("Year 2").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE3).Title("Year 3").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE4).Title("Year 4").Format("{0:C}").Width(100);
                            col.Bound(c => c.YE5).Title("Year 5").Format("{0:C}").Width(100);

                        })
                            .ToolBar(tools => tools.Excel())

                            .Excel(excel => excel
                                .FileName("Export.xlsx")
                                .Filterable(true)
                                .ProxyURL(Url.Action("Excel_Export_Save", "Reports"))
    ))
        </div>

And in Controller I have this:

I have a grid, I have added custom validations on multiple columns. It's working as expected. But there is one issue, I am not able to edit other cells if there is any validation error on the cell, So first I need to fix the error for this cell then only I am allowed to edit other cells. But I want that it should show the validation error in the tooltip and as well as to edit other cells.

I have attached the tooltip message in the question.

columns.Bound(config => config.X).Title("X").HeaderHtmlAttributes(new { @class = "grid-headercustom" }).
ClientTemplate("#if(data.X == 1)" + "{#<span>Y</span>#}" + "else{#<span>N</span>#}#").
HtmlAttributes(new { @class = "grid-rowcustom" }).HtmlAttributes(new { style = "font-size:12px" }).Filterable(ftb => ftb.Enabled(false));

$.extend(true, kendo.ui.validator, {
    rules: {
        RateV: function (input, params) {
            if (input.is("[name='X']")) {
                var grid = $("#mygrid").data("kendoGrid");
                var row = input.closest("tr");
                var dataItem = grid.dataItem(row);
                if (dataItem.X == true && dataItem.Y <= 0) {
                    input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return false;
                }
            }
            
            return true;
            }
        },
        messages: {
            RateV: function (input) {
                // return the message text
                return input.attr("data-val-X");
            }
        }
    });
})(jQuery, kendo);

I have tried to return true also but it doesn't show the error then.

 input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return true;