Questions on UI for ASP.NET MVC Forum

7 answers

1.5K+ views

Hi guys,

I'm trying to embed a dropdown menu (bootstrap) inside a grid on the first column of each bound row (basically creating a menu for each item). It works but the menu is hidden behind the next row down so there's something to do with the markup of the grid overlapping the markup of the menu.

Here's the markup:

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

.Name("grid")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("RefreshTable", "HomeController"))

)

.Columns(columns =>

{

columns.Bound(x => x.Number)

.Width(120)

.Template(@<text></text>)

.ClientTemplate(

"<div class='btn-group'>" +

"<button type='button' class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span id='selectedTagType'>#= Number#</span> <span class='caret'></span></button>" +

"<ul class='dropdown-menu' role='menu'>" +

"<li><a onclick='editRecord();'></a>Edit</li>" +

"<li><a onclick='activateRecord();'></a>Activate</li>" +

"<li><a onclick='transferRecord();'></a>Transfer</li>" +

"</ul>" +

"</div>"

);

columns.Bound(x => x.TypeDescription);

columns.Bound(x => x.PhoneNumber);

})

)

Grid

answered on 26 Mar 2014

2 answers

144 views

DateTime Validation in Grid Editing Mode

Hello Telerik Team,

While in grid editing mode, is there a way to validate that a DateTime field is not in the past? or be within a specific range?

Thanks!

Grid

answered on 26 Mar 2014

7 answers

560 views

EditorTemplate for Schelduler

Hello,

I have some trouble to get the data bind of a list in a EditorTemplate for the schelduler.

Here is how i create the schelduler :

@(Html.Kendo().Scheduler<iMail.Web.Models.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))

.Height(600)

.Views(views =>

{

views.DayView();

views.WeekView();

views.MonthView();

views.AgendaView(agenda => agenda.Selected(true));

})

.Selectable(true)

.Timezone("Etc/UTC")

.Events(e => e.Edit("onEdit"))

.Editable(editable => {

editable.TemplateName("_EditorTemplatePartial");

editable.Resize(true);

})

.DataSource(d => d

.Model(m => {

m.Id(f => f.TaskID);

m.Field(f => f.Title).DefaultValue("No title");

m.RecurrenceId(f => f.RecurrenceID);

m.Field(e => e.Attendees).DefaultValue(new List<iMail.Web.Models.CalendarAttendeeModel>());

})

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

.Read("TasksRead", "Dashboard")

.Create("TasksCreate", "Dashboard")

.Destroy("TasksDestroy", "Dashboard")

.Update("TasksUpdate", "Dashboard")

)

Code of _EditorTemplatePartial.cs

<div data-container-for="Attendees" class="k-edit-field">

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

.Name("myMultiSelectiHATEYOU")

.HtmlAttributes(new { data_bind = "value:Attendees" })

.DataTextField("AttendeeName")

.DataValueField("ID")

.BindTo(ViewBag.Contacts)

.Value(Model.Attendees)

</div>

Here is the data load in the MultiSelect

ICollection<CalendarAttendeeModel> contacts = new List<CalendarAttendeeModel>();

CalendarAttendeeModel att7 = new CalendarAttendeeModel();

att7.AttendeeName = "Georgette";

att7.ID = 4;

att7.Email = "myemail@attendee7.com";
........

contacts.Add(att7);

contacts.Add(att8);

contacts.Add(att9);

contacts.Add(att10);

ViewBag.Contacts = contacts;

The data in the multislect seems to be correctly loaded but when i want to save the data inside of TasksCreate() i have some trouble with my list.
Sample : If i select 4 item, my list count 4 row but haven't any data inside.
Moreover i can't try to use a datasource because of this template ".Editable(editable => { editable.TemplateName("_EditorTemplatePartial");"

public ActionResult TasksCreate([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, TaskViewModel task)

{

}

My CalendarAttendeeModel is a List inside of the model TaskViewModel

public class TaskViewModel : Kendo.Mvc.UI.ISchedulerEvent

{

....

public string Title { get; set; }

public string Description { get; set; }

public string StartTimezone { get; set; }

public string EndTimezone { get; set; }

....

public List<CalendarAttendeeModel> Attendees { get; set; }

}

I can't get the selected data in the list inside of the editor template.
In the TasksCreate i can get the data of Description,... (it's the user who write the data) but for the List, i have a big problem.

I use Kendo UI 2013.3.1511 and Razor engine.

I'm stuck with that :/
Any idea to suceed ?

Scheduler

answered on 26 Mar 2014

7 answers

644 views

Refresh KendoUI TreeView after AJAX update

Hello -

I have the following TreeView in my application:

@(Html.Kendo().TreeView()
.Name("treeview")
.ExpandAll(true)
.Events(events => events.Select("onTreeNodeSelected"))
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.NavigationTree))

I have a button on the page that when clicked a KendoWindow gets displayed and allows the user to enter in text for a new node. On the submit button within the KendoWindow it posts the AJAX form and the ViewBag.NavigationTree gets updated.

How can I have the new node be added to the tree via AJAX? Essentially I want to update the TreeView's BindTo when the ViewBag.NavigationTree gets updated via an AJAX call.

Thanks in advance,
Dan

TreeView

answered on 26 Mar 2014

5 answers

796 views

Treeview Node Id passing to Controller action

Hi,

I'm trying to redirect to a controller action and pass the ID of the selected tree node into the controller action.

Ideally, I would like to use some code like this:

<div class="kendo-tree">

@(Html.Kendo().TreeView()

.Name("treeview")

.DataTextField("Name")

.TemplateId("treeview-template")

.DataSource(dataSource => dataSource

.Read(read => read.Action("DashboardTree", "Home"))

)

.Events(e => e.Select("onSelect"))

)

</div>

And here's what the onSelect would do:

function onSelect(e) {

var data = $('#treeview').data('kendoTreeView').dataItem(e.node);

//alert("node clicked" + data.id);

window.location = @Url.Action("Edit", "Employee", new { id = data.id });

}

I'm not sure if window.location is the way to do this and would welcome better suggestions. I don't have a form to submit, I just want to go to another page when the user clicks a tree node. Surely I'm missing something here...

Thanks,
bh

TreeView

answered on 26 Mar 2014

1 answer

368 views

Set focus after click event

I have a Kendo button with the click event defined as:

@(Html.Kendo().Button()
.Name("btnAddNewLineItem")
.Tag("span")
.Icon("plus")
.Content(@InvSubModule.Infrastructure.Localization.ResourceManager.GetString("AddNew") +" " + "<span></span>")
.HtmlAttributes( new {type = "button"} )
.Events(ev => ev.Click("AddLineItemButtonRequest"))
)

In my JavaScript method: "AddLineItemButtonRequest", the last line sets the focus to another control on the page via jQuery:

$("#LineItemType").focus();

However, after this line, the focus is shifted back to the Kendo button above. Is there another way I should be setting the focus?

Thanks for your time,
Scott Dulock

Button

answered on 26 Mar 2014

2 answers

90 views

Annotating editable, causing grid to fail

What I am trying to do.. is create this grid of CartLines, display them, and allow editing of ONLY the quantity field.
This grid below displays, and is editable (presumably, I haven't implemented the update action but the UI appears to work).

The moment I added .Editable(false) to any of the model.Fields, I get an error that the object is not referring an object ..

>> Object reference not set to an instance of an object.

and that happens before it even tries to call the read action. And I am quite surprised about the behavior on the first column, the picture column. That field is editable also which surprised me. I mean.. I guess i didn't tell it not to.. But it is clearly associating it with the modeId and I would think the modelid is sacred and shouldn't be changed.

Anyway... what's the best way to accomplish this?
Quantity should be editable
Nothing else should be editable.
(though I may add a delete the entire row option)

@(Html.Kendo().Grid<EveShop.Domain.Entities.CartLine>()

.Name("cartGrid")

.DataSource(

dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetCartList", "Cart").Data("additionalCartListData"))

.Model(model =>

model.Id(p => p.Product.ProductID);

model.Field(p => p.Product.Name);

model.Field(p => p.Quantity);

model.Field(p => p.Product.Price)/*.Editable(false)*/;

})

)

.Columns(columns =>

{

        // this first column is really just a picture column, may be a better way to do this

        // than binding it to Product.ProductID?  to an empty field?  didn't see how to do that.

      c

olumns.Bound(line => line.Product.ProductID).ClientTemplate("<img src='" + Url.Content("~/Images/Types/") + "#:Product.ProductID#_64.png' alt='#: Product.ProductID #' />").Title("Picture");

columns.Bound(line => line.Product.Name);

columns.Bound(line => line.Quantity);

columns.Bound(line => line.Product.Price);

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

)

Grid

answered on 26 Mar 2014

1 answer

91 views

Always Display Group Message

I am using the grouping function of the Grid. I would like to display the "Drag a column header and drop it here to group by that column" message always, not just when there is no grouping, because I have one column that is grouped by default when the page loads, and the user still needs to know how it works. Is there a way to have this message displayed always?

Grid

answered on 25 Mar 2014

4 answers

361 views

Sample source code for http://demos.telerik.com/kendo-ui/bootstrap/

I am new to the Kendo UI, and I am trying to use Kendo UI with my ASP.NET MVC 5 project, and would like to incorporate different Bootstrap template into my page layout.

I have seen the demo at the following URL:
http://demos.telerik.com/kendo-ui/bootstrap/

And, I am trying to find the source code for this demo to see if I can use it as a template in my ASP.NET MVC 5 project. Does anyone know where can I find this sample source code?

Thank you very much.

Best Regards,

John Jiang

General Discussions

answered on 25 Mar 2014

5 answers

370 views

Set selected item in ddl using ajax binding with value from model

I have a popup window to be used for editing detailed information of a row in a grid. The popup window's content is from a partial view. In this popup window I have a dropdownlist for states. This custom popup edit window is opened when a custom command button is clicked. I call an action on the controller to pull the data to populate the custom popup, I put that data in a model and I have the custom popup using the model. Everything works fine, except the dropdownlist's selected value is not set. It just shows the first item in the list. I've tried setting the .Value option to the model value - .Value(Model.state) - doesn't work. I've tried using the DataBound event to set the value there to the model.State, but I get errors. If I try to declare the event function in the popup partial view, it doesn't get recognized and I get the not declared error. If I try to declare it in the calling view, it doesn't recognize the model (since it's in the partial view). What am I doing wrong? Any help is very much appreciated!

Here's the code:

Calling view (Index.cshtml) - grid and popup window:

@model IEnumerable<GMCEventRegistrationTools.Models.EventRegistrationModel>

@(Html.Kendo().Grid<GMCEventRegistrationTools.Models.EventRegistrationModel>()

.Name("EventRegistrationGrid")

.AutoBind(false)

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.RegistrationKey))

.Read(read => read.Action("Registrants_Read", "Home").Data("registrantsForEvent"))

.Create(update => update.Action("EditingPopup_Create", "Home"))

.Update(update => update.Action("EditingPopup_Update", "Home"))

.Destroy(update => update.Action("EditingPopup_Destroy", "Home"))

)

.Columns(cols =>

{

cols.Bound(p => p.RegistrationKey).Hidden(true);

cols.Bound(p => p.FirstName);

cols.Bound(p => p.LastName);

cols.Bound(p => p.CompanyName);

cols.Bound(p => p.ProvideAccomodations);

cols.Bound(p => p.RegistrationConfirmed);

cols.Command(command => { command.Edit(); command.Destroy(); });

cols.Command(command => command.Custom("Edit Details").Click("editDetails"));

}

)

.ClientDetailTemplateId("registration-client-template")

)

@(Html.Kendo().Window().Name("EditRegDetails")

.Title("Edit Registration")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(900)

)

function editDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var window = $("#EditRegDetails").data("kendoWindow");

window.refresh({

url: '/Home/GetRegistrationDetails',

data: { id: dataItem.RegistrationKey }

});

window.center();

window.open();

}

Controller/Action:

public ActionResult GetRegistrationDetails(int id)

{

EventRegistrationModel eRegistrationModel = new EventRegistrationModel();

using (var eventTools = new WebDBEntities())

{

WebEventRegistration reg = eventTools.WebEventRegistrations.Where(p => p.RegistrationKey == id).FirstOrDefault();

AdditionalInfo ai = new AdditionalInfo();

var serializer = new JavaScriptSerializer();

if (reg != null && (reg.FirstName != null && reg.FirstName != ""))

{

eRegistrationModel.AddressLine1 = reg.AddressLine1;

eRegistrationModel.AddressLine2 = reg.AddressLine2;

eRegistrationModel.City = reg.City;

eRegistrationModel.CompanyName = reg.CompanyName;

eRegistrationModel.EmailAddress = reg.EmailAddress;

eRegistrationModel.EventDetails = serializer.Deserialize<AdditionalInfo>(reg.EventDetails);

eRegistrationModel.EventName = reg.EventName;

eRegistrationModel.FirstName = reg.FirstName;

eRegistrationModel.JobTitle = reg.JobTitle;

eRegistrationModel.LastName = reg.LastName;

eRegistrationModel.MiddileInitial = reg.MiddileInitial;

eRegistrationModel.PhoneNumber = reg.PhoneNumber;

eRegistrationModel.PostalCode = reg.PostalCode;

eRegistrationModel.ProvideAccomodations = reg.ProvideAccomodations == 0 ? true : false;

eRegistrationModel.ReferrerIpAddress = reg.ReferrerIpAddress;

eRegistrationModel.RegistrationConfirmed = reg.RegistrationConfirmed == 0 ? true : false;

eRegistrationModel.RegistrationDate = reg.RegistrationDate;

eRegistrationModel.State = reg.State;

eRegistrationModel.RegistrationKey = reg.RegistrationKey;

}

else

{

return View("Error");

}

return PartialView("EditRegistrationDetails", eRegistrationModel);

}

Partial view with dropdown:

@model GMCEventRegistrationTools.Models.EventRegistrationModel

@using (Html.BeginForm("SaveRegistrationEdit", "Home", FormMethod.Post, new { id = "editregis-form" }))

{

most fields removed for brevity

<div class="form-group">

@Html.LabelFor(model => model.State)

@(Html.Kendo().DropDownListFor(model => model.State).Name("State")

.HtmlAttributes(new { @class = "form-control textbox-size stateslist"})

.DataTextField("State").DataValueField("StateCode")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetStates", "Home");

});

})

.Value(Model.State)

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

)

<p class="error">@Html.ValidationMessageFor(model => model.State)</p>

</div>

Thanks!
Donna

DropDownList

answered on 25 Mar 2014