Questions on UI for ASP.NET MVC Forum

3 answers

696 views

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

90 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

204 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

372 views

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

104 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

79 views

Function accepts numbers but not strings from grid cell

Grid

answered on 13 Apr 2015

3 answers

376 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

399 views

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

item.Action("MyActions", "MyController", new { id = 0 }); // Doesn't seem to do anything

})

)

TabStrip

answered on 13 Apr 2015

1 answer

159 views

Stacked Bar using AJAX - how to project the model?

I have restricted horizontal space on a page, but have multiple values to display in a graph. I thought a single-column, stacked column chart would fit the bill. I'm interested in showing proportion of values.

I have a simple model:

UserName
Items

Using the AJAX mechanism shown here http://demos.telerik.com/aspnet-mvc/bar-charts/remote-data-binding I can get the chart to display using the following code:

@(Html.Kendo().Chart<RequestLoadingSummaryAggregate>()

.Name("resourceLoadingChart")

.Title("Resources")

.Legend(legend=>legend.Visible(false))

.DataSource(dataSource=>dataSource.Read(read=>read.Action("RequestLoadingSummary","Home")))

.Series(series =>

{

series.Column(model => model.Items).Name("Resource");

})

.CategoryAxis(axis=>axis

.Categories(model=>model.UserName)

.Labels(labels=>labels.Rotation(-90))

.MajorGridLines(lines=>lines.Visible(false))

)

.ValueAxis(axis=>axis.Numeric()

.Labels(labels=>labels.Format("{0:N0}"))

.MajorUnit(100)

.Line(line=>line.Visible(false))

)

.Tooltip(tooltip=>tooltip

.Visible(true)

.Format("{0:N0}")

)

.ChartArea(chartArea=>

chartArea.Height(400))

)

But I cannot get it to work as a Stacked Column using the additional defaults:

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Column().Stack(ChartStackType.Normal)

)

How can I project the model from the AJAX result into a form that the chart can understand such that the values occupy a single column with multiple values?

Thanks

Nathan

Chart

answered on 10 Apr 2015

1 answer

155 views

Cancel row selection

Can you cancel a row selection from within the onSelect event?

Grid

answered on 10 Apr 2015