Questions on UI for ASP.NET Core Forum

2 answers

124 views

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

131 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

192 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

602 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

97 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

232 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

95 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

680 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

266 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

2 answers

292 views

Multiple TestBoxFor on one page

I have a page bound to model with multiple comboboxes and textboxes which like
@(Html.Kendo().ComboBoxFor(i => i.Accountant)...) and @(Html.Kendo().TextBoxFor(m => m.ZipCode)...) etc.
I also have a textbox bound to "Name" property of the model:
@(Html.Kendo().TextBoxFor(m => m.Name)...)

Also on the same page I have a grid (bound to another data) with popup editable window.
And this popup window also has a textbox bound to "Name" property (but from another model).
This particular textbox looks like simple input, not like kendo ui element.

I think, this is because I have two TextBoxFor elements, each bound to a property "Name" and so they have same id attributes ("#Name").

Is it possible to make textbox in popup window to looki like kendo element without renaming property of the model? Or is it possible to change the id of the second TextBoxFor element?

I tried to add the .Name("AnotherName") method to the second TextBoxFor element, but it doesn't work, the page doesn't load correctly. I tried to add the .Name("AnotherName") method to the first TextBoxFor element, but I received an error "You cannot override component name when bound to a model expression"

TextBox

answered on 02 Dec 2020