Questions on UI for ASP.NET MVC Forum

6 answers

329 views

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

76 views

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

945 views

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

122 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

181 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

242 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

351 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

8 answers

1.1K+ views

Client side event documentation

I can't find any detailed documentation on client-side events so I will just post my issues as they come up. I have several issues with the grid events.

In the Telerik grid, there was an OnComplete event. What is the Kendo grid equivalent?
In the Edit client event:
1. How do you determine the mode (add or edit)? In the telerik grid it was simply e.mode.
2. How do you determine if the cancel click event on the edit form came from the edit or insert mode? In the Telerik grid I could do this:

$(e.form).find(".t-grid-cancel").click(function () {

if (e.mode == "insert") {

//do insert cancel cleanup code

}

});

3. What is the Kendo equivalent of this:

$(e.form).find(".t-grid").data("tGrid").ajaxRequest({ InventoryItemId: key });

3. In the Save client event, what would be the equivalent of this code for Kendo?

e.values.inventoryItemId = key;

I think that is enough to start with..

Thanks in advance for any help!

Grid

answered on 02 Aug 2013

1 answer

257 views

Ability to show the editor toolbar on focus

I have an editor on a razor page:

@(Html.Kendo().EditorFor(model => model.Message.MessageText)

.Name("Message.MessageText")

.HtmlAttributes(new { style = "height:550px" })

.Tools(tools => tools

.Clear()

.Bold()

.Italic()

.Underline()

.Strikethrough()

.FontColor()

.BackColor()

.InsertOrderedList()

.InsertUnorderedList()

.Indent()

.Outdent()

.CreateLink()

.Unlink()

)

I have updated to the latest version of Kendo. In the release notes, it states as a new feature, "Ability to show the editor toolbar on focus". How can I do this?

Thanks,
Nick

Editor

answered on 02 Aug 2013

1 answer

664 views

MVC Grid Hierarchy not passing parent ID when creating Child record

I'm having a problem adding a child record in my hierarchical grid. It won't pass over the HeaderId from the parent in the grid.

Here's the controller action:

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

.Name("BillHeaders")

.Columns(columns =>

{

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

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

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

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

})

.Pageable()

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Multiple)

.Type(GridSelectionType.Row))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(6)

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

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

)

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

.ClientDetailTemplateId("BillDetails")

)

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

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

.Name("BillDetails_#=BillHeaderId#")

.Columns(columns =>

{

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

columns.Bound(d => d.BillDetailId).Width(70);

columns.Bound(d => d.Category).Width(70);

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

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

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(75);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model =>

{

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

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

})

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

.Read(read => read.Action("BillDetails_Read", "Bill", new { billHeaderId = "#=BillHeaderId#" }))

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

.Create(create => create.Action("BillDetail_Create", "Bill", new { billHeaderId = "#=BillHeaderId#" }))

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

.Pageable()

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

.ToClientTemplate()

)

</script>

And here's the view.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult BillDetail_Create(BillDetail billDetail, int billHeaderId)

{

if (billHeaderId == 0)

{

ModelState.AddModelError("billHeaderID", "add bill header first");

}

if (billDetail != null && ModelState.IsValid)

{

var target = new BillDetail

{

Category = billDetail.Category,

Description = billDetail.Description,

Amount = billDetail.Amount,

BillHeaderId = billHeaderId,

BillDetailId = SessionBillDetails.Max(d => d.BillDetailId) + 1

};

//Get next Id in sequence

billDetail.BillDetailId = target.BillDetailId;

SessionBillDetails.Add(target);

}

return Json(new[] { billDetail }.ToDataSourceResult(new DataSourceRequest(), ModelState));

}

Can anyone spot an issue, or am I trying to do something that isn't possible?
Thanks.

edited: to add attachment example.

Grid

answered on 02 Aug 2013