Questions on UI for ASP.NET MVC Forum

2 answers

143 views

In a splitter with two panes vertically oriented, is it possible to flip the pane order on the fly? I want to be able to change the pane order so one is changed from being left to right and vice versa.

Splitter

answered on 10 Mar 2016

1 answer

116 views

ComboBox not aligned on open

Hi,

When I open a ConboBox the dropdown is not aligning correctly (see attached). Below is the html that renders the control.

<div class="k-group">

<div class="col-md-12">@Html.LabelFor(m => m.MobilePhoneNumber)</div>

<div class="col-md-12">

@Html.Kendo().ComboBoxFor(m => m.MobilePhoneCountry).DataTextField("MobilePhoneCountry").DataValueField("MobilePhoneCountryID").BindTo(Model.MobilePhoneCountryList)

</div>

<div class="col-md-12">@Html.TextBoxFor(m => m.MobilePhoneNumber, new { @class = "k-textbox" })</div>

<div class="col-md-12">@Html.ValidationMessageFor(m => m.MobilePhoneNumber)</div>

</div>

Thanks

ComboBox

answered on 10 Mar 2016

3 answers

483 views

Grid inside BeginCollectionItem Helper Extension

Does anyone have any experience using a Telerik Kendo Grid inside of the BeginCollectionItem HTML helper?

I have a view that lists a number of Users. Each time you select a user, that user's details (defined inside an Editor Template which contains the Kendo Grid) are populated into a Kendo Panel Bar. The HTML.BeginCollectionItem extension is being used because you can have "n" number of Users selected at a given time, and I want the user to be able to see multiple Editor Templates at once.

This has worked well for various different controls in the editor template (Kendo Text Boxes, Kendo Combo Boxes, etc.), but the grid is giving us problems. The grid can display the data just fine, but when you click on a cell to edit its values, a generic Javascript error is thrown: "Uncaught SyntaxError: Unexpected identifier". If you dig a little deeper, this is the code block that apparently has the problem (which I believe is kendo code):

(function(d<br>/**/) {<br>return (((d.Users || {})[c57d5c44-c352-4935-8cd7-b3ef45a697f2] || {}).Username)<br>})

I believe the issue revolves around how the BeginCollectionItem extension names the controls inside the Editor Template, but I haven't been able to resolve it. Has anyone seen anything similar?

Grid

answered on 10 Mar 2016

1 answer

89 views

Datepicker start date not same as model date

Hi,

I have this in my view:

@(Html.Kendo().DatePickerFor(model => model.Date).Min(DateTime.Now).Value(@Model.Date).Events(e => e.Change("updateDatePicker")))

Initially, when you look at the datepicker, it shows you the correct date. But when I click it, it opens with today's date selected instead of the date of my model. For example, the date in my model is july 9th 2016 but when I open the datepicker it opens with march 10th 2016 selected.

I have searched a lot but haven't found a solution. Any help is greatly appreciated.

Date/Time Pickers

answered on 10 Mar 2016

2 answers

815 views

MVC Grid with Client Side functionality on Model Property

Hello,

I have a model defined as

public class Parent
{
public List<Child> Children { get; set; }
}

public class Child
{
property int Id { get; set;}
property string Name {get; set;}
property int Age {get; set;}
}

My goal is to have a grid on my main page whereas the model is the parent and the grid is used to populate the Children list. I do not want the grid to invoke any server method. It should just populate the Children list. When the parent is saved, I am intending that its Children list will contain the items added within the Parent's POST operation.

I can create the grid, but I can't seem to get it to add items. When I add the toolBar.Create() option, I get the following error;

"The Insert data binding setting is required by the insert command. Please specify the Insert action or url in the DataBinding configuration."

But I don't want any insert action to occur on the server. I just want the grid to populate the Children list on the client.

How can I do this?

Grid

answered on 10 Mar 2016

1 answer

106 views

Spreadsheet Support

Is the Kendo / ASP.NET MVC Spreadsheet control a beta version. From which version was this supported. ?

Spreadsheet

answered on 10 Mar 2016

4 answers

189 views

Custom Popup editor with Javascript or AngularJs

Hi,

I read many threads about configuring custom popup editor in KendoUI Grid like this one.

http://www.telerik.com/forums/custom-popup-editor-with-additional-fields

I also found how to use a separate html file and use it as a template. However, I didn't find how to use javascript to access model inside this template. The answer il always to implement edit event to access model and change behavior. In my case, fields shown changes depending on many criterias like: Field 1 ID is 1 or 2 and Field 2 ID is 4 for example.

If it is possible to use AngularJs, it is better :-)

Thank you

Grid

answered on 10 Mar 2016

4 answers

1.3K+ views

Editor template drop down not displaying on Edit Popup

I can't seem to get a drop down Editor Template working on my grid's popup editor. I am using a ViewModel rather than using my Entity Model directly, maybe that is part of the problem? I cannot use the Model directly as the database schema does not match the expected pattern, and one is supposed to always use a ViewModel I am told.

Here is what I've got:

View Models

The UIHint is added as required and I have the quarter property linked to the Quarter object per the pattern.

public class AquisitionNotesViewModel

    {

    public int noteid { get; set; }

    public int sourceid { get; set; }

    public int? cyear { get; set; }

    [UIHint("QuarterDropDown")]

    public Quarter quarter { get; set; }

    [Column(TypeName = "text")]

    public string note { get; set; }

    [Column(TypeName = "date")]

    public DateTime? datetime { get; set; }

    }

public class Quarter

{

    public int? quarter { get; set; }

}

Controller

The controller is returning a List of Quarter objects with valid values as well as the ViewModel to populate the grid.

public ActionResult AquisitionNotes_Read([DataSourceRequest] DataSourceRequest request, int sourceid)

{

IList<Quarter> quartersList = new List<Quarter>();

quartersList.Add(new Quarter { quarter = 1 });

quartersList.Add(new Quarter { quarter = 2 });

quartersList.Add(new Quarter { quarter = 3 });

quartersList.Add(new Quarter { quarter = 4 });

ViewData["quarters"] = quartersList;

IList<AquisitionNotesViewModel> notesVM = new List<AquisitionNotesViewModel>();

var Query = from notes in db.acquisitionnotes

where notes.sourceid == sourceid

select new

{

noteid = notes.noteid,

sourceid = notes.sourceid,

quarter = notes.quarter,

cyear = notes.cyear,

note = notes.note,

datetime = notes.datetime

};

foreach ( var note in Query) {

notesVM.Add(new AquisitionNotesViewModel

{

noteid = note.noteid,

sourceid = note.sourceid,

quarter = new Quarter { quarter = note.quarter },

cyear = note.cyear,

note = note.note,

datetime = note.datetime,

});

}

return Json(notesVM.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

Editor Template (named QuarterDropDown)

Since I do not have separate values and IDs I set DataValueField and DataTextField to my field (property) name. And I bind to the List of quarters.

@(Html.Kendo().DropDownList()

    .Name("quarter") // Name of the widget should be the same as the name of the property

    .DataValueField("quarter") // The value of the dropdown is taken from the EmployeeID property

    .DataTextField("quarter") // The text of the items is taken from the EmployeeName property

    .BindTo((System.Collections.IEnumerable)ViewData["quarters"]) // A list of all employees which is populated in the controller

)

And finally my Grid

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

    .Name(GridID)

    .Columns(columns =>

    {

        columns.Bound(p => p.datetime ).Format("{0:dd/MM/yyyy}");

        columns.Bound(p => p.quarter.quarter ).Width(120);

        columns.Bound(p => p.cyear).Width(50);

        columns.Bound(p => p.note).Width(120);

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);

    })

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

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

    .Pageable()

    .Sortable()

    .Scrollable()

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

    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(10)

        .Sort(sort => sort.Add("datetime").Ascending())

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

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

        .Create(update => update.Action("AquisitionNotes_Create", "AquisitionNotes"))

        .Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes").Data("GetCurrentSourceID"))

        //.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes", new { sourceid = 383}))

        .Update(update => update.Action("AquisitionNotes_Upodate", "AquisitionNotes"))

        .Destroy(update => update.Action("AquisitionNotes_Destroy", "AquisitionNotes"))

    )

)

What am I missing or doing wrong?

Thanks, Brad

Grid

answered on 09 Mar 2016

1 answer

279 views

Filter Grid with Dropdown and Dates

Hi,

I currently filter my grid using a kendo dropdown box, that's all fine and it works well. I have a requirement here to add another dropdown that fitlers the grid data by the dates list but plus additional dates. For example the dropdown must take a date fromt he grid and add 21 days to it and show only the results for those items. How can this be accomplished?

Here is my code for my current filter

function periodChange() {

var ddl = document.getElementById("dates");

var value = this.value(),

grid = $("#Grid").data("kendoGrid");

if (value) {

grid.dataSource.filter({

field: "fixture_stop",

operator: "eq",

value: ddl.value

});

} else {

grid.dataSource.filter({});

}

Here is my grid code

@(Html.Kendo().Grid<MyProject.ViewModels.VesselsViewModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.vessel_idx).Title("")

.ClientTemplate("<div class='status_flags'></div>")

.Width(40);

columns.Bound(c => c.owner_company)

.Filterable(filterable => filterable.UI("companyFilter"))

.Title("Owner").Width(200);

columns.Bound(c => c.fixture_stop)

.ClientTemplate("#=fixture_stop ? kendo.toString(kendo.parseDate(fixture_stop), 'dd/MM/yyyy') : '' #")

.Title("Off Hire");

})

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

.Pageable()

.Events(e => e.DataBound("prompt"))

.Sortable(sortable => sortable.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Groupable().ToolBar(toolbar =>

{

toolbar

.Template(@<text>

<label class="date-label" for="periods">Period:</label>

@(Html.Kendo().DropDownList()

.Name("periods")

.OptionLabel("All")

.DataTextField("Text")

.DataValueField("Value")

.AutoBind(false)

.Events(e => e.Change("periodChange"))

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "21 Days"

},

new SelectListItem() {

Text = "3 Months"

}

})

)</text>);

})//Toolbar

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => { events.RequestEnd("onRequestEnd"); })

.Sort(sort =>

{

sort.Add(

company => company.owner_company).Ascending();

})

.PageSize(40)

.Model(model =>

{

model.Id(p => p.vessel_idx);

})

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

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

))

What I need to do here is grab the date value from the grid and add 21 to it but I'm not sure how I would do this using my code. Any help is appreciated. Thanks.

Grid

answered on 09 Mar 2016

4 answers

543 views

Value of DropdownList is null when it has single row in popup grid

I have a grid like this:

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

.Name("popupGrid")

.Columns(columns =>

{

columns.Bound(p => p.LicenseId).Width(20).Hidden().HeaderHtmlAttributes(new { @title = "License" });

columns.ForeignKey(p => p.CustomerId, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName")

.Title("Customer").Width(200);

columns.Bound(p => p.VendorId).Width(20).HeaderHtmlAttributes(new { @title = "Vendor" });

columns.Bound(p => p.ProductId).Width(20).HeaderHtmlAttributes(new { @title = "Product" });

columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { @title = "Edit" })).Width(80);

})

.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))

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

.DataSource(dataSource => dataSource

.Ajax()

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

.Create(create => create.Action("Create", "Home").Type(HttpVerbs.Post))

.Read(read => read.Action("Read", "Home").Type(HttpVerbs.Post))

.Update(update => update.Action("Update", "Home").Type(HttpVerbs.Post))

)

and PopupEditView.cshtml :

@(Html.Kendo().DropDownListFor(m => m.CustomerId).Name("CustomerId")

.ValuePrimitive(true)

.DataTextField("CustomerName")

.DataValueField("CustomerId")

//.OptionLabel("Select Customer...")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("GetCustomers", "Home"))

.ServerFiltering(true);

})

)

@Html.ValidationMessageFor(m => m.CustomerId)

HomeController :

[HttpPost]

public JsonResult Create([DataSourceRequest] DataSourceRequest request, License license)

{

if (license != null && ModelState.IsValid) // licence.CustomerId is null Model.State is not valid

{

LicenseRepository.Repository.Insert(license);

}

return Json(new[] { license }.ToDataSourceResult(request, ModelState));

}

public JsonResult GetCustomers()

{

return Json(CustomerRepository.Repository.Customers, JsonRequestBehavior.AllowGet);

}

If .OptionLabel("Select Customer...") is commented and submit create then licence then CustomerId is null. If user change DropDownList(CustomerId) then it works fine.

Is this a bug?

Grid

answered on 09 Mar 2016