Questions on UI for ASP.NET MVC Forum

1 answer

116 views

I have a grid that is filterable. It has two columns:

.Columns(columns => {

columns.Bound(customer => customer.CustomerName).Title("Customer Name");

columns.Bound(customer => customer.CustomerStatus.CustomerStatusName).Title("Status");

})

CustomerName filters without problems. However, when you attempt to filter on CustomerStatus.CustomerStatusName, the DataSourceRequest object posted back has the FilterDescriptor.Member = "undefined".

We do have kendo.aspnetmvc.min.js referenced. And we're using the lastest release 2013.2.716.

Grid

answered on 08 Aug 2013

3 answers

257 views

[Solved] Selected data not being sent back to controller

My previous post went unanswered and had to figure it out myself (so much for premium support), but eventually got it figured out. Now I am stuck again - with the same stupid widget.
$999 for half working widgets, basic documentation and no support is starting to seriously get to me.

Anyway, I am populating my Multiselect widget with a list of Weighbridges. This part works fine. I can also select weighbridges with no problem.
When I post back to the controller, the model reflects the number of items I selected in the Multiselect, but the data is either null (for strings) or 0 (for ints).

Controller populating the ViewBag

ViewBag.Weighbridges = dbDataService.ToLookUp<Weighbridge>();

My Lookup class

public class LookupEntity : ILookupEntity

{

public int Id { get; set; }

public string Description { get; set; }

}

Widget implementation

@(Html.Kendo().MultiSelectFor(model => model.Weighbridges)

.Name("Weighbridges")

.DataTextField("Description")

.DataValueField("Id")

.Value(Model.Weighbridges)

.Placeholder("Select weighbridges...")

.HtmlAttributes(new {style= "width:310px"})

.AutoBind(true)

.BindTo((IEnumerable<LookupEntity>)ViewBag.Weighbridges)

)

My UserModel class with the portion of interest.

[DisplayName("Assigned Weighbridges")]

public IEnumerable<LookupEntity> Weighbridges { get; set; }

Upon posting back to the controller, the rest of the model details are 100%. My Weighbridges property shows the number of items that were selected in the Multiselect, but none of the values are set.

I am using the Multiselect in a popup editor for grid editing.

Can someone help? And today please. I have wasted 2 full working days trying to get the Multiselect to work. KendoUI is supposed to boost productivity surely?

MultiSelect

answered on 08 Aug 2013

1 answer

274 views

Refreshing parent record when Child record updated and vice versa

I would like to update the parent grid when the child grid record is updated, is that possible? If so could anyone provide any advice on it?

Firstly I'm not sure which event would be best to use on the child grid. I want the child grid's CRUD action to fire, then load the contents of the parent again, preferably by Ajax.

Below is my grid as is:

@{

ViewBag.Title = "Bills: Parent/Child";

}

<h2>Bills Index</h2>

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

.Name("BillParentsGrid")

.Columns(columns =>

{

columns.Bound(h => h.Category);

columns.Bound(h => h.Description);

columns.Bound(h => h.Amount);

columns.Command(command =>

{

command.Edit();

}).Width(95);

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(h => h.BillId);

model.Field(h => h.BillId).Editable(false);

})

.Events(events => events.Error("error_handler"))

.Read(read => read.Action("BillParents_Read", "Bill"))

.Update(update => update.Action("BillParent_Update", "Bill"))

)

.Events(events => events.DataBound("dataBound"))

.ClientDetailTemplateId("BillChildren")

)

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

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

.Name("BillChildren_#=BillId#")

.Columns(columns =>

{

columns.Bound(d => d.BillId).Width(50);

columns.Bound(d => d.Description).Width(150);

columns.Bound(d => d.Amount).Width(80);

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(55);

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(d => d.BillId);

model.Field(d => d.BillId).Editable(false);

})

.Events(events => events.Error("error_handler"))

.Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))

.Update(update => update.Action("BillChild_Update", "Bill"))

.Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))

.Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill")))

.ToolBar(tools => tools.Create())

.ToClientTemplate()

)

</script>

Many thanks.

Grid

answered on 08 Aug 2013

6 answers

373 views

ForeignKey does not show in grid.

I have set a value to my ForeignKey colum in the controller before being sent to the grid. I can see that it is populated in the response body, but not ForeignKey dropdown is visible, when I click then I get the dropdown.

My ForeignKey editor template and below my grid

Thanks

@ModelType Object

@code

Dim DropDown As Kendo.Mvc.UI.DropDownList = Html.Kendo().DropDownListFor(Function(m) m).BindTo(CType(ViewData(ViewData.TemplateInfo.GetFullHtmlFieldName(String.Empty) & "_Data"), SelectList))

DropDown.Render()

End Code

@ModelType IEnumerable(Of EF.Team)

@code

Dim CsvGrid As Kendo.Mvc.UI.Grid(Of BO.Models.Contractor.CsvUploadData) = Html.Kendo.Grid(Of BO.Models.Contractor.CsvUploadData).Name("CsvGrid") _

.Columns(Sub(columns)

columns.Bound(Function(c) c.FirstName)

columns.Bound(Function(c) c.LastName)

columns.Bound(Function(c) c.Email)

columns.Bound(Function(c) c.FirstbookingDate)

columns.Bound(Function(c) c.FullService)

columns.Bound(Function(c) c.PoolSize)

columns.Bound(Function(c) c.Spa)

columns.Bound(Function(c) c.Street)

columns.Bound(Function(c) c.Zipcode)

columns.ForeignKey(Function(f) f.TeamId, Model, "TeamId", "Name").Width(200).Title("Team")

columns.Command(Function(Command) Command.Destroy())

End Sub) _

.ToolBar(Sub(toolbar)

toolbar.Create()

toolbar.Save()

End Sub) _

.Editable(Function(editable) editable.Mode(GridEditMode.InCell)) _

.Pageable() _

.Navigatable() _

.Sortable() _

.Scrollable() _

.DataSource(Function(dataSource) dataSource _

.Ajax() _

.Batch(True) _

.ServerOperation(False) _

.Events(Function(events) events.Error("CsvUpload.GridEditError")) _

.Model(Sub(Model)

Model.Id(Function(d) d.CsvUploadDataId)

Model.Field(Function(f) f.TeamId).DefaultValue(1)

End Sub) _

.Create("Editing_Create", "Grid") _

.Read("csvuploadgriddata", "services", New With {.area = String.Empty}) _

.Update("Editing_Update", "Grid") _

.Destroy("Editing_Destroy", "Grid"))

CsvGrid.Render()

End Code

Grid

answered on 07 Aug 2013

4 answers

103 views

[Solved] Cannot get the sample to work - at all.

I am trying to get the multiselect to work as per the sample in demo's and it does not work at all.
Not even the button will popup the alert. If I remove the MultiSelect widget from the source, then the button
shows the alert.

I have been fiddling with this all morning and my time is precious so getting frustrated now.

Here is the HTML source from the browser. Am I missing something?

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Test Page</title>

<script src="/Scripts/modernizr-2.5.3.js"></script>

<link href="/Content/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo.default.min.css" rel="stylesheet"/>

<script src="/Scripts/jquery-1.8.3.js"></script>

<script src="/Scripts/kendo.web.min.js"></script>

<script src="/Scripts/kendo.all.min.js"></script>

<script src="/Scripts/kendo.aspnetmvc.min.js"></script>

<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script src="/Scripts/cultures/kendo.culture.en-ZA.min.js"></script>

</head>

<body>

<div class="demo-section">

<h2>Invite Attendees</h2>

<label for="required">Required</label>

<select id="required" multiple="multiple" name="required"></select><script>

jQuery(function(){jQuery("#required").kendoMultiSelect({"dataSource":["Steven White","Nancy King","Anne King","Nancy Davolio","Robert Davolio","Michael Leverling","Andrew Callahan","Michael Suyama","Anne King","Laura Peacock","Robert Fuller","Janet White","Nancy Leverling","Robert Buchanan","Andrew Fuller","Anne Davolio","Andrew Suyama","Nige Buchanan","Laura Fuller"],"placeholder":"Select attendees...","value":["Anne King","Andrew Fuller"]});});

</script>

<label for="optional">Optional</label>

<select id="optional" multiple="multiple" name="optional"></select><script>

jQuery(function(){jQuery("#optional").kendoMultiSelect({"dataSource":["Steven White","Nancy King","Anne King","Nancy Davolio","Robert Davolio","Michael Leverling","Andrew Callahan","Michael Suyama","Anne King","Laura Peacock","Robert Fuller","Janet White","Nancy Leverling","Robert Buchanan","Andrew Fuller","Anne Davolio","Andrew Suyama","Nige Buchanan","Laura Fuller"],"placeholder":"Select attendees..."});});

</script>

<button class="k-button" id="get">Send Invitation</button>

</div>

<script>

$(document).ready(function () {

var required = $("#required").data("kendoMultiSelect");

var optional = $("#optional").data("kendoMultiSelect");

$("#get").click(function () {

alert("Attendees:\n\nRequired: " + required.value() + "\nOptional: " + optional.value());

});

</script>

<style scoped>

.demo-section {

width: 350px;

height: 200px;

padding: 30px;

}

.demo-section h2 {

font-weight: normal;

}

.demo-section label {

display: inline-block;

margin: 15px 0 5px 0;

}

.demo-section select {

width: 350px;

}

#get {

float: right;

margin: 25px auto 0;

}

</style>

</body>

</html>

MultiSelect

answered on 06 Aug 2013

4 answers

1.0K+ views

[Solved] Editor Showing html tags reciebed from the controller.

Hello guys,

I have a View with a Kendo Editor.

@(Html.Kendo().Editor()

.Name("editor")

.HtmlAttributes(new { style = "width: 740px;height:440px" })

.Value(@<text>@ViewBag.FirstText</text>

))

Well, in the controller I have the following:

public ActionResult ShowEditor(int id)

{

ViewBag.FirstText = "<a>bbb</a>";

return View();

}

When I run the project and go to the View, I see in the editor the full text "<a>bbb</a>".

Any work around to solve it?

Regards

Editor

answered on 05 Aug 2013

1 answer

163 views

Using "Insert Image" mode of editor in the "Data Entry Form"

There is an "Insert Image" button in the Editor that open a dialog. The Dialog form has a "Upload" button that insert a new picture.

I want to use this type of uploader in my form. How can i use this control(I mean "Upload" in dialog) in another place?

Thanks.

Editor

answered on 05 Aug 2013

1 answer

228 views

View source for editor in Kendo Web MVC?

As in documentation, there is no tool like viewHtml in editor in jquery, i would like to ask if there is similar one in MVC? If yes, how can I get this?

Editor

answered on 05 Aug 2013

0 answers

271 views

Custom Icons

I've seen some of the documentation regarding how to create custom icons for Kendo UI Mobile, but can someone please give me an example of how it is applied to the MobileTapStrip in ASP.NET MVC?

Here's what I've tried so far:

<style>
.km-root .km-pane .km-view .km-home1
{
background-image: url("/Images/Icons/home1.png");
}
</style>

@(Html.Kendo().MobileLayout()
.Name("mobile-main")
.Footer(
@<text>
@(Html.Kendo().MobileTabStrip()
.Items(items => {
items.Add().Icon("home1").Text("Home").Url("#view-home");
items.Add().Icon("cart").Text("Purchases").Url("#view-purchases");
items.Add().Icon("bookmarks").Text("Reports").Url("#view-reports");
})

)
</text>
)
)

OK, I've figured it out:

@(Html.Kendo().MobileLayout()
.Name("mobile-main")
.Footer(
@<text>
@(Html.Kendo().MobileTabStrip()
.Items(items => {
items.Add().Icon("home1").Text("Home").Url("#view-home");
items.Add().Icon("purchases").Text("Purchases").Url("#view-purchases");
items.Add().Icon("reports").Text("Reports").Url("#view-reports");
})

)
</text>
)
)

CSS:

.km-root .km-pane .km-view .km-icon {
background-size: 100% 100%;
-webkit-background-clip: border-box;
background-color: currentcolor;
}

.km-home1 {
-webkit-mask-box-image: url("/Images/Icons/home1.png");
background-color: red;
}

.km-purchases {
-webkit-mask-box-image: url("/Images/Icons/money.png");
background-color: red;
}

.km-reports {
-webkit-mask-box-image: url("/Images/Icons/documents.png");
background-color: red;
}

TabStrip (Mobile)

asked on 04 Aug 2013

9 answers

401 views

Conditional read only / formatting of grid cells

We've got a grid that needs to have the background-color / read only set based on their value. I've seen some posts that discuss using the data bound event to set the color of the cell, and others that talk about client templates or editor templates, but I'm not finding one place to set both the cells background color and whether the value can be edited. Since I'm constructing a VM object that encapsulates the column configuration (dynamically built columns / order / etc.) I'd like to keep as much of it together as I can.

Grid

answered on 02 Aug 2013