or
1 answer
163 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
76 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
159 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
85 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
63 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
85 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
1 answer
167 views
Howdy
I am opening a window to display a razor page using the following
function dblClickCalEvent(e) {
var win = $("#scheduleWindow").data("kendoWindow");
win.refresh({
url: "@Url.Page("ScheduleForm", "Details")",
data: { clickDate: e.dataset.clickdate, scheduleId: e.dataset.scheduleid }
});
win.center().open();
}This opens the Razor page and calls the OnGetDetails and renders the page using the correct Model. I have a MultiSelect on the page using the Select Event which once a value is selected POSTs back to the page using the following:
function attendee_selected(e) {
$.ajax({
type: "POST",
url: "ScheduleForm?handler=AttendAdd",
data: { __RequestVerificationToken: '@token', attendee: e.dataItem.UserPrincipleName }
});
}Which posts to this:
public async Task<IActionResult> OnPostAttendAdd(string attendee)And returns Page();
I can see that the model gets populated while debugging the Razor page, however the page never renders the new results on page. I have tried to call a refresh on the window but this has no effect. Here is and example of where the ViewDates change once the Page is returned from the Post method and the changes are not reflected in the page in the window:
<table style="width: 100%;">
<tr>
@foreach (var d in Model.ScheduleAssistaint.ViewDates)
{
<td class="border1" style="text-align:center;">
@d.ToLongDateString()
</td>
}
</tr>
</table>Is this something to do with the fact the page is inside a window? If so is there a way to fix this?
Thanks
Alexander
Telerik team
answered
on
09 Sep 2022
0 answers
65 views
Keep in mind that I am new to .Net Core 6.0, ASP.Net and the newest Telerik tools! I have very little experience with js and Razor but am learning quickly!
With that said: I would like to create an input form for collecting search information. I have created a slide out window from the right side... I just can't find a good example of how to add input objects to the form! Any suggestions of research documents would be greatly appreciated!
Current Html & js defining form:
<div id="dialog"></div>
$("#dialog").kendoWindow({ title: "IVM - Search Engine",
width: "40%",
height: "85%",
actions: [ "close" ],
draggable: false,
resizable: false,
modal: true,
position:{ top: 75, left: "50%" },
//content: { url: "Address/getTypes",
// dataType: "json",
// iframe: false }
//item:{ kendoComboBox:{name:"cmbaddressTypes", dataSource:@AddressTypes.addressTypes }}
animation: { open: { effects: "slideIn:left", duration: 500 },
close: { effects: "slideIn:left", reverse: true, duration: 500 } },
visible: false })
The AppBar declaration placing the search button on the bar.
@(Html.Kendo().AppBar()
.Position(AppBarPosition.Top)
.PositionMode(AppBarPositionMode.Fixed)
.Name("appbar")
.Items(items=> {
items.Add().Template("<a class='k-button k-toggle-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
items.Add().Type(AppBarItemType.Spacer).Width("16px");
items.Add().Template("<h3>International Vending Machines</h3>").Type(AppBarItemType.ContentItem);
items.Add().Type(AppBarItemType.Spacer).Width("800px");
items.Add().Template("<a class='k-button k-search-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#' id='openWindow'><span class='k-icon k-i-search'></span></a>").Type(AppBarItemType.ContentItem);
})
.Deferred()
)
and finally, the delegate and event:
$("#appbar").on("click", ".k-search-button", function (e) { IVMSearch(e); })
<script>
function IVMSearch(e)
{ var dialog = $("#dialog").getKendoWindow();
dialog.open(); }
</script>
The behavior is: when the search button is clicked, this kendoWindow slides out from the right side and this is where I want the user to enter their search criteria. I need kendoCombobox, kendoText, kendoButton and kendoLabel objects on this slide out....
1 answer
179 views
I am getting the following errors when I run the following example :https://demos.telerik.com/aspnet-core/window
In the index page I am trying to reference this kendo.window.min.js, here is my code for the view:
@page "/"
@model StaffPortalCore.Views.Home.CropperModel
@{
}
@* Make sure tag helpers are not available for the Window content *@
@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"
@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"
@using Kendo.Mvc.UI;
@using (Html.BeginForm("Index", "Cropper", FormMethod.Post))
{<head>
<script type="text/javascript" src="@Url.Content("~/js/kendo.window.min.js")"></script>
</head>
<div class="configurator">
<div class="header">Configurator</div>
<div class="box-col">
<h4>Animation Settings</h4>
<ul class="options">
<li>
@Html.RadioButton("animation", "zoom")
@Html.Label("zoom", "default/zoom animation")
</li>
<li>
@Html.RadioButton("animation", "toggle")
@Html.Label("toggle", "toggle animation")
</li>
<li>
@Html.RadioButton("animation", "expand")
@Html.Label("expand", "expand animation")
</li>
<li>
@Html.CheckBox("opacity")
@Html.Label("opacity", "animate opacity")
</li>
</ul>
</div>
<div class="box-col">
<h4>Window Settings</h4>
<ul class="options">
<li>
@Html.CheckBox("draggable")
@Html.Label("draggable", "draggable")
</li>
<li>
@Html.CheckBox("resizable")
@Html.Label("resizable", "resizable")
</li>
</ul>
</div>
</div>
<button >Apply</button>
}
@(Html.Kendo().Window()
.Name("window")
.Animation(animation =>
{
animation.Open(open =>
{
if (ViewBag.animation == "expand")
{
open.Expand(ExpandDirection.Vertical);
}
if (ViewBag.animation == "zoom")
{
open.Zoom(ZoomDirection.In);
}
if (ViewBag.opacity)
{
open.Fade(FadeDirection.In);
}
});
animation.Close(close =>
{
close.Reverse(true);
if (ViewBag.animation == "expand")
{
close.Expand(ExpandDirection.Vertical);
}
if (ViewBag.animation == "zoom")
{
close.Zoom(ZoomDirection.Out);
close.Reverse(false);
}
if (ViewBag.opacity)
{
close.Fade(FadeDirection.In);
}
});
})
.Content(@<text>
<div style="text-align: center;">
<p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="https://www.conranshop.co.uk/" title="https://www.conranshop.co.uk/">https://www.conranshop.co.uk/</a></p>
</div>
</text>)
.Width(500)
.Draggable((bool)ViewBag.draggable)
.Resizable(resize => resize.Enabled((bool)ViewBag.resizable))
.Title("EGG CHAIR")
.Actions(actions => actions
.Custom("custom")
.Minimize()
.Maximize()
.Close()
)
.Events(events=> events.Close("close"))
)
<div class="responsive-message"></div>
<script type="text/javascript">
function close() {
$("#undo").fadeIn(300);
}
$(document).ready( function () {
var dialog = $("#window");
$("#undo")
.bind("click", function () {
$("#window").data("kendoWindow").open();
$("#undo").fadeOut(300);
});
dialog.data("kendoWindow").wrapper
.find(".k-i-custom").parent().click(function (e) {
alert("Custom action button clicked");
e.preventDefault();
});
});
</script>
<style>
#example {
min-height: 400px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.k-window {
z-index: 100000;
}
@@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
An here is code for the controller:
using Microsoft.AspNetCore.Mvc;
namespace StaffPortalCore.Controllers
{
public class CropperController : Controller
{
public ActionResult Index(string animation, bool? opacity, bool? draggable, bool? resizable)
{
ViewBag.animation = animation ?? "expand";
ViewBag.opacity = opacity ?? true;
ViewBag.draggable = draggable ?? true;
ViewBag.resizable = resizable ?? true;
return View();
}
}
}
Can someone please advise which scripts I need to reference and how I should reference them. Thank in advance
Alexander
Telerik team
answered
on
10 Feb 2022
1 answer
403 views
I'm trying to implement a double click event on kendo grid row which would open a kendo window and the content is called making an ajax call based on the row data. The content gets it's data from a view. It works for the first time but when I close the window using out-of-the box window close button and select the same row or another row, the double click doesn't work. I want client to have option to get out of window/form and switch the row and double click it. Developer Tools shows the following error when dblclick is attempted second time or on subsequent attempts. ""dataitem" uncaught typeerror cannot read property of undefined (reading 'dataitem') at HTMLTableRowElement.
"Below is a code snippet.
//grid
@(Html.Kendo().Grid(Model)
.Name("mygrid").Columns(columns =>
{
columns.Bound(p => p.id).Title("id");
columns.Bound(p => p.Col2).Title("Col2").Width(130);
})
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
.Selectable()
)
@{
string[] actions = new string[] { "Close" };
}
<div class="windowdiv">
<kendo-window name="window"
draggable="true"
resizable="true"
width="700"
height="650"
min-height="600"
min-width="600"
modal="true"
position-top="0%"
position-left="30%"
actions="actions">
<content>
</content>
<popup-animation enabled="false" />
</kendo-window>
</div>
<script>
$(document).ready(function () {
/*$("#window").data("kendoWindow").center();*/
$("#window").data("kendoWindow").close();
});
//double click
$("#mygrid").on("dblclick", "tr.k-state-selected", function () {
var dataItem = $("#mygrid").data("kendoGrid").dataItem($(this));
id = (dataItem.id);
alert("double clicked");
$("#window").data("kendoWindow").title("Id: " + id);
$("#window").kendoWindow({
content: {
url: "@Url.Action("ActionName","ControllerName")",
data: { id: id }
}
});
/*$("#window").data("kendoWindow").center();*/
$("#window").data("kendoWindow").open();
});
</script>
