Hi All,
How do we show mask for phone number in editable grid? below is the my editable grid and i want show the mask for the phone column.
Thanks!
How do I change this numeric filter label to "Min:" and "Max:" ? Instead of From and To.
I tried this but it does not do anything:
columns .Bound(p => p.Total) .Title("Total") .Format("{0:C}") .Filterable(ftb => ftb.Extra(true) //.UI("currencyFilter") .Operators(o => o. ForNumber(n => n .IsLessThanOrEqualTo("Min") .IsGreaterThanOrEqualTo("Max") ) )) .Width(130);
Hello,
what is the best TemplateString and ValueTemplateString for the dropdownlist that I have two columns where one is right aligned (see picture)
regards robert
I'm having trouble getting a custom popup editor bound to a model using tag helpers, razor pages, and entity framework.
Index.cshtml.cs
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using MyApp.Data.Models;
using MyApp.Interfaces;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyApp.Pages
{
public class IndexModel : PageModel
{
private readonly IDataService _dataService = null!;
public List<Item> Items { get; set; }
public IndexModel(IDataService dataService)
{
_dataService = dataService;
Items = new();
}
public async Task<JsonResult> OnPostCreate([DataSourceRequest] DataSourceRequest request, Item item)
{
await _dataService.CreateItemAsync(item);
return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
}
public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request, bool isFound)
{
Items = await _dataService.GetActiveItemsAsync(isFound);
var result = await Items.ToDataSourceResultAsync(request);
return new JsonResult(result);
}
public async Task<JsonResult> OnPostUpdate([DataSourceRequest] DataSourceRequest request, Item item)
{
var updatedItem = await _dataService.UpdateItemAsync(item);
return new JsonResult(new[] { updatedItem }.ToDataSourceResult(request, ModelState));
}
public async Task<JsonResult> OnPostDestroy([DataSourceRequest] DataSourceRequest request, Item item)
{
await _dataService.DeleteItem(item.Id);
return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
}
}
}
Index.cshtml
@page
@model IndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<kendo-grid name="grid" height="700">
<filterable enabled="true" />
<groupable enabled="true" />
<sortable enabled="true" />
<editable enabled="true" mode="popup" template-id="popup-editor" />
<scrollable enabled="true" />
<pageable enabled="true" page-sizes="new int[] { 10, 20, 50}" />
<toolbar>
<toolbar-button template="toolbarTemplate"></toolbar-button>
<toolbar-button name="create"></toolbar-button>
</toolbar>
<columns>
<foreign-key-column field="ItemTypeId" />
<column field="ReportDate" title="Date Reported" format="{0:yyyy-MM-dd}" width="160" />
<column field="ItemDescription" title="Description" />
<column field="Unit" title="Unit" width="200" />
<column field="ContactName" title="Contact Name" width="250" />
<column field="ReceivedBy" title="Received By" hidden="true" />
<column field="ContactPhone" title="Contact Phone" hidden="true" />
<column field="ContactAddress" title="Contact Address" hidden="true" />
<column field="ContactDetails" title="Contact Details" hidden="true" />
<column field="Qty" title="Item Quantity" hidden="true" format="{0:0}" />
<column width="180">
<commands>
<column-command name="edit"></column-command>
<column-command name="destroy"></column-command>
</commands>
</column>
</columns>
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
<transport>
<read url="/Index?handler=Read" data="getDataParameters" />
<create url="/Index?handler=Create" data="getDataParameters" />
<update url="/Index?handler=Update" data="getDataParameters" />
<destroy url="/Index?handler=Destroy" data="getDataParameters" />
</transport>
<sorts>
<sort field="ReportDate" direction="desc" />
</sorts>
<schema data="Data" total="Total" errors="Errors">
<model id="Id">
<fields>
<field name="Id" type="number" editable="false" />
<field name="ItemTypeId" type="object" />
<field name="ReportDate" type="date" />
<field name="ItemDescription" type="string" />
<field name="Unit" type="string" />
<field name="ContactName" type="string" />
<field name="ReceivedBy" type="string" />
<field name="ContactPhone" type="string" />
<field name="ContactAddress" type="string" />
<field name="ContactDetails" type="string" />
<field name="Qty" type="number" default-value="1" />
</fields>
</model>
</schema>
</datasource>
</kendo-grid>
<script id="popup-editor" type="text/x-kendo-template">
@await Html.PartialAsync("_ItemPartial")
</script>
_ItemPartial.cshtml
<!--
the following @model throws:
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'MyApp.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'MyApp.Data.Models.Item'.
-->
@model MyApp.Data.Models.Item
<!-- the following @model shows an empty grid: -->
@model IndexModel
<h6>magical mystery template</h6>
The questions I have are:
Hello,
I want to add and clear menuButtons with javascript on the client but there is no Api for that. To add items with append like this shows the items but on click nothing happens (no close and no Event)
$(
"#Berichte_optionlist"
).append(
"<li><a href='' tabindex='0' title='test' class='k-button k-button-icontext' id="
test" data-overflow=
'auto'
>test</a></li>
How to add menuButtons the Right way so that the click Event works?
robert
Hello,
I have a kendo grid with the FundAge column with a dropdown list editor template. When I select the value from the dropdown and click update the value is showing as undefined. Can someone help with this?
///Editor template
@model Models.FedAge
@(Html.Kendo().DropDownListFor(x => x)
.DataValueField("FedId")
.DataTextField("FedDesc")
.BindTo((System.Collections.IEnumerable)ViewData["FedAge"]))
//////// Grid column
@(Html.Kendo().Grid<AgencyInformation>()
.Name("AgencyInformationGrid")
.Columns(columns =>
{
columns.Bound(p => p.FundAge).ClientTemplate("#=FundAge.FedDesc#").Sortable(false).Width(175).HtmlAttributes(new { @class = "FundAgeClass" });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:500px;" })
.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.Batch(false)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Events(events => events.RequestEnd("onAgeInfoRequestEnd"))
.Model(model => {
model.Id(p => p.AgeInfoId);
model.Field(p => p.AgeInfoId).Editable(false);
model.Field(p => p.FedAge.FedAgeDesc).Editable(false).DefaultValue(ViewData["FedAge"]);
})
.Create(update => update.Action("AddAgeInfo", "Cove").Type(HttpVerbs.Post))
.Read(read => read.Action("GetAgeInfo", "Cove").Type(HttpVerbs.Get))
.Update(update => update.Action("EditAgeInfo", "Cove").Type(HttpVerbs.Post))
.Destroy(update => update.Action("DeleteAgeInfo", "Cove").Type(HttpVerbs.Post))
)
//////Entity
public class AgeInfo
{
public string AgenfoId { get; set; }
[UIHint("FedlAgeEditor")]
[Required(ErrorMessage = "Required")]
public string FundAge{ get; set; }
public FedAge FedAge{ get; set; }
}
public class FedAge
{
public int FedAgeId { get; set; }
public string FedAgeDesc { get; set; }
}
}
///controller
[HttpGet]
public IActionResult AgeInfo()
{
//if (coveDetails!= null && coveDetails.AgeInfo!= null)
//{
// return View("AgeInfo", coveDetails.AgeInfo);
//}
ViewData["FedAge"] = lookupsDetails.FedAge;
ViewBag.FedAge= lookupsDetails.FedAge;
return View();
}
Can some one please help??
For as long as I've been using Visual Studio, IntelliSense has always defaulted to this first menu labeled "All". It contains HTML, ASP.Net, and Telerik control autocomplete options, among others. For some reason today it started to default to the "TelerikCore" menu in the second screenshot.
Before:
After:
I have no use for anything in this new menu, and would like IntelliSense to go back to defaulting to the first menu.
I couldn't find any IntelliSense options related to this, and we have multiple users with this same problem.
Thank you in advance.
hi, I have a simple grid set up for batch mode data entry . Two of the columns need to allow multiline entry (with line breaks) and I thought I had solved this problem by using a textarea. However, it turns out that the textarea is extremely buggy and the errors seem to be completely random and impossible to reliably duplicate. Sometimes it happens when you click into the cell, sometimes when you tab into a cell. After editing the cell contents, the black triangle to indicate an update does not appear in the upper left-hand corner of the column. Upon saving the changes, the data in the column reverts back to the unedited text (the edit is not saved).
I can't find any pattern to this behavior and it usually works fine on the second try.
Is there a better method for allowing multi-line text area in a column?
This is how I have the column set up:
columns.Bound(c => c.PODescription).ClientTemplate("<textarea rows='2' style='border: none; width:100%;'>#=PODescription#</textarea>").Title("*PO Description").EditorTemplateName("TextAreaTemplate").Width("200px");
The editor template:
@model string
Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior. When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox. This is not a good user experience.
Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page. How do I accomplish this?
<div class="container">
@(Html.Kendo().ListBox()
.Name("listBox")
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
source.Read(read =>
read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
)
.TemplateId("item-template")
.Toolbar(toolbar =>
{
toolbar.Position(ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.MoveUp()
.MoveDown()
.Remove()
);
})
.Events(events => events
.Reorder("onReorder")
.Remove("onRemove"))
.HtmlAttributes(new { style = "height:550px;width:530px" })
.BindTo(new List<SessionOptionTemplate>()))
</div>
function onReorder(e) {
//alert("onReorder");
$("#isbusy").show();
var dataSource = e.sender.dataSource;
var element = e.sender.select();
var dataItem = e.sender.dataItem(element[0]);
//alert("id: " + dataItem.Id);
//alert("name: " + dataItem.Name);
var index = dataSource.indexOf(dataItem) + e.offset;
//alert("index: " + index);
var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
// Replace & with & as the above encoding step changes & to &.
window.location.href = url.replace(/&/g, "&");
}
I've got an EF Core model that represents a one-to-many relationship. There's a navigation property on the parent that holds a collection of child items. What I'd like to do is bind this to a hierarchical grid and have the child items display underneath the parent items.
The example for a hierarchical grid shows separate data sources for the parent and child tables. Since I've already retrieved this data, why not just display it in that form?
I have a datasource defined which has an include statement. I tried to adapt the example code and have the same datasource for both grids, using syntax like "Client.Order" in the child table, but it doesn't like that.
Many thanks for any suggestions.