Questions on UI for ASP.NET MVC Forum

0 answers

106 views

I just created my own ViewModel for setting up a Line Chart that I configure with the appropriate settings, AJAX Controller, Action, Event javascript functions, Series Names, etc. This is so I can easily configure the charts and send them to a common line chart partial page. This seems to work well for me given that I've got a dashboard page with many charts on it and this seems to be a cleaner (and more flexible) way to do it compared to hardcoding each chart and its setup individually (iterate over the collection of ViewModels and create chart partial page for each one). I was thinking that it would be nice if Kendo had something like this for us to we wouldn't have to create it ourselves.

My next task is the grid and clearly, there is a lot of complexity there. I'm hoping I can reuse something that already exists.

Thanks in advance.

General Discussions

asked on 08 Aug 2013

3 answers

368 views

Kendo Grid is not Ajax binding

My Kendo grid is not Ajax binding. My code mimics what is in your examples exactly, so I can't see the problem.
The grid:

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

.Name("grdItems2")

.DataSource(datasource => datasource

.Ajax()

.Read(read => read.Action("GeneralLedgerEntries", "GL").Data("gridBindingData"))

.PageSize(10)

)

.Columns(col =>

{

col.Bound(c => c.AccountingEventName).Title("Accounting Event").HtmlAttributes(new {style = "white-space:nowrap;width:50%;"});

})

.Sortable()

.Pageable()

)

I can see in Fiddler that the controller code is returning the correct JSON to the page:

public ActionResult GetEntries(string accountType, int? categoryID, int? accountID, int? year, int? month,

[DataSourceRequest]DataSourceRequest request)

{

var list = new List<LedgerEntryViewModel>();

list = _gridHelpers.GetAccountEntriesWithRunningTotal(accountType, accountID.Value);

DataSourceResult result = list.ToDataSourceResult(request);

var json = Json(list, JsonRequestBehavior.AllowGet);

return json;

}

Grid

answered on 08 Aug 2013

1 answer

120 views

Grid Filter Fails on Complex Member

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

262 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

282 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

383 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

106 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

168 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

234 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