When updating a record in the grid - it does not allow me to save an empty string for that field - if the previous value in the field contained a value.
My underlying class property doesn't work with either of the following options
with annotations:
[Display(Name = "Comments")] [Required(AllowEmptyStrings = true)] public string ItemComments { get; set; } = " ";
Without annotations:
public string ItemComments { get; set; } = " ";
I have grid and form, which are bound to Employee object. It has object property Department. To edit it, I use separate editors, because I didn't find the right format to allow editing in both places.
Usage in form:
i.Add().Field(e => e.DepartmentId).Label("Отдел").EditorTemplateView(Html.Partial("FormEditors/Department"));
Editor of the form's field:
@(Html.Kendo().DropDownList()
.Name("DepartmentId")
.DataTextField("Name")
.DataValueField("Id")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read => read.Action("GetDepartments", "Home"));
}))
Usage in grid:
columns.Bound(p => p.Department.Name).Width(230)
.ClientTemplate("#=data.Department?.Name ?? ''#")
.EditorTemplateName("Department")
.Filterable(ftb => ftb.Cell(cell =>
{
cell.Operator("startswith");
cell.ShowOperators(false);
}));
Editor of the grid's column:
@(Html.Kendo().DropDownListFor(m => m)
.DataTextField("Name")
.DataValueField("Id")
.Filter(FilterType.Contains)
.HtmlAttributes(new { data_bind = "value: Department" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
});
}))
Hi there,
While working with the Filter Component I was able to export an CompositeFilterDescriptor object on the client side before sending it to the server, the backend is a .net core API.
Unfortunately I tried to use Telerik.Datasource DLL in order to utilize the JSON parsing functionality inside however it seems like they are from two different worlds !
On the Angular side the CompositeFilterDescriptor looks like this
{
"logic": "or",
"filters": [
{
"field" : "unitId",
"operator" : "eq",
"value" : "1005"
}
]
}
On the .NET side the CompositeFilterDescriptor it is expecting something like this
{
"logicalOperator": 1,
"filterDescriptors": [
{
"member": "unitId",
"operator": 2 ,
"value" : "1005"
}
]
}
Summary of Differences
1- Field names are different and hence not parsed properly ( i.e. logicalOperator vs logic, member vs field)
2- Enumerations are sent as strings from Angular but parsed as Integers from Telerik.Datasource
I feel a little bit confused here, is there any library provided by Telerik that I can use to capture the Angular CompositeFilterDescriptor JSON Object received from the client app inside a Web API ?
I use a DropDownList as an EditorTemplate in a Grid.
The problem is, that the DDL has to display several thousand entries (products).
I tried to set the PageSize of the DataSource and handle the Filter-Event. This works fine so far. The DDL opens very fast and I can search (filter) and then select an entry, that is not visible in the list at the beginning.
This works fine for adding a new record.
But when I want to edit an existing record in the grid I get problems. When the editor opens and the value is not in the select list of the DDL, it is not selected (also not displayed) and the value of the DDL is set to null.
This behavior makes sense to me.
When I remove the PageSize from the DataSource everythings works fine. But it takes to long to open the DDL. That's why I need another solution.
I also tried the virtualization. But the problem stays the same.
Does anyone have an idea how I can solve this?
Maybe another control? Finally the user should be able to search and select a product on an easy way.
I am grateful for any idea.
@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.BindToLocation(true)
.Navigational(true))
I have a grid which is a part of bigger form. I want to be able to do all sorts of data manipulation without saving it immediately. When saving form, I need to save data in a grid.
I'm experiencing a problem when editing a row in InLine mode. When I click on "edit", then "cancel", the row disappears from the grid depending on how I load data into the grid.
If Read method looks like this, than canceling edit works good but I'm not able to save data temporarily.
public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
{
ToDestinations = _entities.ToDestinations.ToList();
//var data = HttpContext.Session.Get("ToDestinationsData");
//if (data != null)
//{
// ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
//}
return new JsonResult(ToDestinations.ToDataSourceResult(request));
}
On the other hand, if Read method looks like below, every row that I'm doing "edit" => "cancel" disappears. (This was a start to making grid data persistent while doing all kinds of data manipulation in a grid.)
public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
{
//ToDestinations = _entities.ToDestinations.ToList();
var data = HttpContext.Session.Get("ToDestinationsData");
if (data != null)
{
ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
}
return new JsonResult(ToDestinations.ToDataSourceResult(request));
}
This is my grid.
@(Html.Kendo().Grid<ToDestination>()
.Name("grid")
.Columns(columns =>
{
columns.ForeignKey(c => c.TravelTypeId, ds => ds.Read(read => read.Url(Url.Page("Create", "TravelTypes"))), "TravelTypeId", "TravelTypeName").Title("Vrsta putovanja");
columns.ForeignKey(c => c.CountryId, ds => ds.Read(read => read.Url(Url.Page("Create", "Countries"))), "CountryId", "CountryName", true).Title("Država")
.EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.
columns.ForeignKey(c => c.PlaceId, ds => ds.Read(read => read.Url(Url.Page("Create", "Places"))), "PlaceId", "PlaceName", true).Title("Mjesto")
.EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.
columns.ForeignKey(c => c.CenterId, ds => ds.Read(read => read.Url(Url.Page("Create", "Centers"))), "CenterId", "CenterName", true).Title("Centar")
.EditorTemplateName("CenterEditor"); // Specify a custom editor template for the Center dropdown.
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(ds => ds.Ajax()
.Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
.Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
.Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
.Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
.Model(m =>
{
m.Id(id => id.ToDestinationId);
})
))
I hope what I wrote makes sense.
What is the best practice to achieve saving grid data temporarily without "edit" => "cancel" bug appearing?
Hello,
after upgrading the versions buttons will not shown correctly
We using dotnet core version 7 and Telerik version 2023.2.606:
Here is the code of the columns.
<column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
<commands>
<column-command template="<a class='k-grid-edit k-icon k-i-edit button_icon' href='\#'> </a>" text="\{Edit\}" icon-class="k-icon k-i-edit button_icon" name="edit"></column-command>
</commands>
</column>
<column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
<commands>
<column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
</commands>
</column>
Have you any idea to fix the problems? I think the icon class is changed with the update.
Second problem is to disable the buttons via javascript:
$(".k-grid-edit").addClass("k-state-disabled")
$(".k-grid-custom").addClass("k-state-disabled")
Before the update this commands works well after not. Have you any idea to find the icon via javascript.
Best regards
Jens
Hi, I have the following graph:
I would like to keep the values in the left side but without showing the negative sign, because they represent quantities. I tried several things for formatting the ValueAxis in order to perform some sort of Math.abs operation but nothing works. Is it possible what I want to achieve?
Otherwise, I wouldn't mid not showing the value axis if I can show the absolutes quantities using label template. However, I get a lot of undefined values that I don't know how to remove:
function customLabelFormat(value) {
Thanks a lot.
How to cascade DropDownList in Grid?
I've tried a lot of stuff using JavaScript, JQuery and Ajax but I can't get this to work. I wasn't able to find an example on how to do this.
This is my code for grid and editor templates...
@(Html.Kendo().Grid<ToDestination>(Model.ToDestinations)
.Name("grid")
.Columns(columns =>
{
columns.ForeignKey(c => c.TravelTypeId,
(System.Collections.IList)ViewData["TravelTypes"], "TravelTypeId", "TravelTypeName").Title("Travel Type");
columns.ForeignKey(c => c.CountryId,
(System.Collections.IList)ViewData["Countries"], "CountryId", "CountryName").Title("Country")
.EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.
columns.ForeignKey(c => c.PlaceId,
(System.Collections.IList)ViewData["Places"], "PlaceId", "PlaceName").Title("Place")
.EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.
columns.Bound(c => c.PlaceName);
columns.Bound(c => c.CenterName);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(ds => ds.Ajax()
.Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
.Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
.Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
.Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
.Model(m =>
{
m.Id(id => id.ToDestinationId);
m.Field(tt => tt.TravelTypeId).DefaultValue(1);
m.Field(c => c.CountryId).DefaultValue(1);
})
)
)
@model int? // Assuming CountryId is nullable
@(Html.Kendo().DropDownList()
.Name("CountriesList")
.DataTextField("CountryName")
.DataValueField("CountryId")
.BindTo((System.Collections.IEnumerable)ViewData["Countries"])
.OptionLabel("Select a country")
.Events(e => e.Change("onCountryChange"))
)
@model int? // Assuming PlaceId is nullable
@(Html.Kendo().DropDownList()
.Name("PlacesList")
.DataTextField("PlaceName")
.DataValueField("PlaceId")
.BindTo((System.Collections.IEnumerable)ViewData["Places"])
.OptionLabel("Select a place")
)
I want to disable drag and drop images from local folders or copy paste the images from clipboard into the Kendo Editor (https://demos.telerik.com/aspnet-core/editor).
I am using this function emailEditorPaste() to prevent such ,
function emailEditorPaste(e) {
var clipboardData = e.event.clipboardData || window.clipboardData;
var items = clipboardData.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.type.indexOf("image") !== -1) {
e.preventDefault();
console.log("Images cannot be pasted here");
break;
}
}
}
and I have appended it to the Paste events on Editor as in here
@(Html.Kendo().EditorFor(m => m.MsgT.body) .
.Tools(tools => tools
.Clear()
.FontName().FontSize()
.Bold().Italic().Underline()
.JustifyLeft().JustifyCenter().JustifyRight()
.ForeColor().BackColor()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.InsertImage()
)
.Events(events => events
.Change("emailEditorChange")
.Paste("emailEditorPaste")
emailEditorPaste() works fine in not allowing me the user to drag and drop the images but when I have a text copied to clipboard and I try to paste it into editor , it doesn't paste on first attempt and throws a console error:
"Cannot read properties of undefined (reading 'clipboardData')
TypeError: Cannot read properties of undefined (reading 'clipboardData')" .
On second attempt the text is pasted into the editor just fine.
I looked all places but I am still missing something, can you please share me some resources on how to disable the drag and drop images into the editor.