Questions on UI for ASP.NET Core Forum

4 answers

472 views

Drag drop event to get new order of cards.

Hi

I have implemented the card UI and have the drag and drop working using the example script

$(document).ready( function () { $("#list").kendoSortable({ filter: ".k-card", cursor: "move", placeholder: function (element) {return element.clone().css("opacity", 0.1);}, hint: function (element) {return element.clone().css("width", element.width()).removeClass("k-state-selected");}});});

I want to be able to save the new order if the user drags and drops and item.

Is there an event to know when a drag and drop action has occurred.

Then I can loop through a class in javascript and grab the order from the ids or a data attribute to re-order the items.

Many thanks

Card

answered on 14 Dec 2020

2 answers

148 views

Multi Select Text after post

After my page comes back after a post the selected items in the multi select are gone. The datasource http GET returns no items because it filters it base off text...

RAZOR .cshtml

<kendo-multiselect for="SearchCriteria.SiteId" value="@Model.SearchCriteria.SiteId" datatextfield="Name"
                                   datavaluefield="Id" placeholder="Search for a Clinic" filter="FilterType.Contains"
                                   auto-bind="true" deferred="true">
                    <datasource server-filtering="true">
                        <transport>
                            <read url="@Model.SearchProvidersURL">
                        </transport>
                    </datasource>
                </kendo-multiselect>

RAZOR Model page

public string SearchProvidersURL => $"{Url.Page("ByClinic")}?handler=ProviderSearch";
        public async Task<JsonResult> OnGetProviderSearch(string text)
        {
            var providerSites = await _lookUpService.GetProviderSites(text);

             //No Results if text is less than 3 characters because there are too many sites. I would return 40,000 items
            return new JsonResult(providerSites);
        }

Can I write some javascript that could run after the post happens, I don't know what to do?

MultiSelect

answered on 14 Dec 2020

1 answer

157 views

How to filter Multi Checklist item against column with html tag

I have a column with html code. i.e. <div style='color: green'> Active</div>

and I have the filterable operator set to "Contains" but the filter result is alway not found.

@(Html.Kendo().Grid(Model.Transaction)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.DisplayLeaseStatus).Title("Transaction Status").HtmlAttributes(new { style = "text-align:center" }).Filterable(ftb => ftb.Multi(true).BindTo(new[]{

new { DisplayLeaseStatus = Active },

new { DisplayLeaseStatus = Expired },

new { DisplayLeaseStatus = Terminated }

};));

})

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

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

)

.Events(e => e.DataBound("dataBoundHandler"))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(50)

.Events(e => e.Error("onError").RequestEnd("onRequestEnd")))

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

.Reorderable(reorder => reorder.Columns(true))

)

and the column data contents i.e. <div style='color : greed'> Active </div>

</div>

Any advice how i can filter this?

Grid

answered on 14 Dec 2020

3 answers

218 views

Export to RTF or DOCX

Can I export what is created in this Editor out to RTF or to DOCX files?

Thanks,

Joel

Editor

answered on 09 Dec 2020

3 answers

657 views

Pass model to template of Grid

Hello,

I have a grid edits in pop up:

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RecordViewModelTemplate"))

The fields bind well to the model in the template when I do:

However, the fields don't bind to the model when I try:

@Html.CheckBoxFor(m => m.SampleTestPackage.biochemistry[1].Selected, new Dictionary<string, object> { { "class", "biochemistry" }, { "data-test", "Comprehensive" } })

If the value is true in the model the check box doesn't appear selected.

I have tried also:

<h5> BIOCHEMISTRY </h5>
<div class="row">
@{ for (int i = 0; i < @ViewBag.biochemistry.Count; i++)
{
var biochemistryId = String.Format("biochemistry{0}", @ViewBag.biochemistry[i].Value);
<div class="form-group col-4">
<div class="custom-control custom-checkbox">
@Html.HiddenFor(m => m.SampleIndividualTest.biochemistry[i].Value)
@Html.HiddenFor(m => m.SampleIndividualTest.biochemistry[i].Text)
<input type="checkbox" id=@biochemistryId class="biochemistry custom-control-input" asp-for="@Model.SampleIndividualTest.biochemistry[i].Selected">
<label for=@biochemistryId class="custom-control-label"> @Html.Raw(@ViewBag.biochemistry[i].Text)</label>
</div>
</div> } }
</div>

but the check boxes don't bind and remain false when they are true/selected in the model.

If I do:

@{

if (Model == null){

<span> Model is empty </span>

}

I get as result that the model is empty.

I don't understand why some fields like AnimalId bind to the model and other no - when the model is apparently empty.

I am not coding anything to bind the model the template - is there any code I need to bind the model to the template when the edit event is clicked in the grid?

Also, when the update event is fired, the control gets and empty model, I suppose that it is logic as the model is empty.

Any help is appreciated, I suppose that I am missing the concept.

Kind Regards.

Grid

answered on 09 Dec 2020

1 answer

114 views

viewmodel from post - unable to bind in kendo Grid

I am struggling for last 3 days. all nugets installed.. and contoller is doing all that needs to do and returning viewmodel back to index view. but kendo grid doesn't render any thing. code below. am i doing any thing wrong here?

**************************************************************************************

@model Icaew.StudentRegistration.Admin.WebApp.Models.UserSearchViewModel
@using Kendo.Mvc.UI
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js">
</script>
<main class="primary content">
<div class="row">
<div class="columns">
@if (Model != null && ViewBag.UsersCount >= 1 && !Model.HasError)
{
@(Html.Kendo().Grid(Model.SearchResult)
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(2)
.ServerOperation(false)
)
.ToolBar(tools =>
{
tools.Pdf().Text("Custom PDF button text");
tools.Excel().Text("Custom Excel button text");
})
.Pageable()
.Sortable()
.Groupable()
.Columns(columns =>
{
columns.Bound(f => f.RecordCode);
columns.Bound(f => f.Firstname);
})
)
}
<a asp-area="" class="cta-link" asp-controller="Home" asp-action="Index">Back</a>
</div>
</div>
</main>
************************************************************************************************************************************

please can anyone help me? am i not including any css or js?

Grid

answered on 09 Dec 2020

1 answer

263 views

Custom steps in Wizard for ASP.NET Core

Hello,

Could we customize the wizard functionality?

For example:

1) disable the change of the content within the Circle of the Step,

2) use a custom icon/img instead of Check Icon which is currently displayed?

Wizard

answered on 07 Dec 2020

1 answer

106 views

Customize appearance

Is there a way to customize the appearance of the color picker popup window? For example, can I add a text separator, or perhaps a tooltip to each tile in the color picker?

Thanks

Matt

ColorPicker

answered on 04 Dec 2020

1 answer

737 views

Grid popup: How to display validation errors inline (rather than as hint bubble)

In a grid with GridEditMode.Popup, validation errors for fields in the pop-up window appear as a hint bubble by default.

Is it possible to change the style of the validation so that errors in the pop-up window appear below the input fields (as they might for a normal html form)?

See images for example.

Thanks,

Grid

answered on 04 Dec 2020

1 answer

290 views

Binding Problem

Hi,

How can I bind a model to grids, combo, textarea etc into my tabStrip and get my model populated back on button press?

This is my Index.cshtml

@model RestRequestModel

<form method="post" asp-action="Index">

<div style="margin-bottom:5px;">

<button id="invokeBtn" class="k-button k-primary" name="invoke" value="Invoke">Invoke</button>

</div>

<div style="margin-bottom:5px;">

<h3>Request</h3>

<select asp-for="Method" style = "width:18%;"

asp-items="@new SelectList(Enum.GetNames(typeof(RestSharp.Method)))"></select>

<input type="text" placeholder="Type URL here ..." style="width:80%; margin-left:10px;" asp-for="Url"

value='@Model?.Url' />

</div>

<div class="k-content">

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Animation(animation =>

animation.Open(effect =>

effect.Fade(FadeDirection.In)))

.Items(tabstrip =>

{

tabstrip.Add().Text("Url Segments")

.Selected(true)

.Content(@<text>

@(Html.Kendo().Grid(Model.UrlSegmentParameters)

.Name("UrlSegmentsGrid")

.Columns(columns =>

{

columns.Bound(p => p.Name).Title("Key");

columns.Bound(p => p.Value).Title("Value");

columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(172).HtmlAttributes(new { style = "vertical-align:top;" });

})

.ToolBar(toolbar => toolbar.Create().Text("New"))

.Pageable()

.Sortable()

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

.Scrollable(scr => scr.Height(430))

.Filterable()

.DataSource(dataSource => dataSource

.WebApi()

.PageSize(20)

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

.Model(model =>

{

model.Id(p => p.Name);

})

//.ServerOperation(false)

//.Read(read => read.Action("GetUrlSegments", "RestClient", Model))

//.Destroy(update => update.Action("UrlSegments_Destroy", "RestClient"))

)

</text>);

tabstrip.Add().Text("Authorizations")

.Content(@<text>

<div style="margin-bottom:5px;">

<h5>Authentication Mode</h5>

@(Html.Kendo().ComboBox()

.Name("authenticationModeCombo")

.HtmlAttributes(new { style = "width:100%;" })

.DataTextField("Text")

.DataValueField("Value")

.DataSource(dataSource =>

dataSource.Read(read => read.Action("GetAuthMode", "RestClient")))

.Events(events => events.Change("authenticationModeChanged"))

.SelectedIndex(0)

)

</div>

<hr />

<div id="httpBasicAuthPanel" style="display:none;">

<table width="100%">

<tr>

<td style="width:20%">Username</td>

<td><input type="text" asp-for="BasicAuthAuthModel.Username" name="usernameTxt" style="width:100%;"/></td>

</tr>

<tr>

<td style="width:20%">Password</td>

<td><input type="password" name="passwordTxt" asp-for="BasicAuthAuthModel.Password" style="width:100%"/></td>

</tr>

</table>

</div>

<div id="Oaauth2Panel" style="display:none;" >

<table width="100%">

<tr>

<td style="width:20%">Authentication endpoint</td>

<td><input type="text" name="authEndpointTxt" asp-for="MSAzureOAUTH2AuthModel.AuthenticationAuthorityUrl" style="width:100%"/></td>

</tr>

<tr>

<td style="width:20%">Client Id</td>

<td><input type="text" name="clientIdTxt" asp-for="MSAzureOAUTH2AuthModel.ClientId" style="width:100%"/></td>

</tr>

<tr>

<td style="width:20%">Client Secret</td>

<td><input type="text" name="clientSecretTxt" asp-for="MSAzureOAUTH2AuthModel.ClientSecret" style="width:100%"/></td>

</tr>

</table>

</div>

</text>);

})

)

</div>

</form>

<script>

$(document).ready(function () {

$("#invokeBtn").kendoButton();

});

//error handler dei grid

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

//Mostro/nascondo i div nel tab Authorizations

function authenticationModeChanged() {

var value = this.value();

if (value == 1) {

document.getElementById("httpBasicAuthPanel")

.style.display = "block";

document.getElementById("Oaauth2Panel")

.style.display = "none";

}

else if (value == 2) {

document.getElementById("httpBasicAuthPanel")

.style.display = "none";

document.getElementById("Oaauth2Panel")

.style.display = "block";

}

</script>

This is my Controller

public IActionResult Index()

{

ViewData["authTypesData"] = GetRequestType();

return View(new RestRequestModel

{

HeaderParameters = new List<RestParameter>(),

UrlSegmentParameters = new List<RestParameter>(),

QueryParameters = new List<RestParameter>(),

BasicAuthAuthModel = new BasicAuthAuthenticationModel(),

MSAzureOAUTH2AuthModel = new MSAzureOAUTH2AuthenticationModel()

});

}

[HttpPost]

public IActionResult Index(RestRequestModel model)

{

var url = model.Url;

etc..

return View();

}

model.Url and Method are populated on postback but anything else is null

Thank you

TabStrip

answered on 02 Dec 2020