Questions on UI for ASP.NET MVC Forum

5 answers

314 views

Javascript call with parameter from inside a template

I have the following code that I am trying to use to delete an item in the database when someone clicks the delete button:

<script id="treeview-template" type="text/kendo-ui-template">

#: item.name #

<a href="javascript:void(0)" class='btn-sm btn-danger' onclick="DeleteNode(@item.id)">x</a>

</script>

@Html.Kendo().TreeView().Name("Categories").ExpandAll(true).Template("treeview-template").DataSource(dataSource => dataSource

.Model(model => model

.Id("id")

.HasChildren("hasChildren")

)

.Read(read => read.Action("GetCategories", "Categories"))).DataTextField("name").DragAndDrop(true).Checkboxes(true).Events(events => events.Change("onChange").Select("onSelect").Check("onCheck").Collapse("onCollapse").Expand("onExpand").DragStart("onDragStart").Drag("onDrag").Drop("onDrop").DragEnd("onDragEnd"))

The issue I'm having is that the field I'm trying to pass to the function, @item.id, is causing the exception: "The name 'item' does not exist in the current context." How can I format the code so this works?

Thanks.

Laurie

TreeView

answered on 15 Apr 2015

1 answer

608 views

Kendo DropDownTreeView inside GridView column is not working

We are using dropdown inside a kendo grid. Inside the
dropdown we need to display a tree view. When user clicks dropdown, tree view should
be displayed. We have only two levels in the tree view. On selecting any item
or sub item from the treeview, text of the item should be shown as dropdown text and tree view
should get close. Inside a tree view we need page down/up.

If we put dropdown in the separate partial view outside the grid, then it is working.
But if we try to use dropdown inside the grid using editor template then tree view
is not working.

Following is the code snippet:

Index.cshtml

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

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

.EnableCustomBinding(false)

.Columns(columns =>

{

columns.Bound(o => o.Id).Title("Id");

columns.Bound(s => s.Order).EditorTemplateName("_DropDownEditor").ClientTemplate("#=Order#").Title("Order");

columns.Command(command => { command.Destroy(); }).Width("80px");

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(new[] { 10, 15, 20 }))

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

model.Field(p => p.Order).DefaultValue(

ViewData["defaultOrder"] as string);

})

.Read(read => read.Action("OutputRead", "Home"))

)

.Events(e =>

{

})

)

_DropDownEditor.cshtml

@using Kendo.Mvc.UI

@model string

@(Html.Kendo().DropDownList()

.Name("Order")

.BindTo(new[] {

new {

Text = "",

Value = ""

}})

.DataTextField("Text")

.DataValueField("Value")

.Template(Html.Partial("EditorTemplates/_TreeViewEditor").ToHtmlString())

.Events(e =>{ e.Open("OnOpen"); })

)

TreeViewEditor.cshtml

<ul id="treeview">

<li data-expanded="true">

Item 1

<ul>

<li>Item 1.1</li>

<li>Item 1.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

</ul>

Common.js

function OnOpen(e) {

setDropdownTreeView();

}

function setDropdownTreeView() {

var treeview = $("#treeview").kendoTreeView({

select: function (e) {

// When a node is selected, display the text for the node in the dropdown and hide the treeview.

$treeviewRootElem.slideToggle('fast', function () {

$treeviewRootElem.removeClass("k-custom-visible");

});

}

}).data("kendoTreeView");

var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

$(document).click(function (e) {

// Ignore clicks on the treetriew.

if ($(e.target).closest("div.k-treeview").length == 0) {

// If visible, then close the treeview.

if ($treeviewRootElem.hasClass("k-custom-visible")) {

$treeviewRootElem.slideToggle('fast', function () {

$treeviewRootElem.removeClass("k-custom-visible");

});

}

});

}

SampleModel.cs

public class SampleModel

{

public int Id { get; set; }

public string Order { get; set; }

public SampleModel()

{

}

public SampleModel(int id,string o)

{

Id = id;

Order = o;

}

Grid

answered on 15 Apr 2015

3 answers

700 views

Dropdownlist with cascade and filter

Hello,

We have a grid with two fields, each field has assigned a dropdownlist. The second dropdownlist has a behavior different, this dropdowonlist has enabled option
cascade and filtre with contains value. The question is, is it possible?

I show you the scenario:

Code Grid

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

.Name("fare_details#=FareID#")

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Afegir Referencia");

}

})

.Columns(columns =>

{

columns.ForeignKey(f => f.Tipus, (System.Collections.IEnumerable)ViewBag.CatalogTypes, "Key", "Value").EditorTemplateName("CustomGridForeignKeyFareType").Width(120);

//columns.ForeignKey(f => f.CatalogReference, (System.Collections.IEnumerable)ViewBag.Cataleg, "Reference", "Descripcio").EditorTemplateName("CatalegReferenceByType");

columns.Bound(f => f.CatalogReference).EditorTemplateName("CatalegReferenceByType").EditorViewData(new { gridid = "fare_details#=FareID#" });

Editor Template

@model object

@(Html.Kendo().DropDownList()

.Name("CatalogReference" + ViewData["gridid"])

.HtmlAttributes(new { data_bind = "value:CatalogReference" })

.AutoBind(false)

.OptionLabel("Select reference...")

.DataTextField("Descripcio")

.DataValueField("Reference")

.Filter(FilterType.Contains)

.MinLength(3)

.ValuePrimitive(true)

//.HtmlAttributes(new { data_skip = "true", data_bind = "defferedValue: object" })

//.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

.DataSource(source =>

{

source.Read(read => read.Action("PopulateReferences", "Catalog").Data("filterTypes"))

.ServerFiltering(true);

})

.CascadeFrom("Tipus")

.HtmlAttributes(new { id = Guid.NewGuid().ToString() })

)

Function filterTypes

function filterTypes() {

return {

text: $("#Type").data("kendoDropDownList").value() + "|" + $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val()

};

Clarification:

1) temporalFare the value maybe be for example fare_details26

2) $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val() ===> Presents an error: Undefined.Action on controller

public JsonResult PopulateReferences(string text)

{

var param = text.Split('|');

var type = (int)text[0];

var search = text[1];

var catalog = GetCatalog((catalogType)type).Where(c => (c.Descripcio + " " + c.Reference).Contains(search)).Select(c => new { Reference = c.Reference, Descripcio = c.Descripcio + " - " + c.Reference }).AsQueryable();

return Json(catalog, JsonRequestBehavior.AllowGet);

}





I hope that we can

clarify on this topic



 



 



Thanks in advance.



 



 



Xavier.

Grid

answered on 14 Apr 2015

2 answers

96 views

Breaking change in dropdownlist 2015.1.408

Hello,

I upgraded today to the MVC wrappers 2015.1.408 (I came from just the previous version, so really not far off).

But I encountered a breaking change I think.

I am using this dropdownlist:

@(Html.Kendo().DropDownList()
.Name("ddlExercise")
.DataTextField("Description")
.DataValueField("Id")
.OptionLabel("(Kies een oefening)")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetExercises", "Exercise")
.Data("filterExercises");
})
.ServerFiltering(true);
})
.Events(events =>
{
events.Select("ddlExercise_select");
events.DataBound("ddlExercise_databound");
})
.HtmlAttributes(new { style = "width:300px" })
.Enable(false)
.AutoBind(false)
.CascadeFrom("ddlCourseLessonGroup")
)

and in the ddlExercise_select event, I had this:

function ddlExercise_select(e) {
var dataItem = this.dataItem(e.item.index());

exerciseType = dataItem.Type;
exerciseId = dataItem.Id;

getExerciseDetailsAndInitialize();

}

However, this now raised an issue that the first item in the dropdown list (apart from the optionlabel) would never have the "dataItem" variable defined. Other elements worked without a problem, but the first one did not. If I removed the optionlabel, it worked too.

In the end, what was able to solve this was to assign the dataitem as var dataItem = this.dataItem(e.item);

So basically dropping the ".index()".

Could you please confirm this is indeed a breaking change in 2015.1.408 and that dropping the ".index()" is the correct way to resolve this ?

Thank you

DropDownList

answered on 14 Apr 2015

2 answers

211 views

How can i set theme for each grid ?

Hi

i have 3 grid in my page - can i set theme for each one of them?

like:

grid1: theme default

grid2: theme Moonlight

grid3: theme bootstrap

Grid

answered on 14 Apr 2015

1 answer

376 views

[Solved] EditorFor with the Name method returns null

I dont know if this is a bug or something something I could not find the documentation.

If you are using the EditorFor() and you supply a .Name() method in your form. On submit it will return a null value in MVC. I don't know why, it just does.

My hopes is that a moderator/dev can expand on this a little more and make add some more documentation/examples to the demos on the EditorFor component.

Hopefully this helps someone. :)

So once I removed the ".Name("tkCommentEditor") line below from my code, it worked like I expected it to.

@(Html.Kendo().EditorFor(t => t.Body)

.Name("tkCommentEditor")

.Resizable()

.Tools(tools => tools

.Clear()

.Formatting()

.CleanFormatting()

.FontName()

.FontSize()

.FontColor()

.Bold().Italic().Underline().Strikethrough()

.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()

.Outdent().Indent()

.SubScript().SuperScript()

.TableEditing()

.ViewHtml()

)

Editor

answered on 14 Apr 2015

1 answer

135 views

DatePicker Loses Its Style After Adding Events

Hello,

I have datepicker in my view as below, But after adding event as http://demos.telerik.com/aspnet-mvc/datepicker/events, it lost its style and looks like Jquery UI datepicker.

When i looked at the source code, without using events, the input type is string and output is like below:

<span class="k-picker-wrap k-state-default"><input data-val="true" data-val-date="The field Hakediş T. must be a date." data-val-required="The Hakediş T. field is required." id="CmsProgressPaymentDate" name="CmsProgressPaymentDate" style="width: 100%;" type="text" value="13.04.2015" data-role="datepicker" class="k-input k-valid" role="combobox" aria-expanded="false" aria-owns="CmsProgressPaymentDate_dateview" aria-disabled="false" aria-readonly="false"><span unselectable="on" class="k-select" role="button" aria-controls="CmsProgressPaymentDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span>

But when i added the onchange or another events, the input type becomes to date and the output as below,

<input data-val="true" data-val-date="The field Hakediş T. must be a date." data-val-required="The Hakediş T. field is required." id="CmsProgressPaymentDate" name="CmsProgressPaymentDate" style="width:100%" type="date" value="13.04.2015">

@(Html.Kendo().DatePickerFor(p=>p.CmsProgressPaymentDate)

.Name("CmsProgressPaymentDate")

.Value(System.DateTime.Now)

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

}

DatePicker

answered on 13 Apr 2015

4 answers

81 views

[Solved] Function accepts numbers but not strings from grid cell

Grid

answered on 13 Apr 2015

3 answers

428 views

Treeview with Template - item.text undefined

Hi there,

I am attempting to get the Treeview template to work, similar to the demo for the MVC treeview:

<script id="treeview-template" type="text/kendo-ui-template">

#: item.text #

# if (!item.items) { #

<a class='delete-link' href='\#'></a>

# } #

</script>

<div class="row">

<div class="form-group col-md-12">

@(Html.Kendo().TreeView()

.Name("treeview")

.TemplateId("treeview-template")

.DataTextField("Name")

.DragAndDrop(true)

.DataSource(dataSource => dataSource

.Read(read => read

.Action("Parties", "TreeView")

)

.Events(events => events

.Drop("onDrop")

)

</div>

However, the item.text expression always evaluates as undefined - not sure what I am doing wrong? If I remove this, the item.items expression on the next line is correctly evaluated.

Thanks,

Paul

TreeView

answered on 13 Apr 2015

3 answers

404 views

[Solved] TabStrip BindTo content using Action

So I originally defined a TabStrip and manually loaded the content using LoadContentFrom with an Action which returned a PartialView of content defined in another .cshtml. It worked fine.

Now I want to do something similar, but have the items of the TabStrip bound to a collection. The TabStrip is binding the text of the item just fine, but the Action to get the content is never being called. How do I define it so that it does, similar to LoadContentFrom?

If my old implementation is:

@(Html.Kendo().TabStrip()

.Name("tabStrip")

.Items(items => {

items.Add().Text("Test").LoadContentFrom("MyAction","MyController", new { id = 0 });

})

)

How do I translate that to:

@(Html.Kendo().TabStrip()

.Name("tabStrip")

.BindTo(Model, (item, category) =>

{

item.Text = category.TestText; // works