or
1 answer
16 views
We're using the kendo-window component with iFrames and would like to hide the taghelper's header and implement the functionality that provides in our iFrame razor page. Is there a way to do this using the the <kendo-window> taghelper control?
Eyup
Telerik team
answered
on
31 May 2025
1 answer
12 views
Hello,
We are using older version of Telerik Ui for Asp.net core (2020.2.617), where we are using kenod.window() component. Within this when we inspect close , min and max button they are rendered as <a> tag with role=button and href=#.
When i see the latest version in documentation they are rendered as <button> instead of <a>.
Is that a change recently made? Also , we are asked to change it to button due to accessibility implementation. We understand that we can upgrade our project to latest version , but is there any other way to do so with minimal of code change?
Ivan Danchev
Telerik team
answered
on
28 May 2025
2 answers
897 views
I am currently trialing the products to see if I can get them to do what I need for an app under development.
In my app I have a grid that lists all of a customers active products.
I want to be able to click on an item in the grid (link or button) to launch a modal dialog where I can display in depth info regarding that item - the popup itself would need to have tabstrip and perhaps one or two grids on itself.
So I obviously need to design a view to display all this info which is fine, and I assume the Window component is the most suitable to effect the popup?
I can't seem to find a concrete example of how to call the window from the initial grid, pass the parameter of the selected item, and then load the view within the window.
As I say I am new to all this so feeling my way a little and so any guidance is greatly appreciated.
Thanks
0 answers
61 views
Please delete. Not a bug.
1 answer
493 views
Hi
Can we achieve sticky header on the grid with page scroll instead of having a scrollbar within a grid.
If you refer to any example: https://demos.telerik.com/aspnet-core/grid they have one scrollbar for grid n one for page. Can we eliminate grid n display all data rows n have a sticky header as we goes down?
Vasko
Telerik team
answered
on
03 Oct 2023
5 answers
237 views
I have a button which opens a window in a razor-page.
The first time I click the button, everything works fine. But when I close the window and click the same button again, the window is not opening.
The button and the window are nested inside a TabStrip.
This is the code for the button and the window:
<div id="tabVoucher">
<button type="button" id="btnAddVoucher" class="btn btn-default">Create New</button>
@(
Html.Kendo().Window()
.Name("winAddVoucher")
.Animation(a =>{
a.Open(o => o.Expand(ExpandDirection.Vertical));
})
.Draggable()
.Actions(ac => ac
.Minimize()
.Maximize()
.Close()
)
.Content(@<form method="post" class="needs-validation" novalidate>
<div class="row">
<div class="col-12">
<label for="txbCode" class="form-label">Code</label>
<input type="text" id="txbCode" class="form-control" required/>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="txbFrom" class="form-label">From</label>
@(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidFrom).ComponentType("modern").HtmlAttributes(new { id = "txbFrom" }).Deferred())
</div>
</div>
<div class="row">
<div class="col-12">
<label for="txbTill" class="form-label">Till</label>
@(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidTill).ComponentType("modern").HtmlAttributes(new { id = "txbTill" }).Deferred())
</div>
</div>
<div class="row mt-3">
<button type="submit" class="btn btn-default">Create</button>
</div>
</form>)
.Visible(false)
.Deferred()
)
</div>$(document).ready(function () {
$('#btnAddVoucher').click(function(e){
$('#winAddVoucher').data('kendoWindow').open();
});
});
Vasko
Telerik team
answered
on
10 Aug 2023
1 answer
446 views
we are upgrading to Telerik and we have a grid button that shows details beyond what the row is showing.
i have the button and the pop up working but im unsure on how to make this ->
<div class="modal-footer">
<a asp-action="UpdateClaimStatus" asp-route-claimId="@item.ClaimId" asp-route-newStatus="-1"
asp-route-cycle="@Model.CycleId" asp-route-page="@(Model.Page)" asp-route-status="@(Model.StatusFilter)"
asp-route-sort="@(Model.Sort)"
class="btn btn-outline-secondary @(item.StatusID < 2 ? "" : "disabled")"
onclick="showElement('actionShield')">
<i class="fa fa-refresh"></i>
Re-import Claim
</a>
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">
Close
</button>
Work with this ....
@(Html.Kendo().Window().Name("Details")
.Title("Claim Details")
.Visible(false)
.Modal(true)
.Draggable(true)
//.Width(300)
)
thanks!!!!
Stoyan
Telerik team
answered
on
05 Jul 2023
1 answer
193 views
Hi,
I have a use case where a user can click on a link or button in a parent record in a Kendo Grid, which causes a Kendo Window to become visible and display within it another Kendo Grid listing the child records corresponding to the record clicked in the parent page. In this case, the parent Grid would display a list of Document records; When the user clicks on a link or button in the row of a particular Document, a Window pops up with the Version History records for the Document in another Grid.
Should the Version History Grid be in a partial view, as suggested in https://stackoverflow.com/questions/28772589/load-kendo-grid-in-kendo-window, and then brought into the Window, which is constructed in JavaScript, or is there a better/more standard approach, preferably one that uses html helpers?
Also, how do I set it up so that the Grid in the Window only displays Version History pertaining to the Document that was clicked?
If anybody has links to examples/samples that I can research, or can answer my questions, I'd be most appreciative. I think that similar use cases just use the Grid Hierarchy, but unfortunately it's not an option for my use case.
Thanks!
Taylor
1 answer
114 views
hi
how to refresh grid and TreeView Parent Page ?
The parent page includes grid and TreeView and I want the child page that is in the new tab
Update grid and TreeView.
Also, on the child page or the new tab, by clicked on the button, a kendo window will open in iframe mode, which I want to change the grid and TreeView after clickined the save button ، be updated on the main page.
Thanks
Alexander
Telerik team
answered
on
08 Mar 2023
0 answers
150 views
Hi there,
i have a window with a form. in these form there are three fields bound to my model.
One of the fields shouldn't be visible when the window was opened.
Here is the html helper code:
@{Html.Kendo().Window()
.Name("MeterData" + Model.Plan["Number"])
.Title("Vertragskontonummer: " + Model.PlanAccount.PlanAccount.Number + " Vertrags-Nr.: " + Model.Plan["Number"])
.Content(@<text>
<div class="window-plan-content">
<partial name="_PlanDetailData" />
<div style="padding-top: 20px; width: 100%;">
<div class="row window-form-content" style="border-radius: 13px 13px;">
<span class="accordeon-text-header" style="padding: 20px 0px 0px 20px;">Neuen Zählerstand angeben:</span>
</div>
<div class="row window-form-content">
<span class="accordeon-text" style="padding-top: 10px; padding-bottom: 20px; padding-left: 20px;">
Hier können Sie Ihren aktuellen Zählestand eingeben. Um sicher zu sein, dass Sie den richtigen Zähler<br />
abgelesen haben, sehen Sie hier Ihre zuletzt angegebene Zählernummer, die mit der Nummer auf Ihrem zähler<br />
übereinstimmen sollte.
</span>
</div>
<div class="row window-form-content" style="border-radius: 0px 0px 13px 13px;">
@(Html.Kendo().Form<Wsw.MeineWsw.Dks.Models.LastMeterReading>()
.Name("MeterDataDetailsForm")
.HtmlAttributes(new { action = "SaveMeterData", method = "PUT", style = "width: 100%;"})
.Layout("grid")
.ButtonsTemplate("<button id=\"closeMeterDetails" + Model.Plan["Number"] + "\" class=\"k-button open-modal-box\">Zurück</button><button id=\"submit-meter\" class=\"k-button k-primary k-form-submit open-modal-box\" type=\"submit\" planAccount=\"" + Model.PlanAccount.PlanAccount.Number + "\" plan=\"" + Model.Plan["Number"] + "\" meterNumber=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().Number + "\" registerKind=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().RegisterKind + "\" disabled=\"true\">Zählerstand übernehmen</button>")
.Grid(g => g.Cols(1).Gutter(20))
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(10))
.Items(i =>
{
i.Add()
.Field(f => f.Value)
.Label("Neuen Zählerstand angeben:")
.Editor(e => e.NumericTextBox().Spinners(false).Format("n0"))
.InputHtmlAttributes(new { style = "border-radius: 8px;" });
i.Add()
.Field(f => f.Date)
.Label("Ablesedatum")
.InputHtmlAttributes(new { style = "border-radius: 8px;" })
.Editor(e => e.DateInput().Format("dd.MM.yyyy").Messages(m => m.Day("tt").Month("mm").Year("jjjj")).Max(DateTime.Now).Min(DateTime.Now.AddDays(-14)));
i.Add()
.Field(f => f.Comment)
.Label("Kommentar")
.Id("ReadingComment")
.InputHtmlAttributes(new { style = "border-radius: 8px;" });
});
})
.Events(ev => ev.Submit("onFormSubmitMeter").Change("validateMeterForm")))
</div>
</div>
</div>
</text>
)
.Visible(false)
.Modal(true)
.Draggable(true)
.Scrollable(false)
.Width(1085)
.Height(746)
.Events(e => e.Activate("toogleMeterReadingCommentVisibility"))
.Render();
}And here is the way I tried to toogle the visibility of the field:
function toogleMeterReadingCommentVisibility(e) {
var parentEle = document.getElementById('ReadingComment-form-label').parentNode;
parentEle.style.display = 'none';
console.log(parentEle);
}After setting display = 'none' the DOM-Element has changed as expected, but only in the console. The field is still visibile.
Thanks for help.
Timo
