Questions on UI for ASP.NET Core Forum

6 answers

605 views

Show/Hide Detail row on condition

Hi,

how to Show/Hide Detail row on condition with value from grid datasource?

robert

Grid

answered on 06 Feb 2020

3 answers

458 views

Documentation for Core 3 and razor pages?

Is there any documentation available on how to get Grid working in razor pages with core 3? All I can find is either incomplete or for MVC.

Specifically I'm looking for something that documents how to pass in page index/size so that the data provider function can only fetch the rows needed from the DB. So either a custom reader or something.

The official docs don't have anything.

I've found the razor pages examples on github here : https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages

But they don't have any explanation about why things are done the way they are in each case and what specifically is needed to make things work in razor.

I've tried to adapt those examples in my own case but although I can get the grid to call the read method, the grid remains empty.

Grid

answered on 06 Feb 2020

1 answer

295 views

Nuget Update does not include updated JS

Is it expected that the JS files would not be updated with a nuget update?

Installer and VS Extensions

answered on 03 Feb 2020

8 answers

1.4K+ views

passing data from view to controller

Hello,

I would like to know how to pass the data from my "SelectedPosteSelectList" to my controller. When I submit my form, my "SelectedPosteSelectList" is null.

Thank you

public class EquipeViewModel

{

public string Nom { get; set; }

public string Description { get; set; }

public List<SelectListItem> PostesSelectList { get; set; }

public List<SelectListItem> SelectedPosteSelectList { get; set; }

}

<form asp-action="Edit">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="form-group">

<label asp-for="Nom" class="control-label"></label>

<input asp-for="Nom" class="form-control" />

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

</div>

<div class="form-group">

<label asp-for="Description" class="control-label"></label>

<input asp-for="Description" class="form-control" />

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

</div>

<input type="hidden" asp-for="Id" />

<div id="example" role="application">

<div class="demo-section k-content wide">

<label for="optional" id="employees">Postes</label>

<label for="selected">@Model.Nom</label>

<br />

@(Html.Kendo().ListBox()

.Name("Postes")

.Toolbar(toolbar =>

{

toolbar.Position(ListBoxToolbarPosition.Right);

toolbar.Tools(tools => tools

.TransferTo()

.TransferFrom()

.TransferAllTo()

.TransferAllFrom()

);

})

.Selectable(ListBoxSelectable.Multiple)

.ConnectWith("SelectedPosteSelectList")

.BindTo(Model.PostesSelectList)

)

@(Html.Kendo().ListBox()

.Name("SelectedPosteSelectList")

.BindTo(@Model.SelectedPosteSelectList)

.Selectable(ListBoxSelectable.Multiple)

)

</div>

<div class="form-group">

<input type="submit" value="Sauvegarder" class="btn btn-success" />

<a class="btn btn-filter" asp-action="Index">Retour</a>

</div>

</form>

public async Task<IActionResult> Edit(int id, EquipeViewModel equipeView)

ListBox

answered on 30 Jan 2020

1 answer

143 views

Custom Popup Edit Template troubles

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

494 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

783 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

458 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

132 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