I have review this form discussions but cannot get this working.
How to add a delete button to editor template Grid Popup? in Kendo UI for jQuery | Telerik Forums
How can I add an additional update button inside of my grid popup editor template? I have the exact same requirements as discussed in
Add extra button to Grid popup editor template in UI for ASP.NET MVC | Telerik Forums
Perhaps little different as I am using a custom popup editor template called RecordEdit.cshtml as outlined in ASP.NET MVC Data Grid Component Use Custom Popup Editors - Telerik UI for ASP.NET MVC@(Html.Kendo().Grid//....
//....
.Events(ev=>ev.Edit("onEdit"))
.Editable
(
editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("RecordEdit")
.Window(e => e.Width(1400).Height(1200))
)
)
function onEdit() {
$('<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-cancel");
}
I am unable to use the filter function i.e I am expecting when I click on the funnel to enter a text or something to take place i.e filtering however no option so far?
@model ReportViewModel
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Report";
}
<link href="https://kendo.cdn.telerik.com/themes/6.4.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.aspnetmvc.min.js"></script>
<style>
/* Basic styling for grids */
.k-grid {
width: 100%;
border-collapse: collapse;
}
/* Grid header styling */
.k-grid-header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
/* Grid header cell styling */
.k-grid-header th {
padding: 8px;
font-weight: bold;
text-align: left;
}
/* Grid body styling */
.k-grid tbody tr {
border-bottom: 1px solid #ddd;
}
/* Grid body cell styling */
.k-grid tbody td {
padding: 8px;
}
/* Alternate row background color */
.k-grid tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Hover effect for rows */
.k-grid tbody tr:hover {
background-color: #f0f0f0;
}
</style>
<h2>Employee and Location Report</h2>
<h3>Employees</h3>
@(Html.Kendo().Grid(Model.Employees)
.Name("gridEmployees")
.Columns(columns =>
{
columns.Bound(e => e.EmployeeId).Title("Employee ID");
columns.Bound(e => e.FirstName).Title("First Name");
columns.Bound(e => e.LastName).Title("Last Name");
columns.Bound(e => e.Department).Title("Department");
columns.Bound(e => e.Position).Title("Position");
columns.Bound(e => e.Salary).Title("Salary").Format("{0:C}");
})
.Pageable()
.Sortable()
.Filterable() // Enable filtering
)
<h3>Locations</h3>
@(Html.Kendo().Grid(Model.Locations)
.Name("gridLocations")
.Columns(columns =>
{
columns.Bound(l => l.LocationId).Title("Location ID");
columns.Bound(l => l.City).Title("City");
columns.Bound(l => l.Country).Title("Country");
columns.Bound(l => l.Address).Title("Address");
})
.Pageable()
.Sortable()
.Filterable()
)
Hi
My req is to save the documents in database in blob format. When user submits the form, the form will be saved in database and then with saved formid as reference key uploaded documents will be saved in documents table.
When user edits submitted form, I need to display already attached forms on the page. User may delete or attach new forms in edit screen.
When user viewing the form in read only mode, user should be able to download the form. How can i achieve this?
below code is working for uploading...
<div class="row col-md-12">
<div class="col-md-10">
<div class="form-group">
@Html.LabelFor(model => model.files, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@(Html.Kendo().Upload()
.Name("files")
.Validation(validation => validation
.AllowedExtensions(new string[] { ".pdf", ".txt", ".xlsx", ".xls", ".doc", ".docx" })
.MaxFileSize(15728640)
.MinFileSize(3000))
.ShowFileList(true)
.HtmlAttributes(new { aria_label = "files" })
)
@Html.ValidationMessageFor(model => model.files, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
viewmodel class
[Display(Name = "Upload relevant documents")]
public IEnumerable<HttpPostedFileBase> files { get; set; }
foreach (var file in vm.files)
{
byte[] document = new byte[file.ContentLength];
file.InputStream.Read(document, 0, file.ContentLength);
RLADOCUMENT rd = new RLADOCUMENT
{
RLAFORMID = (int)entity.ID,
DOCUMENTNAME = file.FileName,
CONTENTTYPE = file.ContentType,
DOCUMENTSIZE = document.Length,
DOCUMENTDATA = document,
CREATEDBY = Environment.UserName,
CREATEDDATE = DateTime.Now,
EXTENSION = Path.GetExtension(file.FileName)
};
_context.RLADOCUMENTS.Add(rd);
_context.SaveChanges();
}
Can someone help me how to display already attached files in Edit Mode with remove and upload option and download the attached reports.
My problem is that my MVC Grid was working up to Friday April 12, 2024, and now it's not. The Filter is causing my grid to error out. If I remove the Filter, my Grid works fine. If I use .Filterable(ftb => ftb.Mode(GridFilterMode.Row)), the Grid works fine.
What is causing my filtered grid not to work now? Below is my Grid:
@(Html.Kendo().Grid<AL.CC.DataContracts.DTO.Parts>()
.Name("PNGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(p => p.pn).Width("150").Title("Part").Filterable(true);
columns.Bound(p => p.name).Width("150").Title("Name").Filterable(true);
columns.Bound(p => p.year).Width("150").Title("Year").Filterable(true);
})
.Selectable()
.Sortable(sortable => sortable.AllowUnsort(true).InitialDirection(System.ComponentModel.ListSortDirection.Descending).SortMode(GridSortMode.MultipleColumn))
.Scrollable(s => s.Enabled(true).Height("auto"))
.Resizable(resize => resize.Columns(true))
.AutoBind(true)
.HtmlAttributes(new { style = "width:100%; height:675px;" })
.Events(events => events.Change("Grid_OnRowSelect").DataBound("onDataBoundPN"))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
))
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAll_Read", "Maintenance"))
.ServerOperation(false)
.AutoSync(true)
.Model(model =>
{
model.Field(p => p.id).Editable(false);
model.Field(p => p.name).Editable(false);
model.Field(p => p.year).Editable(false);
model.Field(p => p.pn).Editable(false);
})
)
)
I'm also using the following scripts and css in the following order:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/4.0.0/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/kendo/2023.3.1114/jszip.min.js"></script>
<script src="~/Scripts/kendo/2023.3.1114/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.3.1114/js/kendo.aspnetmvc.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<link href="https://kendo.cdn.telerik.com/themes/6.4.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/themes/6.4.0/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
Hi,
How do I set the font size for items in a DropDownList?
I saw a tip suggesting the method below, but it hasn't worked for me.
k-popup .k-item {
font-size: 24px;
}
Please advise.
/Br Anders
Hello,
I can't get the Destroy method to work, I often get a 415 error with the GetListUsersDto object as parameters.
@(Html.Kendo().Grid<GetListUsersDto>().Name("GetListUsersGrid")
.Groupable()
.Sortable()
.Editable()
.Scrollable()
.ToolBar(x => x.Create())
.Columns(columns =>
{
columns.Bound(c => c.ID).Title(@Localizer["Tab_User_Id"].Value);
columns.Bound(c => c.Surname).Title(@Localizer["Editing_User_Surname"].Value);
columns.Bound(c => c.Firstname).Title(@Localizer["Editing_User_Firstname"].Value);
columns.Bound(c => c.RoleName).Title(@Localizer["Editing_User_Role"].Value);
columns.Bound(c => c.DateDebActif).Title(@Localizer["Editing_User_Start_Date"].Value).Format("{0:M/d/yyyy HH:mm:ss}"); ;
columns.Bound(c => c.DateFinActif).Title(@Localizer["Editing_User_End_Date"].Value).Format("{0:M/d/yyyy HH:mm:ss}"); ;
columns.Command(c =>
{
c.Edit();
c.Destroy();
});
}).DataSource(dataSource => dataSource.Ajax()
.Read(r => r.Action("getusers", "admin"))
.Create(r => r.Action("createuser", "admin"))
.Destroy(r => r.Action("deleteuser", "admin"))
.Model(model =>
{
model.Id(m => m.ID);
model.Field(f => f.ID).DefaultValue(Guid.NewGuid());
}
)).Pageable())
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request, GetListUsersDto dto)
{
//var result = adminService.DeleteUser(dto.ID);
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
public class GetListUsersDto
{
public Guid ID { get; set; }
public string Surname { get; set; }
public string Firstname { get; set; }
public string Username { get; set; }
public bool IsActif { get; set; }
public int RoleId { get; set; }
public string RoleName { get; set; }
public int LangId { get; set; }
public string LangName { get; set; }
public DateTime DateDebActif { get; set; }
public DateTime DateFinActif { get; set; }
}
If I change my GetListUsersDto method to Guid ID, the method works but the Guid is empty.
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request, Guid Id)
{
//var result = adminService.DeleteUser(Guid.Parse(ID));
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
If I only set a DataSourceRequest request, the method works, but doesn't return a usable object for my service.
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request)
{
//var result = adminService.DeleteUser();
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
I don't know what to do. Does anyone have a solution or idea?
Thank you,
Hi Telerik,
I got an issue when rendering kendo datepicker. At first time we open the page, the value of Kendo datepicker populated. But then, after refresh (via browser button or f5) the value was gone, and only the format shown like below:
The only way to make it populated is to:
Here is how I render the kendo datepicker
@(Html.Kendo()
.DatePickerFor(x => x.FldBirthdate)
.Max(DateTime.Now)
.DateInput()
.Format("dd/MM/yyyy")
.ParseFormats(new List<string>() { "dd MMM yyyy" })
.HtmlAttributes(customAttributes)
.Events(x => x.Change("dateOnChange"))
)
I already tried to remove the max, dateinput(), format, parseformat, htmlattributes but the problem still persist.
There is no error message shown in the console.
Kendo version: 2019.3.1023
Jquery version: 3.4.1
Please advise.
Thank you.
We have this weird scenario where occasionally we get this, and a refresh and it may go away, its 99% not there and 1% of the time shows.
Happens in
Windows
DropDownList
Is anyone else having any issues trying to download packages using NuGet? I am trying to get the Telerik.UI.for.AspNet.Mvc4 package (latest version) and am getting this error:
Error downloading 'Telerik.UI.for.AspNet.Mvc4.2022.2.802' from 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.mvc4/2022.2.802/telerik.ui.for.aspnet.mvc4.2022.2.802.nupkg'.
Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host.
An existing connection was forcibly closed by the remote host
I am also pursuing this with our internal help desk, but wanted to see if the problem was larger than just me.
Thanks!