Questions on UI for ASP.NET MVC Forum

3 answers

125 views

I have 12 calendar on 2 <TR> in my view (6 calendars/TR)
I need the calendar smaller so they all have the style : .calendar {width: 150px; height: 200px;}

@(Html.Kendo().Calendar().Name("YearCalendarMay")
.Min(new DateTime(Model.Year.Year,5,1)).Max(new DateTime(Model.Year.Year,5,31))
.Footer(" ").MonthTemplateId("cellTemplate").HtmlAttributes(new { @class = "calendar" })
)

I have the problems shown in the picture,probably because I set the Min and Max properties :

http://img825.imageshack.us/img825/5164/iud2.png

And I try as you suggested to disable the click on title navigation but I'm missing something

$(document).ready(function () {
$("YearCalendarMay.k-nav-fast").off("click").css("cursor", "default");
$("#YearCalendarMay.k-nav-fast").on("click", false);
});

I will appreciate some if you can help me please ..

Calendar

answered on 09 Aug 2013

2 answers

223 views

[Solved] check box to select unselect all rows in a grid

Hello again,
Can i add checkbox as a column header ,and also as a column in the grid?
and when i check that header column,it checks every row,something like delete all in the yahoo mail,or hotmail?

Thanks in advance for any suggestion,
Regards Daniel

Grid

answered on 09 Aug 2013

0 answers

109 views

ViewModels for various Widget types

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

390 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

124 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

266 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

291 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

396 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

116 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>