Questions on UI for ASP.NET MVC Forum

3 answers

122 views

Getting new data from the server programatically

Telerik UI for ASP.NET MVC

I have wrongly assumed that the ListBox would work the same or similar to the grid.

I have created and populated a ListBox

cshtml..

@(Html.Kendo().ListBox()

.Name(componentName: "lstRewindRolls")

.Selectable(ListBoxSelectable.Single)

.HtmlAttributes(new { tabindex = -1, @class = "k-listbox", style = "background-color:black; color:white; height:450px" })

.DataValueField("DoffID")

.DataTextField("RollID")

.DataSource(dataSource => dataSource

.Read(read => read.Action(actionName: "GetRolls", controllerName: "Rewind").Data("{ DispositionCode: 'R' }"))

)

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

)

controller...

public JsonResult GetRolls(string DispositionCode)

{

try

{

var result = db.tblRolls.Where(r => r.strDispositionCode == DispositionCode && r.dtmInventoryRemoved == null)

.Join(db.tblProductSKUs, p => p.lngProductSKUID, q => q.lngProductSKUID, (r, q) => new { r, q })

.Join(db.tblProducts, s => s.q.lngProductID, t => t.lngProductID, (s, t) => new { s, t })

.Select(o => new

{

DoffID = o.s.r.lngDoffID.ToString(),

LaneID = o.s.r.strLaneID,

RollID = o.s.r.lngDoffID.ToString() + o.s.r.strLaneID

}).OrderBy(t => new { t.DoffID, t.LaneID }).ToList();

;

return Json(result, JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

...

}

When the page loads the ListBox is populated as expected.

Once I have processed an item in the list, if appropriate (the disposition changed) I want it removed from the list.

I thought I could simply do a dataSource.read()

var lstBox = $("#lstRewindRolls").data("kendoListBox");

lstBox.dataSource.read();

I also tried

var lstBox = $("#lstRewindRolls").data("kendoListBox");

lstBox.dataSource.read({ DispositionCode: 'R' });

I cannot seem to get it to work.

Please help.

ListBox

answered on 26 Oct 2018

7 answers

425 views

Task name characters length validation example

I have an application that uses a model for the gantt. The model has a restriction of StringLength to 40 characters for the name of the task. However if the user edits a task in the grid and writes more than 40 characters no client validation is done and also the user does not see the failure of this.

Is there a example on how to implement client validations on gantt widget?

Gantt

answered on 26 Oct 2018

8 answers

2.8K+ views

Kendo Validator shows "title" attribute value as Required message

Hi everyone,

I've got a ComboBox where I wanted to get tooltip on hover. I did it like the following:

@(Html.Kendo().ComboBoxFor(m => m)
.Filter("contains")
.Placeholder(ViewData.ModelMetadata.DisplayName)
.DataTextField("Definition")
.DataValueField("Code")
.HtmlAttributes(new { style = "width: 100%", id = fieldname, title= "Some example"})
.BindTo((System.Collections.IEnumerable)ViewData[bindto]))

When I hover the mouse on the ComboBox, it shows "Some example" but the real problem is where Kendo Validator message is also showing "Some example", before this I was getting like: This field is required. How can I fix this so it doesn't mix up the Title value with the required field message?

Thanks,

Alex

General Discussions

answered on 26 Oct 2018

10 answers

758 views

Creating new row in nested Grid: How do I get parent key?

I have spent the night searching, and can't seem to find an answer for what must be a fairly common question.

I have a grid of 'Clients'. The client grids detail template is a grid of Licenses. Everything works fine, except when I add a row to the license grid, I can't get access to the Client's Id column.

ViewModel

public class LicenseClient

{

public int Id { get; set; }

public String Name { get; set; }

public String Email { get; set; }

public String City { get; set; }

public int NumLicenses { get; set; }

}

public class LicenseInfo

{

public int ClientId { get; set; }

public Guid LicenseId { get; set; }

public String Product { get; set; }

public int Count { get; set; }

public String Notes { get; set; }

}

My View:

@{

ViewBag.Title = "Index";

}

<h2>Client Licenses</h2>

@(

Html.Kendo().Grid<CoreLM.Models.ViewModels.LicenseClient>()

.Name("clientGrid")

.Columns( columns => {

columns.Bound(c => c.Name);

columns.Bound(c => c.City);

columns.Bound(c => c.Email);

columns.Bound(c => c.NumLicenses).Title("Total Licenses");

})

.DataSource(ds => ds.Ajax()

.Read(r => r.Action("GetLicenseClients", "License"))

)

.Sortable()

.Scrollable()

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

.ClientDetailTemplateId("ClientLicenseDetailTemplate")

)

<script id="ClientLicenseDetailTemplate" type="text/kendo-tmpl" >

@(

Html.Kendo().Grid<CoreLM.Models.ViewModels.LicenseInfo>()

.Name("clientLicensesGrid_#=Id#")

.Columns(columns =>

{

columns.Bound(c => c.Product);

columns.Bound(c => c.Count).Title("Licenses");

columns.Bound(c => c.Notes);

columns.Command(c => c.Destroy());

columns.Command(c => c.Edit());

})

.DataSource(ds => ds.Ajax()

.Read(r => r.Action("GetLicensesForClient", "License", new { clientId = "#=Id#" }))

.Create(c => c.Action("CreateLicenseForClient", "License", new { clientId = "#=Id#}))

.Update(u => u.Action("ChangeLicensesForClient", "License"))

.Destroy(d => d.Action("DeleteLicensesForClient", "License"))

.Model(m => {

m.Id(l => l.LicenseId);

})

)

.ToolBar(tb => tb.Create())

.Scrollable()

.Sortable()

.Editable()

.ToClientTemplate()

)

</script>

My Controller method for creating a new license:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult CreateLicenseForClient([DataSourceRequest]DataSourceRequest request, int clientId, LicenseInfo li)

{

//clientId is always 0

}

I have even tried hard coding an Id, and it still doesn't work:

.Create(c => c.Action("CreateLicenseForClient", "License", new { clientId = 99}))

and in my controller method, 'clientId' is still 0.

How can I pass the client (parent) id to the CreateLicenseForClient method? Without that id, I can't establish the Client has-many Licenses relationship.

Thanks,
~S

Grid

answered on 24 Oct 2018

1 answer

213 views

Is There A Captcha Component For MVC 5?

Is there a captcha component for MVC 5? I searched the list of components on the telerik site but did not see any reference to one. If there is one, then can someone please provide a link to a video (i.e. maybe YouTube or Telerik site) showing how to use it in an MVC app? Thanks in advance.

General Discussions

answered on 24 Oct 2018

3 answers

1.4K+ views

DatePicker Calendar change background color for Mondays.

Hi

Is there any way to change the background color of all Mondays of the calendar of a MVC datepicker?

Date/Time Pickers

answered on 23 Oct 2018

1 answer

480 views

Create different edit and create page in telerik mvc

im trying out Telerik and the application I am working on requires me to have a different create and edit screen. In Mvc you of course had your create and edit page and you could edit those how you like. In Telerik you don't get those, but I was made aware you could create your own edit profile
I then proceeded to do that with the following code
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("editClient"))
Good news is that you get a different page for the edit, and the bad news is that, this is also now the create page. I'm grateful for assistance in getting this done.

Grid

answered on 22 Oct 2018

1 answer

548 views

hidden / hidden for attribute

Greetings,

I created my database and in my table exist a column with is auto incremented. However, I can't get to set the ID as hidden as I would normally do in MVC , namely the following.

@Html.HiddenFor(model => model.id)

Is there a way to accommplish this in telerik?

General Discussions

answered on 19 Oct 2018

5 answers

1.6K+ views

MultiSelect not updating view model

I am using the kendo.ui.MultiSelectwidget in a form with an Ajax.BeginForm wrapper.

The view model:

public class ContextViewModel

{

public int Context_PK { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public List<int> OwnerPermissions { get; set; }

public List<int> UserPermissions { get; set; }

}

Razor View Htmlhelper call:

@(Html.Kendo().MultiSelectFor(m => m.OwnerPermissions)

.DataTextField("Text")

.DataValueField("Value")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAppUsers", "Context");

});

})

AJAX binding action method:

[AllowAnonymous]

public JsonResult GetAppUsers()

{

int applicationid = GetThisApplicationID();

if (applicationid < 1) throw new Exception("Unable to determine application id");

var adul = GetAllApplicationUsers(applicationid);

var list = adul.Where(a => a.IsValidBadge)

.Select(u => new

{

Text = (!String.IsNullOrEmpty(u.AltDisplayName) ? u.AltDisplayName : u.DisplayName)

+ " (" + u.UsernameShort + ")",

Value = u.AirportPersonID

}).ToList();

list.Insert(0, new { Text = "Owner Not Set", Value = 0 });

return Json(list, JsonRequestBehavior.AllowGet);

}

Target Framework: 4.6.1
ASP.NET MVC: 5.2.6
Microsoft.AspNet.Razor: 3.2.6
Microsoft Visual Studio Enterprise 2017 15.8.7

debugging in chrome (Version 69.0.3497.100) but behavior is identical in Edge (Microsoft Edge 42.17134.1.0)

JQuery 1.12.4 (Attempts made with both Kendo included jquery.min.js and full nuget package for jquery)

Issue that is occurring is the deselect operation in the multiselect widget is not removing the entry, either programmatically or through a user event (selecting the 'X') from the model it is bound to. View is generated with view model OwnerPermissions property with one entry.

When entry is removed and submitted to the forms POST action the view model OwnerPermissions property has the original value.
When entry is removed and an entry added and submitted to the forms POST action the view model OwnerPermissions property contains original initial value along with new value.
When an entry is added to the mutliselect and then the original entry is deleted, same as #3 results, submitted to the forms POST action the view model OwnerPermissions property contains original initial value along with new value.

If an attempt is made to programmatically remove the entry in javascript using the Deselect Event, by calling <kendo.ui.MultiSelect>.value() method with an empty array [] a javascript exception is throw (see below) when the <kendo.ui.MultiSelect>.trigger("change") is called.

function onDeselectOwnerPermissions(e) {

var owmerMS = $('#frm-context #OwnerPermissions').data("kendoMultiSelect");

if(!owmerMS) {return;}

var dataItem = e.dataItem;

if(dataItem.Value && dataItem.Value > 0) {

var selectapid = dataItem.Value;

var selected = owmerMS.value();

selected = jQuery.grep(selected, function(value) {

return value != selectapid;

});

owmerMS.value(selected);

owmerMS.trigger("change");

}

Exception thrown when <kendo.ui.MultiSelect>.value() is passed an empty array to clear selected.

kendo.all.js:41785 Uncaught TypeError: l.select(...).done is not a function

at init._removeTag (kendo.all.js:41785)

at init._tagListClick (kendo.all.js:41795)

at HTMLSpanElement.r (jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1)

at HTMLUListElement.dispatch (jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1)

at HTMLUListElement.a.handle (jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1)

_removeTag @ kendo.all.js:41785

_tagListClick @ kendo.all.js:41795

r @ jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1

dispatch @ jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1

a.handle @ jquery?v=JL596WEzEYSLK79KRL4It4N63VXpRlW4A824KHlhVLc1:1

This is the Htmlhelper generated markup:

<div class="k-widget k-multiselect k-multiselect-clearable" unselectable="on" title="" style="">

<div class="k-multiselect-wrap k-floatwrap" unselectable="on">

<ul role="listbox" unselectable="on" class="k-reset" id="OwnerPermissions_taglist">

<li class="k-button" unselectable="on">

<span unselectable="on">Stacy (stacyp)</span>

<span unselectable="on" aria-label="delete" class="k-select">

<span class="k-icon k-i-close"></span></span>

</li>

</ul>

<input class="k-input" style="width: 25px" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-describedby="OwnerPermissions_taglist" aria-owns="OwnerPermissions_taglist OwnerPermissions_listbox" aria-disabled="false" aria-busy="false">

<span unselectable="on" class="k-icon k-clear-value k-i-close" title="clear" role="button" tabindex="-1"></span>

<span class="k-icon k-i-loading k-hidden"></span>

</div>

<select id="OwnerPermissions" multiple="multiple" name="OwnerPermissions" data-role="multiselect" aria-disabled="false" style="display: none;">

<option value="0">Owner Not Set</option>

<option value="15336">Brian (brianc)</option>

<option value="62278" selected="">Stacy (stacyp)</option>

</select>

<span style=

"font-family: "Open Sans", sans-serif; font-size: 12px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 24.8571px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"

>

</span>

</div>

<script>

kendo.syncReady(function(){jQuery("#OwnerPermissions").kendoMultiSelect({"select":onSelectOwnerPermissions,"dataSource":{"transport":{"read":{"url":"/Context/GetAppUsers","data":function() { return kendo.ui.MultiSelect.requestData(jQuery("#OwnerPermissions")); }},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","dataValueField":"Value","value":[62278]});});

</script>

Note: The logic of the onSelectOwnerPermissions function the select event is bound to commented out to isolate the issue to it was left out of this post for brevity.

MultiSelect

answered on 19 Oct 2018

1 answer

2.7K+ views

What is TextBoxFor.Format functionality

I have an application where jquery validation is used. On a page I have to display some double numbers with formatting. The template used for doubles is the same for all values @Html.Kendo().TextBoxFor(model => model).HtmlAttributes(ViewData).

I have searched and it seems there is no way to format the number, however I see that the TextBoxBuilder has a property called Format. However this does not do anything.

What is the point of the property Format?

General Discussions

answered on 17 Oct 2018