Telerik Forums
UI for ASP.NET MVC Forum
1 answer
160 views

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()
        )

Eyup
Telerik team
 answered on 26 Apr 2024
0 answers
164 views

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.

Babu
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 22 Apr 2024
1 answer
127 views

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" />

 

Mihaela
Telerik team
 answered on 22 Apr 2024
1 answer
365 views

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

Ivan Danchev
Telerik team
 answered on 19 Apr 2024
0 answers
265 views

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,

Stéphane
Top achievements
Rank 1
 asked on 18 Apr 2024
2 answers
1.0K+ views

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:

  • Hard reload the page (ctrl+f5)
  • change the browser (tested on chrome).
  • change datepickerfor to datepicker() and add .value(x.FldBirthdate.Value.ToString("MM/dd/yyyy")).
    we have to ToString() it, if it's only x.FldBirthdate, it doesn't work.

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.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 17 Apr 2024
1 answer
106 views

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

Anton Mironov
Telerik team
 answered on 17 Apr 2024
1 answer
231 views

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!


Eyup
Telerik team
 answered on 17 Apr 2024
1 answer
330 views
Good morning,
 
I’m attempting to implement a ASP.NET MVC grid with custom filter functionality that’s integrated with my grid filters. However, I’m struggling with filter values getting overwritten when performing search filter functionality.
 
In my grid I have inline grid row filtering:
                          .Filterable(filterable => filterable
                               .Extra(false)
                              .Operators(operators => operators
                                  .ForString(str => str.Clear()
                                      .IsEqualTo("Is equal to")
                                      .IsNotEqualTo("Is not equal to")
                                      .StartsWith("Starts with")
                                      .Contains("Contains")
                                      .DoesNotContain("Does not contain")
                                      .EndsWith("Ends with")
                                      .IsNull("Is null")
                                      .IsNotNull("Is not null")
                                      .IsEmpty("Is empty")
                                      .IsNotEmpty("Is not empty")
                               ))
                           )
I also make use of inline grid search as filtering. This search functionality is defined in my grid toolbar:
                       toolbar.Search();
Lastly, for my mentioned custom filter functionality, I have defined two multiselects in my grid toolbar. These multiselects make use of a JavaScript onchange event that gets fired upon changing the multiselect value. This JavaScript function calls grid.dataSource.filter() to apply the filtering and then automatically call the grid read event. The set-up for this code is comparable to the example for the grid toolbar template: https://demos.telerik.com/aspnet-mvc/grid/toolbar-template
To retrieve my results, I make use of a datasource with .webApi() configuration, making use of a controller method that gets called with my read event. This controller method contains a DataSourceRequest that contains the set filters. The problem I’m facing is that when I input text into my search filter, that the set multiselects filters get overwritten.
Is there a way I can perform search and column filter functionality without it overwriting my multiselect filters?
ASP.NET MVC Grid Toolbar Template Demo | Telerik UI for ASP.NET MVC
This Telerik ASP.NET MVC Grid example shows how you can add custom toolbars to the grid and create toolbar templates.

https://demos.telerik.com/aspnet-mvc/grid/toolbar-template
Ivan Danchev
Telerik team
 answered on 17 Apr 2024
0 answers
112 views

Hi all,

I have a grid with multiple cascading dropdown columns, each dropdown gets filtered calling a method in my controller.

What I want now it is simply populate a non editable text column based on the value from one of my previous dropdowns calling a filter method on my controller.

Thank you

LnZ

 

Lorenzo
Top achievements
Rank 1
 asked on 16 Apr 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?