Questions on UI for ASP.NET Core Forum

4 answers

1.4K+ views

Grid Filtering with A Custom Filter Button

Hi,

I have got a form that contains 1 multiselect, 2 dropdown list, 1 button for filtering and 1 grid controls. Every control is required for filter parameters.

For example;

When user click Filter button I will get Multiselect control's selected values, dropdown list control's values and send them to my Action Result method that filling my grid control and in this method my linq query will build and refresh the Grid's datasource.

But i dont know how to get selected values to and then send it to Action Method for re-build my linq query and refresh grid.

Here is my Grid at Razor Page.

@(Html.Kendo().Grid<TelerikAspNetCoreDroppedCalls.Models.CallcentQueuecalls>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.FromUserpart);

columns.Bound(p => p.TimeStart).Format("{0:dd/MM/yyyy hh:ss}");

columns.Bound(p => p.TimeEnd).Format("{0:dd/MM/yyyy hh:ss}");

})

.Pageable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(20)

.Read(read => read.Action("CallQueues_Read", "Grid")

)

Here is my Action Method for filling Grid.

public async Task<ActionResult> CallQueues_Read([DataSourceRequest]DataSourceRequest request)

{

var query = from r in _db.CallcentQueuecalls

where !(r.ReasonNoanswercode == 0 && r.ReasonFailcode == 0 &&

r.ToDn != null && r.TsServicing != null)

&& (r.TimeStart >= DateTime.Today.AddDays(-3)) && r.QNum=="0010"

select r;

var dsResult = await query.ToDataSourceResultAsync(request);

return Json(dsResult);

}

Grid

answered on 27 May 2019

1 answer

170 views

Some components doens't work/show

So I've been trying out kendo core components and cannot get it to work with the sample codes from core.
Some components such as Autocomplete and Datepicker does work but when trying out for example a pie chart the component does not show for some reason.

Any suggestions on what the problem could be?

I've added pngs for the code below.

This works:

<div class="cards" style="height: 60%; flex-direction: row">

<div class="card mb-3 shadow card-theme" style="width: 35%; max-height: 100%; margin-right:20px;">

<div class="card-body" style="flex-direction:row">

<div id="phoenixPieChart" style="width:100%; height:50%;">

@(Html.Kendo().DatePicker()

.Name("DatePicker")

)

</div>

This doens't work:

<div class="cards" style="height: 60%; flex-direction: row">

<div class="card mb-3 shadow card-theme" style="width: 35%; max-height: 100%; margin-right:20px;">

<div class="card-body" style="flex-direction:row">

<div id="phoenixPieChart" style="width:100%; height:50%;">

@(Html.Kendo().Chart()

.Name("chart")

.Title(title => title

.Text("Share of Internet Population Growth, 2007 - 2012")

.Position(ChartTitlePosition.Bottom))

.Legend(legend => legend

.Visible(false)

)

.ChartArea(chart => chart

.Background("transparent")

)

.HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/shared/world-map.png") })

.Series(series =>

{

series.Pie(new dynamic[] {

new {category="Asia",value=53.8,color="#9de219"},

new {category="Europe",value=16.1,color="#90cc38"},

new {category="LatinAmerica",value=11.3,color="#068c35"},

new {category="Africa",value=9.6,color="#006634"},

new {category="MiddleEast",value=5.2,color="#004d38"},

new {category="NorthAmerica",value=3.6,color="#033939"}

})

.Labels(labels => labels

.Template("#= category #: \n #= value#%")

.Background("transparent")

.Visible(true)

)

.StartAngle(150);

})

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

</div>

General Discussions

answered on 24 May 2019

1 answer

2.0K+ views

what's the usage of "[Bind(Prefix = "models")] "?

"[Bind(Prefix = "models")] " in https://demos.telerik.com/aspnet-core/grid/editing

I strictly followed the code in this page, but my save updates doesn't work.

Grid

answered on 24 May 2019

1 answer

104 views

how to validate the input by another list

Hello,

I'm new to UI for Asp.net core. I met a problem here.

I have a table "authors" , contains all the author id [A,B,D,G,F]

and I have another table "books", it will be a Grid, showing book name, author name, when inline editing, user can update the author name for the book. when user input 'C', then notify him put a wrong author name. because our list is [A,B,D,G,F] has no C.

how to do this? or how to put a check box list when inline editing a row in Grid?

Grid

answered on 23 May 2019

4 answers

453 views

Excel Export 400 Error on .NET Core Razor Page

I'm getting a 400 Error when I click on the toolbar button to export the grid contents to Excel. The call to the ProxyURL method never happens.

Chrome Dev Tools shows the following.

POST https://localhost:44329/Admin/Companies?handler=Read 400

I suspect this is because the Anti-Forgery token is not getting passed to the read that the export function uses although it looks like the same read call that the grid uses successfully. Any ideas on how I can resolve this?

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

.AutoBind(false)

.Name("CompaniesGrid")

.Columns(columns =>

{

columns.Command(command => { command.Edit()

.HtmlAttributes(new { title = "Edit", @class = "k-button k-button-icontext" })

.UpdateText("Save"); }).Width(100);

columns.Bound(a => a.CompanyName).Width(200)

.Filterable(filterable => filterable.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.Contains("Contains")

))

);

columns.Bound(a => a.WebSite).Width(250)

.HtmlAttributes(new { @class = "wordWrapGridColumn" })

.Filterable(filterable => filterable.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.Contains("Contains")

))

);

columns.Bound(a => a.Active).Width(60)

.ClientTemplate("#= Active ? 'Yes' : 'No' #").HtmlAttributes(new { style = "text-align:center" });

})

.ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-file'></i> Add New")

.HtmlAttributes(new { id = "companyAdd", title = "Add a new company.", @class = "k-button k-button-icontext k-grid-add" }))

.ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-sync'></i> Refresh Grid")

.HtmlAttributes(new { id = "companyRefresh", title = "Refresh the data in the grid." }))

.ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-minus-square'></i> Clear Filters")

.HtmlAttributes(new { id = "companyReset", title = "Clear the grid column filters." }))

.ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-file-excel'></i> Export To Excel")

.HtmlAttributes(new { id = "export", title = "Export to Excel", @class = "k-button k-button-icontext k-grid-excel" }))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(pageable => pageable

.Input(true)

.Numeric(false)

.PageSizes(true)

.Messages(messages => messages.Display("Showing items from {0:0,0} to {1:0,0}. Total items: {2:0,0}"))

.Messages(messages => messages.Empty("No companies found."))

.PageSizes(new[] { 5, 10, 25, 50 })

)

.Resizable(resizeable => resizeable.Columns(true))

.Sortable()

.Scrollable(s => s.Height("auto"))

.Filterable()

.Excel(excel => excel

.AllPages(true)

.Filterable(true)

.FileName("Companies.xlsx")

.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))

)

.Events(events => events.ExcelExport("excelExport1"))

.DataSource(dataSource => dataSource

.Ajax()

.Read(r => r.Url("/Admin/Companies?handler=Read"))

.Update(u => u.Url("/Admin/Companies?handler=Update"))

.Create(c => c.Url("/Admin/Companies?handler=Create"))

.Model(m =>

{

m.Id(id => id.InstallerCompanyId);

m.Field(i => i.CompanyName);

m.Field(i => i.WebSite);

m.Field(i => i.Active).DefaultValue(true);

})

.PageSize(10)

.Sort(sortable => sortable.Add("CompanyName"))

.Events(events => events.Error("gridErrorHandler"))

)

My JavaScript

$(function () {

// razor pages have built in anti-forgery token so wire up the kendo grid to pass it when doing crud

var grid = $("#CompaniesGrid").data("kendoGrid");

grid.dataSource.transport.options.read.beforeSend = function (req) {

req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());

};

grid.dataSource.transport.options.update.beforeSend = function (req) {

req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());

};

grid.dataSource.transport.options.create.beforeSend = function (req) {

req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());

};

});

My controller method

[HttpPost]

public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)

{

var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);

}

Grid

answered on 22 May 2019

5 answers

728 views

Editor Validation using kendoValidator

Hi Experts,

I am using kendo-validator to validate the input controls like (Textbox, Dropdown etc.)

The validation for empty field is working if i move one control to another control using Tab.

I needed that all validation for empty fields should triggered on form submit, not on Tab.

The sample code is below.

<div class="row">
<div class="col-md-4">
<form id="addfacility" asp-action="Add" kendo-validator="true">
<div asp-validation-summary="ModelOnly" class="text-danger" style="width:900px;"></div>

<div class="form-group" style="width:400px;">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" maxlength="200" style="width:300px" />
@*<span asp-validation-for="Name" class="text-danger" style="width:500px"></span>*@
</div>
<div class="form-group" style="width:400px;">
<label asp-for="Address.Address1" class="control-label"></label>
<input asp-for="Address.Address1" class="form-control" maxlength="100" style="width:300px" />
@*<span asp-validation-for="Address.Address1" class="text-danger"></span>*@
</div>
<div class="form-group" style="width:400px;">
<label asp-for="Address.Address2" class="control-label"></label>
<input asp-for="Address.Address2" class="form-control" maxlength="100" style="width:300px" />
@*<span asp-validation-for="Address.Address2" class="text-danger"></span>*@
</div>
<div class="form-group" style="width:400px;">
<label asp-for="Address.City" class="control-label"></label>
<input asp-for="Address.City" class="form-control" maxlength="50" style="width:200px" required="required" title="City field is required."/>
@*<span asp-validation-for="Address.City" class="text-danger"></span>*@
</div>
<div class="form-group">
<label asp-for="Address.State" class="control-label"></label>

@(Html.Kendo().DropDownListFor(x => x.SelectedStateId)
.OptionLabel("--Please Select--")
.DataTextField("Name")
.DataValueField("EntityId")
.BindTo(Model.StateList)
.HtmlAttributes(new { required = "required", validationmessage = "The State field is Required.", @class = "form-control", style = "width: 200px;" })
)

@*<span asp-validation-for="SelectedStateId" class="text-danger"></span>*@

</div>
<div class="form-group">
<label asp-for="Address.Zip" class="control-label"></label>
<input asp-for="Address.Zip" class="form-control" maxlength="5" style="width:75px" />
@*<span asp-validation-for="Address.Zip" class="text-danger"></span>*@
</div>
<div class="form-group">
<label asp-for="Address.County" class="control-label"></label>
<input asp-for="Address.County" class="form-control" maxlength="50" style="width:200px" />
@*<span asp-validation-for="Address.County" class="text-danger"></span>*@
</div>
<div class="form-group" style="width:400px;">
<label asp-for="Phone" class="control-label"></label>

@(Html.Kendo().MaskedTextBoxFor(x => x.Phone)
//.Name("Phone")
.Mask("000-000-0000")
.HtmlAttributes(new { @class = "form-control", style = "Width:130px" }
)
//.Value(Model.PhoneNumber.Number)
)
<span asp-validation-for="Phone" class="text-danger"></span>

</div>
<div class="form-group">
<label asp-for="Ext" class="control-label"></label>
<input asp-for="Ext" class="form-control" maxlength="4" style="width:75px" />
@*<span asp-validation-for="Ext" class="text-danger"></span>*@
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" style="width:300px" maxlength="255"/>
@*<span asp-validation-for="Email" class="text-danger"></span>*@
</div>
<div class="form-group">
<label asp-for="Status" class="control-label"></label>
@(Html.Kendo().DropDownListFor(x => x.SelectedStatusId)
//.Name("Status")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.StatusList)
.HtmlAttributes(new { @class = "form-control", style = "width: 130px;" })
//.Value(Convert.ToString((int)Model.Status))

)
@*<span asp-validation-for="SelectedStatusId" class="text-danger"></span>*@
</div>
<div class="form-group">
<label asp-for="Organization" class="control-label"></label>
@(Html.Kendo().DropDownListFor(x => x.SelectedOrganizationId)
.OptionLabel("--Please Select--")
.DataTextField("Name")
.DataValueField("EntityId")
.BindTo(Model.OrganizationList)
.HtmlAttributes(new { required = "required", validationmessage = "The Organization field is Required.", @class = "form-control", style = "width: 300px;" })

)
@*<span asp-validation-for="SelectedOrganizationId" class="text-danger"></span>*@

</div>
<div class="form-group">

<label asp-for="FacilityType.Name" class="control-label"></label>
@(Html.Kendo().DropDownListFor(x => x.SelectedFacilityTypeId)
.OptionLabel("--Please Select--")
.DataTextField("Name")
.DataValueField("EntityId")
.BindTo(Model.FacilityTypeList)
.HtmlAttributes(new { required = "required", validationmessage = "The FacilityType field is Required.", @class = "form-control", style = "width: 300px;" })

)
@*<span asp-validation-for="FacilityType" class="text-danger"></span>*@
</div>

<div class="form-group">
<br />
<input type="submit" value="Add" class="btn btn-primary" />
  
<input type="button" value="Cancel" class="btn btn-primary" onclick="location.href = '@Url.Action("Index", "Facility")'" />
</div>
</form>
</div>
</div>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Please help !!!

Thanks & Regards

Lalit Narayan

Editor

answered on 22 May 2019

3 answers

224 views

Install ASP.NET Core UI manually, still uncorrect

Hi,

I follow https://docs.telerik.com/aspnet-core/getting-started/getting-started this instruction to create a new asp.net core 2.1 mvc project to test Telerik UI for Asp.net Core version 2019.1.220

I installed client resource manually following https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources#manual-installation . But the browsers console showed kendo js errors. I was sure I followed the instructions correctly, I don't know why it didn't work.

I zipped the codes and attached the download url in this thread:

https://celiawestus2.blob.core.windows.net/publics/test/WebApplication1.7z

Could anyone help to solve this problem?

General Discussions

answered on 21 May 2019

1 answer

776 views

DropDownList Tag Helper Events?

Does the drop down list tag helper have events? I can't seem to find documentation anywhere on events. I want to take action when selected or changed.

<kendo-dropdownlist name="products" filter="FilterType.StartsWith"></kendo-dropdownlist>

The examples in the link below only cover the HTML Helper.

https://demos.telerik.com/aspnet-core/dropdownlist/events

DropDownList