Questions on UI for ASP.NET MVC Forum

6 answers

519 views

Limit ComboBox "Text Entered" to items in the drop down list except if a certain option is selected in the "Parent" ComboBox.

What I'm trying to do is I have 2 ComboBoxes that are setup in a Cascading relationship. What I am not able to get working is that when 1 option is selected in the first ComboBox the cascaded ComboBox should ONLY allow choices from the Items list it is populated with. When a 2nd option is selected in the first ComboBox(i.e. Other) the cascaded ComboBox should allow ANY text to be entered.

How can I achieve this? Below is my View and Controller in question.

VIEW:

<div class="form-group">

@Html.LabelFor(model => model.locationCode, new { @class = "control-label col-md-2" })

<div class="col-md-10">

@(Html.Kendo().ComboBox()

.Name("locationCode")

.Filter(FilterType.Contains)

.DataTextField("Text")

.DataValueField("Value")

.BindTo(Model.Locations)

.Suggest(true)

)

@Html.ValidationMessageFor(model => model.locationCode)

</div>

<div class="form-group">

@Html.LabelFor(model => model.loadType, new { @class = "control-label col-md-2" })

<div class="col-md-10">

@(Html.Kendo().ComboBox()

.Name("loadType")

.Filter(FilterType.Contains)

.DataTextField("Text")

.DataValueField("Value")

.BindTo(Model.LoadTypes)

.Suggest(true)

)

@Html.ValidationMessageFor(model => model.loadType)

</div>

<div class="form-group">

@Html.LabelFor(model => model.loadDescrip, new { @class = "control-label col-md-2" })

<div class="col-md-10">

@(Html.Kendo().ComboBox()

.Name("loadDescription")

.Filter(FilterType.Contains)

.DataTextField("DocCode")

.DataValueField("DocCode")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCascadeDocumentNumbers", "DockDoor")

.Data("filterLoadDescription");

})

.ServerFiltering(true);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("loadType")

)

<script>

function filterLoadDescription() {

return {

locCode: $("#locationCode").val(),

loadType: $("#loadType").val(),

docNumFilter: $("#loadDescription").data("kendoComboBox").input.val()

};

}

</script>

@Html.ValidationMessageFor(model => model.loadDescrip)

</div>

CONTROLLER:

public JsonResult GetCascadeDocumentNumbers(string locCode, string loadType, string docNumFilter)

{

if (loadType != "OPEN" && loadType != "GENERIC")

{

var docNums = db.GetCurrentDocumentNumbers(locCode, loadType).AsEnumerable();

if (!string.IsNullOrWhiteSpace(docNumFilter))

{

docNums = docNums.Where(x => x.Contains(docNumFilter));

}

return Json(docNums.Select(x => new { DocCode = x.ToString() }), JsonRequestBehavior.AllowGet);

}

return Json(string.Empty, JsonRequestBehavior.AllowGet);

}

ComboBox

answered on 09 Dec 2013

1 answer

265 views

Parameter Map with MVC Wrappers

I see the documentation using Kendo UI web, etc... I want to use the wrappers for this instead of coding the jscript.

Any resources?

Grid

answered on 09 Dec 2013

1 answer

139 views

[Solved] Change event is not fired when moving mouse pointer while clicking listitem in ListViewSelectionMode.Single

Hello,

I use the ListView with the selectable option set to ListViewSelectionMode.Single via MVC Wrapper.
Clicking on an item and therefore changing selection doesn't fire the change event if I move the mouse (within list item borders) while clicking.

I think this behaviour can be reproduced by setting selectable option to ListViewSelectionMode.Single at this demo.
Just click the text and move mouse pointer to hilight the text. The change event si not fired.

The event is always fired as soon as you set selection mode to ListViewSelectionMode.Multiple.

Is this a bug?
Is there a workaround (can't use multiple select)?

Thanks in advance
Dirk

ListView

answered on 06 Dec 2013

1 answer

151 views

Adding "required" to the model

Hi there,

Trying to make use of the wrappers to speed things up, but I cant find a way to add "required" to a field, since the modelbinding doesn't care about the [Required] attribute on the property.

public class TaskItem : ISchedulerEvent

{

[DatabaseGenerated(DatabaseGeneratedOption.Identity)]

public int TaskItemID { get; set; }

[Required]

public string Title { get; set; }

public string Description { get; set; }

[Required]

public DateTime Start { get; set; }

public string StartTimezone { get; set; }

[Required]

public DateTime End { get; set; }

public string EndTimezone { get; set; }

public string RecurrenceRule { get; set; }

public int? RecurrenceID { get; set; }

public string RecurrenceException { get; set; }

public bool IsAllDay { get; set; }

public int? OwnerID { get; set; }

}

In javascript this seems easy:

schema: {

model: {

id: "taskID",

fields: {

taskID: { from: "TaskID", type: "number" },

title: { from: "Title", validation: { required: true } }

}

Also, I read that servervalidation were supposed to be implemented in q3-release, but I can't get it to work.

Regards,
Pär Sandgren

Scheduler

answered on 06 Dec 2013

3 answers

117 views

Color picker doesn't work with legacy telerik themes

We are migrating our application from Telerik MVC extension to Kendo UI. But with Telerik legacy themes Color picker is not working. With Kendo themes this is working fine.

ColorPicker

answered on 06 Dec 2013

1 answer

131 views

[Solved] Row removed from grid before server call

Hi,

I have a simple grid with only the Read and Destroy actions defined for the datasource. I also have an error event handler defined. While playing around with this setup, I noticed, that the row is removed as soon as I click the destroy button, even before the controller is called. If an error occures in the controller, my error handler does, what it should, but the grid is not refreshed. Do I have to do that by myself (If so, how do i do this in the error handler?) or did I make a mistake?

My View:

@(Html.Kendo().Grid<StorageClasses>()

.Name("StorageClassesGrid")

.ToolBar(toolbar => toolbar.Template("<button id='btnAddSC' class='k-button'><span class='k-icon k-add'></span></button>"))

.Columns(columns =>

{

columns.Command(command =>

{

command.Destroy().Text(" ").HtmlAttributes(new { style = "width:14px;min-width:27px" });

}).Width("40px;");

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

columns.Bound(p => p.Remark);

})

.Pageable(pager => pager.Refresh(true))

.Sortable()

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

.Filterable()

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

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(m => m.ID))

.Read(read => read.Action("GetStorageClassesByLocation", "Locations", new { LocationID = Model.ID }))

.Destroy(destroy => destroy.Action("StorageClass_Delete", "Locations", new { LocationID = Model.ID }))

.Events(e => e.Error("onGridError"))

)

.Events(e => e.Remove("onGridRowRemove").DataBound("resizeTabs"))

)

Controller:

[HttpPost]

public ActionResult StorageClass_Delete([DataSourceRequest] DataSourceRequest request, long? LocationID, StorageClasses StorageClass)

{

Exception exception;

if (StorageClass != null && LocationID != null)

{

try

{

if (ModelState.IsValid)

{

// delete entity in database

var result = _db.StorageClass_Delete(

LocationID.HasValue ? LocationID.Value : 0,

StorageClass.ID,

ClientName,

"WEB",

UserName,

out exception);

if (exception != null)

{

AddException(exception);

}

// check database action result

if (result != null && result.ErrorID == 0)

{

// database action successful

return Json(new[] { StorageClass }.ToDataSourceResult(request, ModelState));

}

else

{

ModelState.AddModelError("StorageClass_Delete", result.ErrorMessage);

return Json(new[] { StorageClass }.ToDataSourceResult(request, ModelState));

}

catch (Exception ex)

{

AddException(ex);

ModelState.AddModelError("StorageClass_Delete", ex.Message);

return Json(new[] { StorageClass }.ToDataSourceResult(request, ModelState));

}

ModelState.AddModelError("StorageClass_Delete", "Parameter Fehler.");

return Json(new[] { StorageClass }.ToDataSourceResult(request, ModelState));

}

Error Handler:

function onGridError(e) {

var txt = "";

$.each(e.errors, function (propertyName) {

txt = txt +this.errors + " ";

});

$("#lblStatus").text(txt);

$("#lblStatus").css('color', 'red', 'font-weight ', 'bold');

}

Best regards

Dietmar

Grid

answered on 05 Dec 2013

1 answer

318 views

How to force user to input only items on Combobox

Hello ,i m using Kendo grid with pop-up edit mode.I have created custom template page for pop-up window.On this template there are some comboboxes.
I want user that can input(on combo's textarea) only from combobox's value.

E.g.:

Combobox-Values: red,yellow,green

When user fill the combobox's textarea like "RED" or "Yellow" validator message should appears and ,update button should return false such required = "required"
does on combobox.

@(Html.Kendo().ComboBox()<br>

.Name("IDTYPE")<br>

//.AutoBind(false)<br>

//.Events(e => e<br>

// .Change("combobox_select"))<br>

.DataTextField("DESCRIPTION").HtmlAttributes(new { style = "width:220px", required = "required" })<br>

.DataValueField("REFERENCEID")<br>

// .Value(Model.IDTYPEGUID.ToString()) // Initial value<br>

// .BindTo(Model.IDTYPE) <br>

//.AutoBind(true) <br>

.Placeholder("SELECT")<br>

<br>

.DataSource(source =><br>

{<br>

source.Read(read =><br>

{<br>

<br>

read.Action("GetDefinitionDetails", "Definition", new { definitionCode = "IDTYPE", addEmptyRow = false })<br>

// .Data("onAdditionalData")<br>

;<br>

<br>

})<br>

.ServerFiltering(true);<br>

<br>

}))

ComboBox

answered on 05 Dec 2013

1 answer

114 views

Kendo Grid dependent columns

HI All
Im having a kendo MVC grid. Where say there are three columns A,B,C. Now i need to update the value of the B column on edit of A column.On Edit of A . B should be autmatically calculated and updated on UI. Ex B=A-45 .. Please help me how do i achieve this.

Regards
VIPUL

Grid

answered on 05 Dec 2013

1 answer

496 views

Databound event doesn't fire

Hi,

I'm using a TreeView like in this example. It is located in the left pane of a two pane splitter, if that matters. All events fire as they should, except the DataBound one. I already tried to modify the example code, that comes with kendo. It does not work here, too.

My TreeView code:

@(Html.Kendo().TreeView()

.Name("MyTreeView")

.BindTo(Model, mappings => mappings.For<TreeViewNode>(binding => binding

.ItemDataBound((item, node) =>

{

item.Text = node.Name;

item.Id = node.Value.ToString();

item.Expanded = ViewData[ViewBag.ExpandedCookie] != null &&

((string[])ViewData[ViewBag.ExpandedCookie]).Contains(item.Id);

//item.HtmlAttributes["data-selectable"] = node.Selectable;

if (node.AddOnly)

item.HtmlAttributes["data-addOnly"] = true;

else

item.HtmlAttributes["data-addOnly"] = false;

if (!node.Selectable)

{

item.HtmlAttributes["style"] = "color: #888";

}

else

item.HtmlAttributes["style"] = "color: black";

})

.Children(parent => parent.Childs))).HtmlAttributes(new { @class = "k-group" }).Events(e => e

.Select("onSelect")

.Expand("updateTreeViewState")

.Collapse("updateTreeViewState")

.DragStart("onNodeDragStart")

.DataBound("onTreeDataBound")

.Drop("onNodeDrop")).DragAndDrop(true)

)

And the javascript code:

function onTreeDataBound(e) {

alert("databound");

}

// select event as an example (this works)

function onSelect(e) {

var dataItem = this.dataItem(e.node);

$("#ID").val(dataItem.id);

if ($(e.item).attr("data-selectable") == "0" || dataItem.id == "0")

e.preventDefault();

else

// request server for partial view for details and refresh right pane of splitter

getSplitter("#outerSplitter").ajaxRequest("#right-pane", "/" + getArea() + "/" + getController() + "/Details", { id: dataItem.id });

// update statusbar to default

$("#lblStatus").text("Ready");

$("#lblStatus").css('color', 'black', 'font-weight ', 'normal')

//}

}

Am I missing something here?

Best Regards

Dietmar

TreeView

answered on 05 Dec 2013

1 answer

702 views

How to use Different Templates For Edit and Create Operations

I am using Kendo Grid for Edit,Update,Delete user Informations.

I want to use different templates for edit and create opetation.
Currently:

.TemplateName("EditPerson"))

With this i created a view file(name is EditPerson.cshtml) under "EditorTemplates" folder.
i want to use another template for Create Operations.How can i do it?

Grid

answered on 04 Dec 2013