Scenario
A grid showing datas, with an add new record function,
checking the data submitted from client with custom validation,
if the result isn't valid, directly return View("gridPage").
However, the grid still shows the data with the one client had just submiitted, which isn't valid.
How can I prevent from this situation?
Grid Code
<div>
@(Html.Kendo().Grid<Sinotech.AntiSeismic.Digitalization.Web.Controllers.ViewModels.AgentViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Code).Title("經銷商代號");
columns.Bound(c => c.Name).Title("經銷商名稱");
columns.Bound(c => c.TaxIdnum).Title("統一編號");
columns.Bound(c => c.PersonInCharge).Title("負責人姓名");
columns.Bound(c => c.TelNum).Title("電話");
columns.Bound(c => c.Addr).Title("地址");
columns.Bound(c => c.MailAddr).Title("通訊地址");
columns.Bound(c => c.BankCode).Title("銀行代號");
columns.Bound(c => c.BankName).Title("銀行別");
columns.Bound(c => c.BankAccount).Title("銀行帳號");
columns.Bound(c => c.BankAccountName).Title("銀行帳號戶名");
columns.Bound(c => c.Sales).Title("業務姓名");
columns.Bound(c => c.SalesTelNum).Title("業務電話");
columns.Bound(c => c.Accountant).Title("會計姓名");
columns.Bound(c => c.AccountantTelNum).Title("會計電話");
columns.Command(c => c.Edit());
columns.Command(c => c.Destroy());
})
.Pageable()
.Scrollable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Create(create => create.Action("AddAgent", "Vendor"))
.Read(read => read.Action("GetAgentData", "Vendor", new { Id = Id }))
.Update(update => update.Action("UpdateAgent", "Vendor"))
.Destroy(destroy => destroy.Action("DeleteAgent", "Vendor"))
.Model(m => {
m.Id(id => id.Id);
m.Field(f => f.Id).Editable(false);
})
)
.ToolBar(tools =>
{
tools.Create();
})
)
</div>
Thought that the DataSource.Read function would refresh the data on grid,
since I've just return back to the page after validation error, and it automatically runs through the DataSource.Read.
But it's not working
So in 2019 Telerik support told me Serverless is not supported. Well it's 2021 and I can't be the only person using the Azure SignalR Service "serverless".
I know it's not officially supported by Telerik as server SignalR methods can't be invoked with Serverless but I have got changes showing in the grid from a Razor page. The issue is I can't get the grid initially populated as I just see a spinner until the first update is received from the SignalR Service.
I'm thinking of initialising the grid datasource as SignalR, then I could perform an Ajax call to get the initial data, then leave it to receive updates from that point. Anyone in the community using grids with SignalR in this way? I'd appreciate any experiences whilst Telerik play catch up.
Many thanks.
Need help with presenting, creating, editing and deleting Hierarchal data using Tree view and (0r) Tree List Telerik controls for my ASP.Net Core MVC application using remote data options.
I am using Microsoft Visual Studio Community 2019 Version 16.10.3.
Example: ASP.NET Core TreeView Component Data Binding | Telerik UI for ASP.NET Core
The data is not populating by using Tree view control by using the above method using remote data option.
The below link does not have complete information about TreeList_Read method and also data not populating for this control.
ASP.NET MVC TreeList Component Ajax Binding | Telerik UI for ASP.NET MVC
I need help here.
Hello!
Is it possible to enable Drag&Drop on a FloatingActionButton?
Thank you
Hello I facing one issue with Grid. I have in custom DropDownListFor my model.
Everything like load option for dropdown, create new row with default works fine but when I change form default to other item in View I see still default value. But when I submit create or update button I see selected item..
I attached 2 screenshots where in default you will see default value and on click you see selected (attachment selected)
Here is my view ManageRecipe.cshtml
@{
}
@model Recipes.Business.ViewModels.Recipes.ManageRecipeViewModel
@using Recipes.Business.ViewModels.Recipes
<div class="container-fluid">
<div class=" d-sm-flex align-items-center justify-content-between mb-4">
<h3 class="h3 mb-2 text-gray-800">@ViewBag.FormName</h3>
</div>
<div class="card-shadow mb-4">
<form method="post">
<div class="card-header py-3 border-all">
<div class=" d-sm-flex align-items-center justify-content-between mb-4">
<h5 class="h5 mb-2 text-gray-800">Hlavička Receptury</h5>
</div>
<div class="form-row ">
<div class="col ">
<label asp-for="@Model.RecipeId">Číslo Receptury</label>
<input type="text" asp-for="@Model.RecipeId" class="form-control" required placeholder="Číslo Receptury">
</div>
<div class="col ">
<label asp-for="@Model.RecipeName">Název Receptury</label>
<input asp-for="@Model.RecipeName" type="text" class="form-control " required placeholder="Název Receptury">
</div>
<div class="col">
<label asp-for="SelectedCalculationId">Metoda výpočtu</label>
<kendo-combobox name="SelectedCalculationId" filter="FilterType.Contains"
bind-to="Model.CalculationMethods"
value="@Model.SelectedCalculationId"
placeholder="Vyber metodu výpočtu..."
datatextfield="CalculationMethodName"
datavaluefield="CalculationMethodId"
style="width:100%">
</kendo-combobox>
</div>
</div>
<div class="form-row">
<div class="col">
<label asp-for="@Model.RecipeNote">Poznámka</label>
<input type="text" class="form-control text-xs" id="inpNote" placeholder="Poznámka k receptuře">
</div>
<div class="col" id="prescriptionInput">
<label for="prescriptionComboBox_input">Předpis</label>
<kendo-combobox name="prescriptionComboBox" filter="FilterType.Contains"
bind-to="Model.Prescriptions"
value="@Model.SelectedPrescriptionId"
placeholder="Vyber předpis..."
datatextfield="PrescriptionName"
datavaluefield="PrescriptionId"
style="width:100%"
>
</kendo-combobox>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-check">
<label class="form-check-label" for="switch">
Receptura pro barvení
</label>
@(Html.Kendo().Switch()
.Name("IsColorRecipe")
.Messages(c=>c.Checked("Ano").Unchecked("Ne"))
.Events(ev => ev.Change("changeSwitch"))
.Checked(@Model.IsColorRecipe)
)
</div>
</div>
<div id="colorInputs"class="form-row" hidden >
<div class="col ">
<label asp-for="@Model.WaterInRecipe">Voda na sůl</label>
<input type="number" class="form-control text-xs" asp-for="@Model.WaterInRecipe" id="inpWater">
</div>
<div class=" col">
<label asp-for="@Model.SaltInRecipe">Program </label>
<input type="number" class="form-control text-xs" asp-for="@Model.SaltInRecipe" id="inpProgram">
</div>
</div>
</div>
</div>
<div class ="card-body mt-2 py-3 border-all">
<div class="table-responsive">
@(Html.Kendo().Grid<RecipeLinesDetailViewModel>()
.Name("#grid")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Read(read=>read.Action("Recipes_ReadLines", "Recipes"))
.Update(update => update.Action("Update", "Recipes"))
.Create(create => create.Action("Create", "Recipes"))
.Destroy(destroy => destroy.Action("Destroy", "Recipes"))
.Model(m =>{
m.Id(id=>id.RecipeLineId);
m.Field(id=>id.RecipeLineId).Editable(false);
m.Field(f=>f.ChemistryRecipeViewModel).DefaultValue(
new ChemistryRecipeViewModel{
ChemistryId="1",
ChemistryName="testChemistry"
});
}))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Search();
})
.Columns(c=>{
c.Bound(c=>c.RecipeLineId).Hidden(true);
c.Bound(c=>c.ChemistryRecipeViewModel.ChemistryName).EditorTemplateName("ChemistryIdEditor");
c.Bound(c=>c.Dosage);
c.Bound(c=>c.Units);
c.Bound(c=>c.Rounded);
c.Bound(c=>c.Units);
c.Bound(c=>c.Comment);
})
.Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
.Pageable()
.Sortable()
.Filterable()
.Editable())
</div>
</div>
<div class="card-footer mt-2 py-3 border-top">
<button class="btn btn-primary" type="submit">Uložit</button>
</div>
</form>
</div>
</div>
<style >
.border-all{border: 0.15rem solid #9e9e9e !important;}
.border-top{border-top: 0.15rem solid #36b9cc !important;}
.k-grid .k-grid-search {
margin-left: auto;
margin-right: 0;
}
</style>
@section Scripts{
<script>
function changeSwitch(e){
if(e.checked){
$('#IsColorRecipe').attr('checked','true')
document.getElementById("colorInputs").hidden = false;
document.getElementById("inpWater").setAttribute("required","");
document.getElementById("inpProgram").setAttribute("required","");
}
else{
document.getElementById("colorInputs").hidden = true;
document.getElementById("inpWater").removeAttribute("required","");
document.getElementById("inpProgram").removeAttribute("required","");
}
}
</script>
}
here is ChemistryIdEditor.cshtml
@model Recipes.Business.ViewModels.Recipes.ChemistryRecipeViewModel
@(Html.Kendo().DropDownListFor(x => x).DataSource(x => x.Read(y => y
.Action("AllChemistry", "Recipes")))
.DataTextField("ChemistryName").DataValueField("ChemistryId")
.Filter(FilterType.Contains)
.HtmlAttributes(new { data_bind = "value: ChemistryName" }))
here is model class RecipeLinesDetailViewModel
public class RecipeLinesDetailViewModel
{
public int? RecipeLineId { get; set; }
public ChemistryRecipeViewModel ChemistryRecipeViewModel { get; set; }
[UIHint("Units")]
public UnitRecipeViewModel Units { get; set; }
[Display(Name = "Dávkování")]
public float Dosage { get; set; }
[Display(Name = "Zaokrouhlení")]
public float Rounded { get; set; }
[Display(Name = "Poznámka")]
public string? Comment { get; set; }
}
and finally controller
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Recipes.Business.Interfaces;
using Recipes.Business.ViewModels.Recipes;
using Recipes.Data.Models;
using System;
using System.Collections.Generic;
using System.Linq;
namespace Recipes.Controllers
{
public class RecipesController : Controller
{
IRecipeManager recipeManager;
IChemistryManager chemistryManager;
public RecipesController(IRecipeManager recipeManager,IChemistryManager chemistryManager)
{
this.recipeManager = recipeManager;
this.chemistryManager = chemistryManager;
}
public IActionResult Index()
{
return View();
}
public IActionResult ManageRecipe()
{
ViewBag.FormName = "Nová receptura";
return View(recipeManager.GetNewRecipeData());
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ManageRecipe(ManageRecipeViewModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
return View();
}
public IActionResult Recipes_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(recipeManager.GetRecipesOverView().ToDataSourceResult(request));
}
public IActionResult Recipes_ReadLines([DataSourceRequest] DataSourceRequest request)
{
var x = recipeManager.GetTestData();
return Json(x.ToDataSourceResult(request));
}
public IActionResult AllChemistry()
{
return Json(recipeManager.GetRecipesChemistry());
}
}
}
I read all elated topic here but if I modify code I still have same result..
Can someone help me?
Many thx in advance
Lukas
Afternoon,
I am trying to apply persistence to a DatePicker so that when a user navigates to another page and then returns, the DatePicker retains its value. Here is my DatePicker:
@(Html.Kendo().DatePicker()
.Name("datepicker")
.Events(e =>
{
e.Change("onChangeDate");
})
.Format("dd/MM/yyyy")
.Max(DateTime.Today)
)
The DatePicker defaults to today’s date on the first entry to the page and stores that value in the session storage. This date is displayed successfully in the DatePicker.
$(document).ready(function () {
// Set the datePicker value
var date = setDate();
var datePicker = $("#datepicker").data("kendoDatePicker");
alert(date);
datePicker.value(date);
});
The alert confirms the date variable value: Tue Dec 14 2021 00:00:00 GMT+0000 (Greenwich Mean Time)
Here are my other functions:
function setDate() {
// Get the datePicker value from session storage of the browser.
var datePickerValue = sessionStorage.getItem("datePickerValue");
if (nullCheck(datePickerValue)) {
datePickerValue = kendo.date.today();
}
return datePickerValue;
}
function nullCheck(data) {
// Return true if null
return (typeof data !== 'undefined' && data !== null) ? false : true;
}
On return to the page, the alert confirms that the date variable value is still the same as before, but that date is not displayed in the DatePicker by datePicker.value(date); The DatePicker remains blank.
The onChangeDate function sets the session storage to the newly selected date.
I've tried setting the format of the data variable to dd/MM/yyyy, but that doesn't seem to make any difference. Plus it works on first entry to the page so it must be able to interpret the date value.
Kind regards,
Richard
Hi,
is there a way to show the unit during editing in the NumericTextBox.
Right now the behavior is like this:
The desired behavior would be that the EUR would be showing up already in the editing mode.
Regards
Martin
We're currently experiencing issues with the Telerik NuGet Server (https://nuget.telerik.com/nuget).
We are working to resolve those as soon as possible. Please follow this thread for updates.
Apologies for the inconvenience.
Good afternoon,
I have a yearly dashboard where I have set up a slightly complicated scenario using several MVC Core components.
When you select a year from the dropdown it forces each of the charts/grids to read the data based on the selected year. The 'Yearly Activity' tab is the default tab and works nicely. I have a few pie charts and a bar chart on one tab which are arranged using the TileLayout - this allows them to be resized and dragged. It looks like this:
On the second tab "Monthly Activity by Operator" there is a kendo grid which displays aggregated data based on the selected year. However, when I click on the second tab and change the year in the dropdown, then click back on the first tab, the bar and pie chart have updated correctly data-wise but have not resized correctly in layout - they appear zoomed in:
I've tried making them resize if I click on the 'Yearly Activity' tab:
function tabSelect(e) {
var tab = $(e.item).find("> .k-link").text();
if (tab == "Yearly Activity") {
kendo.resize($(".k-grid, .k-chart"));
}
}
I also have these functions, which are almost exactly as written in the demos:
$(document).ready(function () {
kendo.resize($(".k-grid, .k-chart"));
});
function onTileResize(e) {
if (e.container) {
// for widgets that do not auto resize
// https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages
kendo.resize(e.container, true);
$(document).bind("kendo:skinChange", updateTheme);
}
}
function updateTheme() {
var charts = $(".k-chart");
$.each(charts, function (i, elem) {
var theme = kendoTheme;
if (/(default-|bootstrap-|material-|classic-)/.test(kendoTheme)) {
theme = "sass";
}
$(elem).getKendoChart().setOptions({ theme: theme });
});
}
$(window).on("resize", function () {
kendo.resize($(".k-card-body"));
});
How can I get the charts to resize themselves correctly, as if I was on the first tab when I changed the year?
Kind regards,
Richard
Afternoon,
Is there a way to display a formatted date in a readonly TextBox on a kendo form without using a DateTimePicker as below?
items.Add()
.Field(f => f.Datelastedited)
.Label(l => l.Text("Date Last Edited:"))
.Editor(e => e.DateTimePicker()
.HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
.Format("{0:dd/MM/yyyy HH:mm:ss tt}"))
.InputHtmlAttributes(new { @readonly = "readonly" });
I want the TextBox to be readonly so I don't need the ability to change the value, or display the buttons to set the time or date elements.
A NumericTextBox has a Format method, but the TestBox doesn't.
Kind regards,
Richard