Questions on UI for ASP.NET Core Forum

1 answer

5.1K+ views

DataTables - header column width not aligned with body column width

Hi,

I am using DataTables from DataTables in TabStrip.

I figure i faced the same problem as mentioned here: datatable jquery - table header width not aligned with body width

There was a solution mentioned in the blog that works for Bootstrap Tab:

// If table is in the tab, you need to adjust headers when tab becomes visible.

// For example, for Bootstrap Tab plugin:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){

$($.fn.dataTable.tables(true)).DataTable().columns.adjust();});

How can i do that for telerik TabStrip?

Here is my TabStrip in cshtml:

<div class="col-md-9 k-content wide">

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Animation(animation =>

animation.Open(effect =>

effect.Fade(FadeDirection.In)))

.Items(tabstrip =>

{

tabstrip.Add().Text("OEE")

.Selected(true)

.Content(@<text>

</text>);

tabstrip.Add().Text("System Performance")

.Content(@<text>

<div class="container">

<div class="row">

<div class="col-5">

<table id="systemPerfTable" class="table table-striped table-bordered" cellspacing="0">

<thead>

<tr>

<th>Item</th>

<th>Value</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Lot Elapsed Timestamp</th>

<td id="lotElapsedTimestamp">1/1/1900 00:00:00</td>

</tr>

<tr>

<th scope="row">Lot Submission Timestamp</th>

<td id="lotSubmissionTimestamp">1/1/1900 00:00:00</td>

</tr>

</tbody>

</table>

</div>

</text>);

})

)

</div>

Here is the script:

<script>

$("#systemPerfTable").DataTable({

scrollY: "500px",

scrollCollapse: true,

paging: false,

searching: false,

ordering: false,

info: false

});

</script>

TabStrip

answered on 30 Aug 2019

8 answers

1.3K+ views

Pre Filter Using DataSource .Filter

I have a grid that I would like to be filtered based on a button that a user clicks on a website. I have went through much of the documentation, but I am unable to find a way to filter without using a string. I would like to pass in a value. Is there something that I am missing here.

@(Html.Kendo().Grid<Item>()

.Name("grid").Scrollable(c => c.Enabled(true).Height(1000))

.DataSource(dataSource => dataSource

.Ajax()

.Filter(f=>f.Add(a=>a.Status).IsEqualTo(""))

.Read(read => read.Action("Products_Read", "Controller"))

.PageSize(20)

)

Grid

answered on 30 Aug 2019

9 answers

113 views

AutoComplete show not found

Hi I have the code and result below, but Auto Complete show not fund any thing i missing or got it wrong here?

@(Html.Kendo().AutoComplete()
.Name("ceaSearch")
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("salesperson_name")
.MinLength(1)
.DataSource(source =>{
   source.Read(read =>
   {
       read.Url("https://data.gov.sg/api/action/datastore_search")
       .Data("getCEAData");
   })
   .ServerFiltering(true)
   .Custom()
   .Schema(schema => schema
       .Data("records")
       .Type("json")
       .Model(model =>
       {
           model.Id("salesperson_nam");
           model.Field("registration_no", typeof(string));
           model.Field("estate_agent_name", typeof(string));
           model.Field("estate_agent_license_no", typeof(string));
       })
   );
}).Template("<span>#: records.salesperson_name#</span>"))

function getCEAData() {

   var value = $("#ceaSearch").data("kendoAutoComplete").value();
   return {
       resource_id: 'a41ce851-728e-4d65-8dc5-e0515a01ff31', // the resource id
       q: value
   };
}

The API returned data below. but Autocomplate show not found

{"help": "https://data.gov.sg/api/3/action/help_show?name=datastore_search", "success": true, "result": {"resource_id": "a41ce851-728e-4d65-8dc5-e0515a01ff31", "fields": [{"type": "int4", "id": "_id"}, {"type": "text", "id": "salesperson_name"}, {"type": "text", "id": "registration_no"}, {"type": "text", "id": "registration_start_date"}, {"type": "text", "id": "registration_end_date"}, {"type": "text", "id": "estate_agent_name"}, {"type": "text", "id": "estate_agent_license_no"}, {"type": "int8", "id": "_full_count"}, {"type": "float4", "id": "rank"}], "q": "merita", "records": [{"registration_end_date": "2019-12-31", "estate_agent_license_no": "L3008536D", "salesperson_name": "MERITA LOUISE TIN GUEK PING (DENG YUEPING) (MERITA LOUISE TIN)", "registration_no": "R000662B", "rank": 0.0706241, "_full_count": "2", "registration_start_date": "2015-11-03", "estate_agent_name": "LANDPLUS PROPERTY NETWORK PTE LTD", "_id": 30808}, {"registration_end_date": "2019-12-31", "estate_agent_license_no": "L3008536D", "salesperson_name": "MERITA LOUISE TIN GUEK PING (DENG YUEPING) (MERITA LOUISE TIN)", "registration_no": "R000662B", "rank": 0.0706241, "_full_count": "2", "registration_start_date": "2015-11-03", "estate_agent_name": "LANDPLUS PROPERTY NETWORK PTE LTD", "_id": 32886}], "_links": {"start": "/api/action/datastore_search?q=merita&resource_id=a41ce851-728e-4d65-8dc5-e0515a01ff31", "next": "/api/action/datastore_search?q=merita&offset=100&resource_id=a41ce851-728e-4d65-8dc5-e0515a01ff31"}, "total": 2}}

AutoComplete

answered on 29 Aug 2019

1 answer

306 views

0x800a1391 - JavaScript runtime error: 'kendo' is undefined occurred

Telerik UI for ASP.NET Core not working on Razor page Core 2.0

To replicate:

Create New Project -> .NET Core -> ASP.NET Core Web Application

Select -> Web Application (ASP.NET Core 2.0)

Added services.AddKendo(); to Startup.cs

Added @addTagHelper, etc . to _ViewImports.cshtml

Added link and script to _Layout.cshtml

Added @using Kendo.Mvc.UI and @(Html.Kendo().DatePicker().Name("my-picker")) to target page.

Encountered error showed in title.

General Discussions

answered on 28 Aug 2019

3 answers

1.5K+ views

PDF file fails to process

I am using the example from: https://demos.telerik.com/aspnet-core/pdfviewer/index

No matter what PDF file I put in the code I get the message "PDF file fails to process". If I use the dialog on the PDF Viewer and go to the exact same PDF file it opens correctly. Any idea what I am missing?

From Layout.cshtml:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TestPDFApp</title>
    <script src="~/js/site.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
    <link href="~/css/site.css" rel="stylesheet" />
</head>

From my View:

PDFViewer

answered on 27 Aug 2019

2 answers

109 views

Grid Editing -- Yes for Create, No for Edit

Is there a way to make a column cell in the grid editable when the user clicks the create button on the toolbar but to make the same column cell read only when the user tries to edit the record? I want the user to be able to add new records but not be able to change the values in a specific field when editing the row.

I can use the beforeEdit function to determine if it is in new or update state but not sure what to do from here.

function beforeEdit(e) {
        if (!e.model.isNew()) {
            alert("Edit");
        }
        else {
            alert("New");
        }
    }

I am using Visual Studio 2017, Net Core 2.1 Telerik 2019.2.619

Thanks.

Rich

Grid

answered on 26 Aug 2019

7 answers

3.1K+ views

Grid filter on Guid: Provided expression should have string type

I have an angular grid which uses a GridDataResult posting back to an API controller in my .netcore project with a DataSourceRequest parameter.

The first column of my grid has a Guid, declared in a model both server and client side.

When I try filter on this column the server throws an exception:

"Provided expression should have string type".

I have searched both this forum and the MVC forum to try apply a server-side request filter to no avail.

How should this be handled?

Grid

answered on 23 Aug 2019

2 answers

787 views

Enum value not rendered in grid

Hi,

I'm trying to use the Grid inTelerik UI for ASP.NET Core with a remote datasource:

@(Html.Kendo().Grid<DashboardEntry>()
.Name("dashboardGrid")
.Columns(columns =>
{

columns.Bound(p => p.Id).Width(50);
columns.Bound(p => p.State).Width(100); --> Enum property

})
.AutoBind(false)
.DataSource(dataSource =>
dataSource
.Ajax()
.ServerOperation(true)
.Batch(true)
.PageSize(20)
.Model(model => model.Id(p => p.Id))
.Read(read =>
read.Url("http://localhost:5000/dashboard/entries")
.Type(HttpVerbs.Get))
.Events(events => events.Error("error_handler"))
)
)

The json from server looks like this:

{

Data:[

{0: {Id: 22041, State: "Draft" },

{0: {Id: 22042, State: "Complete" }

],

Total: 2

}

Practically, the enum is actually a string, thanks to a StateConverter : JsonConverter.

But nothing is rendered/displayed in the State column.

How can I make it work?

Thanks.

Grid

answered on 22 Aug 2019

2 answers

133 views

InLine Edit Bug???

If I have things set up for inline editing and I click on the add button on the toolbar and create my new item, all is well.
The problem crops up when, immediately after saving the new item, I then click on teh edit button for that item. It then correctly opens up the line to make changes,
but you hit update you're create function gets called instead of the update function. Thus I end up with duplicates.

Thanks … Ed

Grid

answered on 21 Aug 2019

5 answers

606 views

scheduler start date : utc date conversion

In scheduler control, I can create a date like Aug 11 8am.
The view model saves the date as UTC : start = new DateTime(value.Ticks, DateTimeKind.Utc);
On the Server , I see a -7 hour offset , like Aug 11 1am.
----------------------------------------------------------------------
This wiki says "SchedulerEvent instances are created, where start/end dates are instantiated as JavaScript Date objects. During the process the dates will be offset against the local time."

https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/timezones

When I load the data back into the scheduer , it shows the 1am date. Why doesn't the scheduler add my 7 hour offset and show 8am ? Do i need to add kendo.stringify ?

Thanks,Peter

Scheduler

answered on 21 Aug 2019