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.
Hello,
I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected.
Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
My TabStrip coding
@(Html.Kendo().TabStrip()
.Name("ReimbusementDetails")
.Items(x =>
{
x.Add().Text("Submitted")
.Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
.Content(
@<text>
@(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
.Name("ReimbursmentSubmitted")
.Columns(column =>
{
column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
.ClientTemplate("#if (MultipleCategory == 0)"
+ "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}else"
+ "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}#");
column.Bound(c => c.VendorName).Title("Vendor name");
column.Bound(c => c.InvoiceNumber).Title("Invoice #");
column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.BudgetCategory).Title("Budget Category");
column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
})
.Sortable()
.Scrollable(s => s.Height("auto"))
.ColumnMenu()
.Mobile()
.ToolBar(tool => tool.Excel())
.Excel(ex => ex
.AllPages(true)
.Filterable(true)
.FileName("Reimbursement Submitted.xlsx")
.ProxyURL(Url.Action("ValidationErrorExport", "Application"))
)
.DataSource(ds => ds
.Ajax()
.GroupPaging(true)
.Group(g =>
{
g.Add(x => x.GrantName);
g.Add(x => x.ProjectName);
})
.Aggregates(ag =>
{
ag.Add(x => x.GrantName).Count();
ag.Add(x => x.ProjectName).Count();
})
.Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
)
)
</text>
);
x.Add().Text("In Progress")
.Content(
@<text>
@(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
.Name("ReimbursmentInProgress")
.Columns(column =>
{
column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
.ClientTemplate("#if (MultipleCategory == 0)"
+ "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}else"
+ "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}#");
column.Bound(c => c.VendorName).Title("Vendor name");
column.Bound(c => c.InvoiceNumber).Title("Invoice #");
column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.BudgetCategory).Title("Budget Category");
column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
})
.Pageable()
.Sortable()
.Scrollable(s => s.Height("auto"))
.ColumnMenu()
.Mobile()
.ToolBar(tool => tool.Excel())
.Excel(ex => ex
.AllPages(true)
.Filterable(true)
.FileName("Reimbursement In Progress.xlsx")
.ProxyURL(Url.Action("ValidationErrorExport", "Application"))
)
.Events(ev => ev.DataBound("ExpandProgress"))
.DataSource(ds => ds
.Ajax()
.GroupPaging(true)
.Group(g =>
{
g.Add(x => x.GrantName);
g.Add(x => x.ProjectName);
})
.Aggregates(ag =>
{
ag.Add(x => x.GrantName).Count();
ag.Add(x => x.ProjectName).Count();
})
.Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
)
)
</text>
);
})
)
I have tried with Event DataBound("ExpandProgress") javascript but still not working.
Any advice to achieve this. Thank you.
Hi there,
I recently updated our Kendo files inside our MVC application to version 2023.1.117. And I found an issue on Kendo Tabstrip: that when we setup the default index using .SelectedIndex(0), the tabstrip would setup k-state-active class into the targeted tab instead of the newer k-active class. The same thing happen if we set the .selected(True) at the tabitems.
This is causing problem with the styling and tab content display because of when we start navigating to another tab via clicking, the code won't clear up the k-state-active class. Thus there'll be always 2 active state. Is this a bug from the latest version or is there something that I missed?
Strangely enough, when I checked the MVC demo page of tabstrip, the code won't produce k-state-active class at all. I assume your demo is using the latest version of your code. Why the difference? Cheers.
Is there a solution for assigning a unique ID to a table strip item? Currently I can see an example where you can reference the TabStip item name with the following however I need to assign a unique ID because the item name of my tabs can vary. The ordinal position can vary also.
$(e.item).find("> .k-link").text()
I just performed an upgrade of our Telerik UI for MVC from version 2021.1.119.545 to 2022.3.1109 via the Upgrade Wizard on the VS 2022 Telerik extension. But now some of the javascript code is not working properly, in particular the tabStrip disable function. Here is an example of the code that previously worked fine...
var tabStrip = $("#formTabStrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.disable(tabStrip.tabGroup.children().eq(5)); <== no longer works after upgrade
Any idea why this may be happening?
Thanks!
I am working on tabstrip and have created 3 of them.
One tabstrip has a .Selected(True) to be open when page is loaded initially.
But, the issue is, when I click on other tabs it does not respond in the 1st attempt (content is displayed below the content of 1st tab).
But, on 2nd attempt the tabs are working, although the focus is still consistent on the 1st tab, and it's not changing as we navigate to other tabs.
What might be happening here?
As you can see here, focus is on both Paris and Moscow, but actually it should only be on Moscow.
Hi Everyone.
I have a tabsrip with three two tabs, each tab has grid and calling the controller to get the data.
My question is how to show the content when user clicks the tab (On Demand). I don't want to load the while page loads.
grid:
@(Html.Kendo().Grid<KendoUIMVC5.Models.ProductViewModel>()Thanks,
Raja.
Hey guys,
I got the problem that "ContentHtmlAttributes" are not applied when loading with "LoadContentFrom".
Same problem as in this thread, but that one is old and was posted in community forum.
My TabStrip:
@(Html.Kendo().TabStrip()
.Name("tabStripNav")
.Items(x =>
{
x.Add()
.Text("Header 1")
.ContentHtmlAttributes(new { style = "background-color: red !important;" })
.LoadContentFrom("Action1", "Controller", new{itemId = Model.Id});
x.Add()
.Text("Header 2")
.LoadContentFrom("Action2", "Controller", new{itemId = Model.Id});
x.Add()
.Text("Header 3")
.LoadContentFrom("Action3", "Controller", new{itemId = Model.Id});
})
)
Am I doing anything wrong here?
Best regards
Nils