Telerik Forums
UI for ASP.NET Core Forum
1 answer
822 views

Hello guys,

I'm interested if it's possible to override the current search panel function, mostly for two reasons:

  1. to call the function on click, not keyup event
  2. to prevent existing filters from being deleted?

Thanks.

Anton Mironov
Telerik team
 answered on 14 May 2020
6 answers
168 views

The Date value submitted to the Controller method from the DateRangePicker control is not compatible with the System.DateTime .NET Type.

DateRangePicker:

<div class="col-sm-6">
    <h6>Date Filter:</h6>
 
    @(Html.Kendo().DateRangePicker()
        .Name("daterangepicker")
        .HtmlAttributes(new { style = "width: 100%" })
        .Events(e => e.Change("onDateRangeChange")))
</div>

Initialize Script:

$(document).ready(function() {
 
    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();
 
    alert(startDate == null);
    alert(endDate == null);
 
    alert("Start - " + startDate);
    alert("End - " + endDate);
 
    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
 
    var range = {
        start: startDate,
        end: endDate
    };
 
    dateRangePicker.range(range);
    //dateRangePicker.dateView._current = startDate;
 
    //alert("Start - " + dateRangePicker.range().start);
    //alert("End - " + dateRangePicker.range().end);
});

onDateRangeChange:

function onDateRangeChange() {
 
    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
    if (dateRangePicker != null) {
 
        var range = dateRangePicker.range();
        if (range != null) {
 
            var startDate = range.start;
            var endDate = range.end;
 
            alert("Start1 - " + startDate);
            alert("End - " + endDate);
 
            $('#startDate').val(startDate);
            $('#endDate').val(endDate);
 
            //dateRangePicker.dateView._current = startDate;
 
            var grid = $("#grid").getKendoGrid();
            grid.dataSource.read();
        }
    }
}

 

Grid Definition:

<div class="col-sm-8">
    <a href="#" onclick="onCreate()">Create New</a>
 
    @(Html.Kendo().Grid<Session>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Command(command => command
                .Custom("Detail")
                .Click("goDetail"))
                .Width(Glossary.Portal.ButtonWidth);
 
            columns.Bound(p => p.Time).Title("Time")
                .Format("{0:hh:dd:mm tt}");
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;margin-right:0px;padding-right:0px;" })
        .Selectable()
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("IndexJson", "Sessions")
                .Data("gridGetData"))))
</div>

gridGetData:

function gridGetData() {
 
    var groupId = $('#groupId').val();
    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
 
    alert("Start1 - " + startDate);
    alert("End - " + endDate);
    alert("groupId - " + groupId);
 
    //var isoStartDate = startDate.toISOString();
    //var isoEndDate = endDate.toISOString();
 
    //alert("Start2 - " + isoStartDate);
    //alert("End - " + isoEndDate);
 
    var data = {
        customerId: customerId,
        customerUniqueId: customerUniqueId,
        startDate: startDate,
        endDate: endDate,
        groupId: groupId,
        personId: personId
    };
 
    alert("Start3 - " + data.startDate);
    alert("End - " + data.endDate);
 
    return data;
}

Controller:

public async Task<IActionResult> IndexJson(
    [DataSourceRequest] DataSourceRequest request,
    int customerId,
    string customerUniqueId,
    DateTime startDate,
    DateTime endDate,
    int? groupId,
    int? personId)
{
    if (customerId == 0)
    {
        throw new Exception(
            $"Invalid {nameof(customerId)} parameter value.");
    }
 
    if (startDate == DateTime.MinValue ||
        endDate == DateTime.MinValue)
    {
        throw new Exception(
            $"Invalid {nameof(startDate)} or {nameof(endDate)} parameter values.");
    }

 

...

Attempt1:

Populate grid, initialize with DateTime parameter type

See attached files: 

- Annotation 2020-05-05 1.png - This is what happens the first time the grid.Read method is called

- Annotation 2020-05-05 alert.png - This shows the same alert from the gridGetData method 1st attempt then after the onDateRangeChange is called.

onDateRangeChange:  Nothing.  The Controller is not called

Attempt2:

Populate grid, initialize with string parameter type

I changed the Controller.IndexJson method's Parameter from DateTime to String DataType

At this point, the gridGetData successfully fired the Controller method and the string value given matched what was on the "Annotation 2020-05-05 alert.png" right side.  On DateTime.TryParse, the value was not compatible with .NET.

Thanks in advance for your help,

Joel

 

 

Joel
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 14 May 2020
1 answer
103 views

I just managed to get the upload control working with a razorpages app, using what I already knew about conventions etc.  Having replaced the use of Save with SaveURL, passing in the name of the handler, but it would be nice to have just a few notes on each control for Razorpages-specific implementation help.  I seem to recall reading this was "in the works".  Just curious if there is a planned date where we might see this?

 

 

Martin
Telerik team
 answered on 14 May 2020
4 answers
393 views

Seeing this example, how can I pass along extra values in the data that is posted back to the server, along with the file(s)?  Custom model?

https://demos.telerik.com/aspnet-core/upload/index

Martin
Telerik team
 answered on 14 May 2020
1 answer
2.1K+ views

Is there a way to force the TextBoxFor component to honour the data annotation string/max length for a model property?

I have the following model property with a data annotation for StringLength.

 

[Required]
[StringLength(5)]
[Display(Name = "Name")]
public string Name { get; set; }

 

I'm using the TextBoxFor component in a view.  But it will NOT enforce the maximum string length during data entry.

 

In order to get the TextBoxFor to restrict the maximum string length, I have to add the @maxlength property myself.

 

@(Html.Kendo().TextBoxFor(m => m.Country.Name)
    .HtmlAttributes(new { @maxlength = "5" })
)

 

Is there a way to have the TextBoxFor enforce the string length based on the data annotation itself?

Thanks.

Jason

 

Nikolay
Telerik team
 answered on 14 May 2020
6 answers
2.5K+ views

When I choose the export button enabled in options only the first page exports.  I am using scrollable() in the configuration.

Is there a way to export it natively to export all rows?

Thanks

Jorge
Top achievements
Rank 1
 answered on 14 May 2020
3 answers
111 views

When given a legit value on startup, value is not represented.

DateRangePicker:

<div class="col-sm-6">
    <h6>Date Filter:</h6>
 
    @(Html.Kendo().DateRangePicker()
        .Name("daterangepicker")
        .HtmlAttributes(new { style = "width: 100%" })
        .Events(e => e.Change("onDateRangeChange")))
</div>

Form Fields:

<form>
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" id="customerId" asp-for="CustomerId" />
    <input type="hidden" id="customerUniqueId" asp-for="CustomerUniqueId" />
    <input type="hidden" id="groupId" asp-for="GroupId" />
    <input type="hidden" id="personId" asp-for="PersonId" />
    <input type="hidden" id="startDate" asp-for="StartDate" />
    <input type="hidden" id="endDate" asp-for="EndDate" />
</form>

Initialize Script:

$(document).ready(function() {
 
    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();
 
    alert(startDate == null);
    alert(endDate == null);
 
    alert("Start - " + startDate);
    alert("End - " + endDate);
 
    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
 
    var range = {
        start: startDate,
        end: endDate
    };
 
    dateRangePicker.range(range);
    //dateRangePicker.dateView._current = startDate;
 
    //alert("Start - " + dateRangePicker.range().start);
    //alert("End - " + dateRangePicker.range().end);
});

Controller:

model.StartDate = DateTime.Today.Date.AddDays(-10);
model.EndDate = DateTime.Today.Date.AddDays(5);
Viktor Tachev
Telerik team
 answered on 13 May 2020
0 answers
72 views

Sometimes I forget the Razorpages is MVC under the covers. Having the need to build single-page app/responsive type web apps, I chose the following approach, and here is how the guts of the solution is laid out I setup for our team:

Web
- This is the main web app which includes an API
Models
- This project simply holds POCO classes that are passed
Data
This project holds classes that wrap Entity data models with methods for saving/fetching etc
The api uses methods in the classes of this project but accepts & returns objects of types from the Models library

The basic approach is when using controls on a page, eg.  some dropdowns, a grid etc
- Initial loading of the user input controls via Ajax calls to the api
- Typically there is one main task on a page, but other things have to be loaded at different times in order to get to the point of doing the main edit/update
- Once the user inputs are provided, the data for the grid can be fetched (via jquery/ajax call to api) and the grid loaded
- jQuery code that is common to doing much of the api calls are setup in a common js library

 

The great thing about this approach is that it handles 99% of what we need and I don't have to replicate the model classes in something like Typescript or javascript as with other frameworks.  The same POCO classes can be referenced both in the api and the razor code.  Anyone that has had to replicate models i=from C# into Typescript knows what Im referring to. Yes, I had started out pushing our team to use Angular and we went down that road for over a year.  It works, but was overkill for what we need. The "noise" of the various frameworks like Node/NPM and including it within a asp.net core app and the dependencies it has on the build process etc was just too much "noise".  So along comes Blazor but alas it wasn't production-ready at the time we needed it.  Using Razor pages with the above architecture lets one accomplish much of what one would want from a framework like Angular with a far simpler development stack.

 

hope this helps

 

 

BitShift
Top achievements
Rank 1
Veteran
 asked on 12 May 2020
2 answers
512 views

My site has a quick-search field on the main nav.  When the user puts a first & last name in the field and hits the search button, they expect to land on my Persons.Index page with a list of filtered people.  Can you tell me how to pre-populate the filter with values?  Then, have the grid refresh using the filters.  I prefer not to do multiple round trips... prefer this to be in place the first time the grid reads.

My Grid

@(Html.Kendo().Grid<Person>()
  .Name("grid")
  .Columns(columns =>
  {
      columns.Command(command => command
          .Custom("Detail")
          .Click("goDetail"))
          .Width(Glossary.Portal.ButtonWidth);
      columns.Bound(p => p.FirstName)
          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
              .ShowOperators(false)
              .SuggestionOperator(FilterType.Contains)));
      columns.Bound(p => p.LastName)
          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
              .ShowOperators(false)
              .SuggestionOperator(FilterType.Contains)));
  })
  .Pageable()
  .Sortable()
  .Scrollable()
  .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
  .HtmlAttributes(new { style = "height:550px;" })
  .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(20)
      .Read(read => read.Action("IndexJson", "Patients").Data("gridGetData"))
  ))
Anton Mironov
Telerik team
 answered on 12 May 2020
2 answers
356 views

Hi to all,

I would obtain a page that has header and footer fixed respectly top and bottom ancor.

In content insert a Grid, this one have to use all remaining height and use its scrollbar to keep rows.

How can I do this?

Viktor Tachev
Telerik team
 answered on 12 May 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?