This really has got me stumped. I have a grid that has a tabstrip in it's custom editor template. This tabstrip calls a partial view with a grid in it. I'm getting to the partial view just fine.  But when I call my read action method it can't find it because it has my controller name twice in the url.  When I had this before it was because something was not defined in my grid correctly.  I don't think that is the case here since it is so simple.  I am using areas.

I'm going to show the code from the EditorTemplate onwards.  Please let me know if you need the initial view.

EditorTemplate

@using Compass.Areas.HookupCharges.Models
@using Compass.Areas.Lookup.Models
@model HookupChargeViewModel

<div class="container-fluid">
    <form>
        <div class="form-group">
            <div class="row">
                <kendo-tabstrip tab-position="left" name="tabstrip-left">
                    <items>
                        <tabstrip-item selected="true" 
                                       text="Property Information" 
                                       content-url="@Url.Action("PropertyInformation", "HookupCharges", new { hookupId = "#=Id#" })"
                                       type="POST">

                        </tabstrip-item>

Controller

namespace Compass.Areas.HookupCharges.Controllers
{
    [Area("HookupCharges")]
    public class HookupChargesController(HookupChargeServices hookupChargeServices, LookupService lookupService) : BaseController

{...

public IActionResult PropertyInformation(int hookupId)
 {
     ViewData["HookupId"]= hookupId;
     // You can pass a model to your partial view here if needed
     return PartialView("_PropertyInformation");
 }

...}

Partial View

@using Compass.Models;
@{
    var _hookupId = (int)ViewData["HookupId"];
}

@(
Html.Kendo().Grid<PropertyInfoViewModel>()
    .Name("HookupChargePropertyGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id);
        columns.Bound(p => p.Address);
        columns.Bound(p => p.AddressDirection);
        columns.Bound(p => p.StreetUnit);
        columns.Bound(p => p.TaxAccount);
    })
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("HookupPropertyInfo_Read", "HookupCharge", new { hookupId = _hookupId }))
    )
)

Controller

It Never Gets Here

[HttpPost]
public async Task<IActionResult> HookupPropertyInfo_Read([DataSourceRequest] DataSourceRequest request)
{
    var model = await _hookupService.GetAllHookupChargePropertiesAsync(1279);
    var result = model.ToDataSourceResult(request);

    return Json(result);
}

Output

 https://localhost:44358/HookupCharges/HookupCharge/HookupPropertyInfo_Read

I have no idea about the aria message.  I'll work on that while I wait for an answer.

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.

Hello,

I'm fairly new to Kendo and having an issue when attempting to pass a CustomerID to a TabStrip from a Grid.

Based on the following article I have tried to follow to get Order data loaded on the TabStrip however I'm running into the below JavaScript error

https://demos.telerik.com/aspnet-core/grid/detailtemplate

Syntax error, unrecognized expression: #tabStrip_#=CustomerID# & Uncaught Error: Syntax error, unrecognized expression: #grid_#=CustomerID#

Please see Grid and TabStrip code below.

@(Html.Kendo().Grid<LewisTestProject.Models.Customer>()
  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => {
          model.Id(p => p.CustomerID);
          model.Field(p => p.CustomerID).Editable(false);
      })
      .PageSize(18)
      .Read(read => read.Action("Customers_Read", "Customer"))
      .Create(create => create.Action("Customers_Create", "Customer"))
      .Update(update => update.Action("Customers_Update", "Customer"))
      .Destroy(destroy => destroy.Action("Customers_Destroy", "Customer"))

   )
  .Columns(columns =>
  {
      columns.Bound(order => order.CustomerID);
      columns.Bound(order => order.CompanyName);
      columns.Bound(order => order.ContactName);
      columns.Bound(order => order.ContactTitle);
      columns.Bound(order => order.Address);
      columns.Bound(order => order.City);
      columns.Bound(order => order.Region);
      columns.Bound(order => order.PostalCode);
      columns.Bound(order => order.Country);
      columns.Bound(order => order.Phone);
      columns.Bound(order => order.Fax);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }
      ).Title("Actions");
  })
  .ToolBar(toolbar => {
      toolbar.Create();
      toolbar.Search();
  })
  .Pageable()
  .Sortable()
  .ClientDetailTemplateId("template")
  .Events(events => events.DataBound("dataBound"))
  .Editable(e => e.Mode(GridEditMode.InLine))
 )

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=CustomerID#")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Orders").Content(@<text>
            @(Html.Kendo().Grid<LewisTestProject.Models.OrderViewModel>()
                .Name("grid_#=CustomerID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.CustomerID);
                    columns.Bound(o => o.OrderID).Title("ID").Width(100);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("OrdersDetail_Read", "Customers", new { customerID = "#=CustomerID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                )
        </text>
        );
        //items.Add().Text("Contact Information").Content(
        //    "<div class='employee-details'>" +
        //        "<ul>" +
        //            "<li><label>Country:</label>#= Country #</li>" +
        //            "<li><label>City:</label>#= City #</li>" +
        //            "<li><label>Address:</label>#= Address #</li>" +
        //            "<li><label>Home Phone:</label>#= Phone #</li>" +
        //        "</ul>" +
        //    "</div>"
        //);
    })
    .ToClientTemplate()
    )
</script>

Any help would be greatly appreciated.

Thanks,

Lewis.

I have a div  tag which has all three controls within the tag

1. TabStrip as the main container

2. Panel bar inside the tab

3.Dropdown inside the panel bar.

But the code is giving me the error - Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.

Can somebody help me to resolve  and  fix it.

Below is my code structure

I am using autoFitColumn function on a Telerik UI for MVC grid to show the content of all cells as per the below article.

https://docs.telerik.com/aspnet-mvc/knowledge-base/grid-autofit-all-columns-width

This works if the grid's display is not none. However, there are three tabs on the page, each containing a grid. Only the opened grid has correct column widths. Other grids have minimum column widths. This is unless the user manually opens each tab quickly during data load.

I tried using Telerik's TabStrip at first, but the grid always has minimum column widths when using autoFitColumns, even on the first tab. The goal was to put a Grid inside each tab of the TabStrip. Currently, I am using custom built tabs. 

My current solution to this problem is to set the "hidden" style of each grid to:

position: absolute;
top: -9999px;
left: -9999px;

Is there a better solution?

I upgraded my application to 2024.4.1112 and now my fonts are small and some of my buttons are left justified instead of right justified.

I am including before and after pictures.

Can someone assist with this issue?

Thanks.

Hi, I am new to this, so I apologise if this is a simple question/answer.

I have been asked to "learn while doing" on some code .

at the moment, if a filter is used on a ride, and it return matches, the first row is selected, and that data is then used to help get data for the tab strip.

If the filter returns on rows, the tapstrip still has the data showing for the previous (still selected ? ) row .

I have tried

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
               var tabStrip = $("#details").data("kendoTabStrip");
					
                if (displayedRows.length === 0) {
                    // Display the length of displayed rows for troubleshooting
                    /*                    alert("Number of displayed rows: " + displayedRows.length); // Show in alert for easier visibility*/
                    //var tabStrip = $("#details").data("kendoTabStrip");
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                }
                else {
                }
            });

and this works for the First time it finds length = 0, but if I clear the filter and do a search that has results, or clear the filter and select the first row in #grid, the tabstrip is not updated.

please can someone advise what I need in the else clause, as anything gi put in here either doesn't work, or "breaks" the other options grid.binds i have in that sets the default search filter on one column to "contains". 

thanks

I have a Kendo tabstrip with partial views. When I click on the tab, the partial views are loaded. But I need to set the focus() and/or tabindex to a specific element in the partial view, for example the first text box. I tried setting the tabindex to 1 in the partial view. But that does Not seem to work.

There seems to be 2 TabStrip methods for loading a partial views ?

.LoadContentFrom("CustomerEdit"... and .Content(@<text> @Html.Partial("OrdersEdit"

I think the LoadContentFrom is Ajax.

Using Content(@<text> @Html.Partial("OrdersEdit"**... how can I set the focus to my first textbox on the the OrdersEdit.. I tried setting tabindex =1 and tried this:

 $(document).ready(function () {
    $('#firstTextBox').focus();
}

But does not work.

My company has three very large apps that are dependent on Kendo. I've been trying for several days to update the Kendo version in our largest app from version 2022.3.913. I was able to update with no problems to version 2023.1.117. But when I try to go beyond that, it's completely hosed. Worst of all is the use of icons. I can't make them work no matter what I do. We've been using .SpriteCssClass() to attach icons to buttons and menu items as well as using the k-icon k-i-xxx classes in grid item templates. None of that works anymore. None of the suggested fixes for this work with version 2023.2.829 either. I've tried telling the app to use font icons via KendMvc.Setup() in my Startup.cs and BaseController.cs files, neither of which worked. I installed both the FontIcons and SvgIcons NuGet packages, which at least allowed me to build the app. I was able to use the .Icon() method on a Button widget to use one if the SVG icons that I saw in an example, but nowhere on your site can I find a list of standard SVG icons like the list of font icons, so I wasn't able to find the icons I had been using. In addition to the complete inability to make icons work, the way you've changed font sizing for widgets has made the app look very different than before the update and has made various customizations we've made in our site.css file look very bad. Ditto for some random styling changes you've made for menu items and anchor tags in grid templates.

In short, you have really screwed us over and I don't know if we're going to be able to update past 2023.1.117. I see lots of others have had these same issues and I don't see you responding with any real solutions.