Questions on UI for ASP.NET Core Forum

1 answer

149 views

Hi,

I have a template that I want to display certain controls if I am editing and others if I am creating new.

I have the code shown below but it does not work. It seems that the template is initialized at the time the parent is loaded.

How can I display the dropdown list in create mode and the textbox in edit mode?

The code below doesn't work but shows what I am trying to do.

Thanks … Ed

<div class="form-group">

<label class="LabelStyle">Vial</label>

@{

if (Model != null && Model.IsCreatingNew)

{

@(Html.Kendo().DropDownListFor(m => m.VialId)

.AutoBind(true).DataValueField("VialId").DataTextField("VialName")

.DataSource(source =>

{

source.Ajax()

.Read(r => { r.Url("?handler=VialsRead").Data("forgeryToken"); });

}).HtmlAttributes(new { style = "width:150px" }))

<span asp-validation-for="VialId" class="text-danger"></span>

}

else

@(Html.TextBoxFor(m => m.VialName, new { @class = "border-0", @readonly = "true", @style = "width:50px; margin-top:-8px" }))

}

</div>

Grid

answered on 30 Jan 2020

11 answers

505 views

PanelBar.Text - Multi Line

Is there a way to have multiple lines (with different styles)? Kinda like this:

Main Text LIne

This is my Sub Text

Thanks for your help,

Joel

PanelBar

answered on 29 Jan 2020

6 answers

790 views

problem with scrolling in kendo grid asp.net core

hi telerik team

i'm using kendo grid in my project asp.net core 2.2. i use "k-rtl" css class in my grid. but i have skip problem!! when i run project and i click on columns to sort, it's dont work! In fact, when I click on the columns (to sort), this is not done and horizontal scrolling jumps! below gif: i need kendo grid in my project and use it in persian language( right to left language). i use Telerik_UI_for_ASP.NET_CORE version 2019.3.1023. please help me how i should fix this issue?

@model IEnumerable<DomainClasses.Person.Person>

@using Utilities.Convertor

@using Kendo.Mvc.UI

@{

Layout = "_DefaultLayout2";

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

<div class="row" style="color:#03db22">

<div class="col-xl-12 k-rtl">

<div id="grid">

@{

var maritalStatusTemplate = "# if (data.MaritalStatus==2) { # <i class='material-icons' style='color:limegreen;font-size:xx-large'>done</i> # } #";

//var blueRayTemplate = "# if (data.BlueRay) { # <i class='fa fa-check' aria-hidden='true'></i> # } #";

}

@(Html.Kendo().Grid<DomainClasses.Person.Person>()

.Name("grid")

.Navigatable()

.Sortable()

.Editable()

.Groupable()

.Filterable()

.Pageable(pg =>

{

pg.AlwaysVisible(true);

pg.ButtonCount(5);

pg.Enabled(true);

pg.PageSizes(new int[] {5,10,20,30,40});

pg.Refresh(true);

pg.Responsive(true);

pg.PreviousNext(true);

pg.Numeric(true);

})

.Scrollable(sc=>sc.Virtual(true))

.ToolBar(x => { x.Create(); })

.Columns(columns =>

{

columns.Bound(column => column.PersonType).EditorTemplateName("ClientPersonTypeEditor").Width(90);

columns.Bound(column => column.PersonId).Width(100);

columns.Bound(column => column.Name).Width(150);

columns.Bound(column => column.Family).Width(180);

columns.Bound(column => column.AliasName).Width(100);

columns.Bound(column => column.FatherName).Width(100);

columns.Bound(column => column.BirthDate).ClientTemplate("#: BirthDatePersian #").Width(110);

columns.Bound(column => column.BirthCertificate).Width(100);

columns.Bound(column => column.NationalNumber).Width(100);

columns.Bound(column => column.Province).Width(180);

columns.Bound(column => column.County).EditorTemplateName("ClientCountyEditor").Width(100);

columns.Bound(column => column.Village).Width(150);

columns.Bound(column => column.Street).Width(180);

columns.Bound(column => column.Madhhab).Width(100);

columns.Bound(column => column.MaritalStatus).ClientTemplate(maritalStatusTemplate).HtmlAttributes(new { style = "text-align: center" }).Width(100);

columns.Bound(column => column.NumberOfWife).Width(100);

columns.Bound(column => column.NumberOfBoy).Width(100);

columns.Bound(column => column.NumberOfGirl).Width(100);

columns.Bound(column => column.WNCAYIF).Width(100);

columns.Bound(column => column.PersonnelCode).Width(100);

columns.Bound(column => column.Workplace).Width(100);

columns.Bound(column => column.MembershipDate).ClientTemplate("#: MembershipDatePersian #").Width(110);

columns.Bound(column => column.MilitaryService).Width(100);

columns.Bound(column => column.ServiceOrgan).Width(100);

columns.Bound(column => column.Category).Width(100);

columns.Bound(column => column.PlaceOfTraining).Width(100);

columns.Bound(column => column.DateOfTraining).ClientTemplate("#: DateOfTrainingPersian #").Width(110);

columns.Command(column =>

{

column.Edit();

column.Destroy();

}).Locked().Width(200);

})

.DataSource(

ds => ds.Ajax()

.ServerOperation(true)

.PageSize(20)

.Read(r => r.Action("GetAllPersons", "People"))

)

</div>

Grid

answered on 27 Jan 2020

2 answers

2.0K+ views

Update UI grid using response data from Ajax call

Hi,

I'm using the UI grid in ASP.NET Core using local data. The grid is populated using the page model.

If the user wishes to delete a record, after confirmation, I use an Ajax call to the controller action to perform some magical work and delete the selected record. The ajax call returns successfully, with the updated record set...minus the recently deleted record.

For the life of me, I can't get the newly updated json dataset to refresh the grid. Is this even possible?

Page model

public class RoleListViewModel {

public string GridTitle { get; set; }

public IEnumerable<RoleGrid> RoleList { get; set; }

}

Page code with the grid.

@(Html.Kendo().Grid<RoleGrid>(Model.RoleList)

.Name("roleGrid")

.Columns(columns => {

columns.Bound(m => m.RoleId).Hidden();

columns.Bound(m => m.Name)

.Width(100)

.Title("Name");

columns.Bound(m => m.Description)

.Width(212)

.Title("Description");

columns.Command(command => {

command.Custom("EditRole")

.Text("Edit")

.HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

.Click("editRole");

command.Custom("CopyRole")

.Text("Copy")

.HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

.Click("copyRole");

command.Custom("DeleteRole")

.Text("Delete")

.HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

.Click("deleteRole");

})

.Width(100);

})

.HtmlAttributes(new { style = "height: 517px; color: #323232; font-weight: 400; font-size: 14px;" })

.Pageable(pageable => pageable

.Input(true)

.PreviousNext(true)

.Refresh(true)

.PageSizes(true)

)

.Filterable()

.ToolBar(t => t.Search())

.Selectable(select => select

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row)

)

.Sortable(s => s.AllowUnsort(false))

.Search(s => {

s.Field(c => c.Name);

s.Field(c => c.Description);

})

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model => {

model.Id(m => m.RoleId);

model.Field(m => m.Name);

model.Field(m => m.Description);

})

.PageSize(10)

)

Controller delete method

public async Task<ActionResult> DeleteAjax([DataSourceRequest]DataSourceRequest request, string roleId) {

if (roleId != null) {

//do some magical code here after selected record is deleted.

return Json(GetRoles().ToDataSourceResult(request));

}

else {

return Json(GetRoles().ToDataSourceResult(request));

}

And finally, the jquery code to handle deleting the selected record

function deleteRole(e) {

e.preventDefault();

var grid = this;

var row = $(e.currentTarget).closest("tr");

selectedRole = this.dataItem($(e.currentTarget).closest("tr"));

$('#confirmDeleteItem').text('Delete the ' + selectedRole.Name + ' role?');

wnd.center().open();

$("#yes").click(function () {

wnd.close();

$.ajax({

type: "POST",

url: '@Url.Action("DeleteAjax", "Role")',

data: { roleId: selectedRole.RoleId },

dataType: "json",

success: function (response) {

var grid = $('#roleGrid').data('kendoGrid');

//response.data returns an array of object with roleId, name and description

//the following call clears out the grid data but the grid still shows the correct # of records left

grid.dataSource.read(response.data({ RoleID: roleId, Name: name, Description: description }));

}

});

$("#no").click(function () {

wnd.close();

});

}

Any suggestions on how to best load the response array after the ajax call?

I realize this is not ideal as it's not server or client side dedicated.

Thanks.

Jason

Grid

answered on 24 Jan 2020

1 answer

474 views

Unable to resolve 'Telerik.UI.for.AspNet.Core (>= 2020.1.114)' for '.NETCoreApp,Version=v3.0'

Hello,

We have VS 2019 installed on build server (Azure DevOps 2019).

Project builds perfectly fine using VS 2019.

However using Azure DevOps build pipeline, we are getting unable to resolve error.

Please take a look at this screenshot and suggest a probable solution.

Thank you

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<config>
<add key="http_proxy" value="http://..." />
<add key="https_proxy" value="https://..." />
</config>
<packageSources>
<add key="Telerik" value="https://nuget.telerik.com/nuget/" />
</packageSources>
<packageSourceCredentials>
<Telerik>
<add key="Username" value="..." />
<add key="ClearTextPassword" value="..." />
</Telerik>
</packageSourceCredentials>
</configuration>

General Discussions

answered on 24 Jan 2020

1 answer

157 views

Make panelbar fill available space

hello -- I'm using a panel bar in an MVC app and would like for it to fill the available space,whether the user is looking at the app on a big screen or phone. Specifically, I would like for the panelbar's height to be the same as the viewport and then, when the page is loaded, each of the 5 sections in the panel bar should shrink or grow dynamically to fill the entire panelbar control with no white space left underneath.

Is there a way to accomplish this?

thanks

Yvette Whitaker

PanelBar

answered on 23 Jan 2020

3 answers

5.0K+ views

No packages exist with this id in source(s): Telerik

Hello,

I am working on a .net core web application which builds perfectly fine on my local machine.

We have VS 2019 installed on our build machine. I am able to build successfully without any errors inside Visual Studio.

However, when using TFS 2017 on build machine to build the project, I am getting "No packages exist with this id in source(s): Telerik"

I was just wondering if you could help me with a probable solution?

Thank you.

General Discussions

answered on 23 Jan 2020

3 answers

286 views

Can autocomplete be used with ajax binding within a razorpage?

I see the example in the docs setting a custom datasource, but I dont see any mention of using Ajax for the datasource binding? It looks like this wont work with razorpages using one of the page handlers for the datasource read methods. So I guess another option is to use a web api handler and use that?

AutoComplete

answered on 22 Jan 2020

3 answers

1.0K+ views

Client side validation not working in inline-edit mode

Hello,

I have the following grid implementation:

<kendo-grid name="grid"
auto-bind="true"
selectable="multiple, row"
persist-selection="true"
on-change="Grid_SelectionChanged"
on-data-bound="Grid_Loaded"
on-remove=""
resizable="true">
<datasource type="DataSourceTagHelperType.Ajax" auto-sync="false" server-filtering="true" server-sorting="true" page-size="10"
on-request-end="@MODAL.RequestEndFunctionName" on-error="@MODAL.ErrorHandlerFunctionName">
<transport>
<read url="@Url.Action("ReadItemList", "Users", new { Area = "Admin" })" />
<create url="@Url.Action("Create", "Users", new { Area = "Admin" })" />
<destroy url="@Url.Action("Delete", "Users", new { Area = "Admin" })" />
<update url="@Url.Action("UpdateFromGrid", "Users", new { Area = "Admin" })" />
</transport>
<schema>
<model id="Id">
<fields>
<field name="Enabled" type="boolean" default-value="true"></field>
<field name="LockoutEnabled" type="boolean" default-value="false"></field>
<field name="Id" type="Guid"></field>
<field name="UserName" type="string"></field>
<field name="Email" type="string"></field>
<field name="PhoneNumber" type="string"></field>
</fields>
</model>
</schema>
</datasource>
<groupable enabled="true" />
<editable mode="inline" />
<filterable enabled="true" />
<sortable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50, 100, 1000 }" />
<columns>
<column selectable="true" width="37"></column>
<column field="Id" title="Id" hidden="true"></column>
<column field="Enabled"
title="Engedélyezett?"
template="#= getCheckboxHtml(Enabled) #"
editor="ZBoolEditor"
min-screen-width="60"
width="150"></column>
<column field="UserName" title="User name" min-resizable-width="180" width="360" html-attributes='new Dictionary<string, object> { ["style"] = "font-weight: bold;" }'></column>
<column field="Email" title="E-mail address" min-screen-width="180" width="360"></column>
<column field="PhoneNumber" title="Phone number" min-screen-width="180" width="360"></column>
<column field="LockoutEnabled"
title="Locked"
template="#= getLockedHtml(LockoutEnabled) #"
editor="ZBoolEditor"
min-screen-width="600"></column>
<column title="Műveletek" width="150">
<commands>
<column-command text=" " name="edit" visible="false"></column-command>
<column-command text="<span class='fas fa-edit'></span>" name="editinpopup" click="Grid_EditInPopup"></column-command>
<column-command text="<span class='k-icon k-i-close'></span>" name="custom" click="Grid_RemoveItem"></column-command>
</commands>
</column>
</columns>

</kendo-grid>

My problem that the client side validaion not working, I can leave the empty cell without any validation error message and I can press the Update button without restriction. I have data annotations in my model, for example:

[Required(ErrorMessage = "'{0}' mező megadása kötelező!")]
[Display(Name = "E-mail cím")]
[EmailAddress(ErrorMessage = "Az e-mail cím formátuma nem érvényes!")]
[StringLength(255, ErrorMessage = "A(z) '{0}' mező hossza minimum {2}, maximum {1} karakter lehet!", MinimumLength = 5)]
[GridFastEditEnabled()]
public string Email { get; set; }

Thank you for help!

Grid