Questions on UI for ASP.NET MVC Forum

3 answers

260 views

Listview not binding to Model within Ajax Beginform

@model TemplatesViewModel

@{

ViewBag.Title = "Create Item Req";

}

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

<div class="pop-product-view">

<dl>

<dt>Item Number</dt>

<dd> #:ItemNbr#</dd>

<dt>Description</dt>

<dd>#:Descr#</dd>

<dt>Quantity</dt>

<dd>#:Qty#</dd>

</dl>

<div class="pop-edit-buttons">

<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>

<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>

</div>

</script>

<div class="modal-body">

@using (Ajax.BeginForm("TestAjaxForm", "WFAction", FormMethod.Post,

new AjaxOptions

{

HttpMethod = "POST",

OnBegin = "onBegin",

OnSuccess = "onSuccess",

OnFailure = "onFailure",

})

)

{

@(Html.EditorForField(m => m.Descr))

@(Html.EditorForField(m => m.VendorID))

<br />

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Item</a>

@(Html.Kendo().ListView<ItemsViewModel>()

.Name("listView")

.TagName("div")

.BindTo(Model.Items)

.ClientTemplateId("popupTemplate")

.DataSource(dataSource => dataSource

.Model(m => {

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

m.Field(f => f.Descr);

m.Field(f => f.Qty);

})

.PageSize(4)

.Create(create => create.Action("Editing_Create", "WFAction"))

.Read(read => read.Action("Editing_Read", "WFAction"))

.Update(update => update.Action("Editing_Update", "WFAction"))

.Destroy(destroy => destroy.Action("Editing_Destroy", "WFAction"))

)

.Pageable()

.Editable(e => e.Enabled(true).TemplateName("ListViewKendoEditTemplate"))

)

<button id="save" type="submit">Save</button>

@*@(Html.Kendo().Button().Name("submitFormButton").Content("Save").Events(e => e.Click("onSubmitFormClick")))*@

}

</div>

// The editor template

@model ItemsViewModel

<div class="pop-product-view">

<dl>

<dt>Item</dt>

<dd>

<input name="ItemNbr" data-source="items" data-role="dropdownlist" data-text-field="Descr" data-value-field="ItemNbr" />

</dd>

@*<dt>Description</dt>

<dd>#:Descr#</dd>*@

<dt>Quantity</dt>

<dd>

@(Html.EditorForField(m => m.Qty)) @*<input type="text" class="k-text" data-bind="value:Qty" name="#:Qty#" />*@

</dd>

</dl>

<div class="pop-edit-buttons">

<a class="k-button k-button-icontext k-update-button" href="\\#">Save Item</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#">Cancel</a>

</div>

The editor template works and it writes the data back into the display template but I want the data in the ListView to bind to the TemplatesViewModel's property Items which is an IEnumerable of ItemsViewModel. When I get the data back in the controller it isn't binding to the Model but the other fields are binding fine for the Descr and VendorID.

ListView

answered on 05 May 2017

1 answer

111 views

Drag drop: ListView item to PanelBar item

Hi, I need to facilitate two pieces of drag and drop functionality usingTelerik UI for MVC.

I have a ListView (of users), and a Panelbar (of teams, and the users in each team are the children for a given Panelbar team item).

I want to drag/drop users from the ListView to the team header (or its child users panel) & this will trigger a call to the server that will make the change to the db. The users when "dragged" remain in the ListView of all users, they are simply added to a team.

Additionally, each user under a team in the PanelBar need to be able to be dragged to a third element in the view (an icon of a recycle bin - this will remove them from a team).

How can I enable drag and drop on the two Kendo controls to make this happen?

Thanks

Matt

ListView

answered on 12 Apr 2017

1 answer

227 views

ListView DataSource calling Create Action Multiple times

So we've read the docs; done all the appropriate searching; yet cannot keep the listview from repeating calls to the create service.

According to the docs the listview datasource expects the item that was added to be returned. Here is our server side controller method:

[HttpPost]

public ActionResult CreateMultiSelectItem([DataSourceRequest] DataSourceRequest request, long questionId, SurveyQuestionMultiSelectItem item)

{

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

{

var vm = new SurveyQuestionMultiSelectViewModel(_surveyQuestionService.GetById(questionId));

vm.SurveyQuestionDetails.Items.Add(item);

vm.UpdateRootSurveyQuestion(_surveyQuestionService);

}

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

}

as you can see we are returning the exact item being created.

The Datasource setup for the listview is as such:

<div class="demo-section k-content wide">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

@(Html.Kendo().ListView<LMI.QMIMS.Business.SurveyQuestions.SurveyQuestionMultiSelectItem>()

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(source=>source

.Model(model=>

{

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

model.Field(p => p.Id).DefaultValue(Guid.NewGuid());

}

)

.Create(create=>create.Action("CreateMultiSelectItem","SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Read(read=>read.Action("ReadMultiSelectItem","SurveyQuestion",new { questionId = Model.SurveyQuestionId}))

.Update(update=>update.Action("UpdateMultiSelectItem", "SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Destroy(destroy=>destroy.Action("DeleteMultiSelectItem", "SurveyQuestion",new { questionId = Model.SurveyQuestionId } ))

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

)

.Pageable()

.Editable()

)

</div>

So am I missing something totally obvious? I do this sort of behavior in the Grid control all day long without this issue.

-Scott Singleton

ListView

answered on 07 Feb 2017

3 answers

351 views

Listview Model Binding - NullReferenceException

Hi,

I'm trying to have my ListView bind to a model item, so that when postback occurs, the entries updated to the listview, are reflected in the associated model field.When I attempt this with the below code though, I receive a NullReferenceException from the view code that I've posted below. I've included the model also, as well as the stack trace. Any help with this one is greatly appreciated! Thanks!

Model:

public class CustomerCreateModel

{

#region private fields

private ICollection<CreateSecurityQuestionModel> _SecurityQuestions = new List<CreateSecurityQuestionModel>();

#endregion

[Required(AllowEmptyStrings = false), Display(Name = "First Name")]

public string FirstName { get; set; }

[Required(AllowEmptyStrings = false), Display(Name = "Last Name")]

public string LastName { get; set; }

public ICollection<SecurityQuestionModel> SecurityQuestions

{

get { return _SecurityQuestions; }

set { _SecurityQuestions = value; }

}

View Code:

@model CustomerCreateModel

<div class="form-group">

@Html.Label("Security Questions", htmlAttributes: new { @class = "control-label col-md-2" })

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

<div style="clear: both;">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new security question</a>

@(Html.Kendo().ListView<SecurityQuestionModel>(Model.SecurityQuestions)

.Name("SecurityQuestionsListView")

.TagName("div")

.ClientTemplateId("security-qa-template")

.DataSource(dataSource => dataSource

.Model(model => model.Id("Id"))

.PageSize(10)

.Create(create => create.Action("Create", "Customers"))

.Update(update => update.Action("Update", "Customers"))

)

.Pageable()

.Editable(e => e.TemplateName("QuestionAnswerEditor"))

)

</div>

ListView

answered on 13 Jan 2017

1 answer

89 views

ListView Server-Side Validation

I currently have a ListView that I'm using to update database entries. I'm not getting any of the ModelState errors to display upon update. This is my main issue.

After reviewing the related tickets here, the solution seemed fairly simply. However, I'm having some issues, here is my ListView

@(Html.Kendo().ListView<OrderEntry.Models.OrderEntry.Product>()

.Name("ListView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(dataSource => dataSource

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

.PageSize(1)

.Read(read => read.Action("ProductReadAll", "Order", new { associatedOrderID = ViewBag.AssociatedOrderID }))

.Create(create => create.Action("ProductCreate", "OpsOrder"))

.Update(update => update.Action("ProductUpdate", "OpsOrder"))

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

)

.Pageable()

.Editable(edit => edit.TemplateName("ProductEdit"))

)

My issue with this, adding the Error Event is causing an error stating that "error" (the name of whatever js function I use) is not defined in /Order/ProductDetailsRead. ProductDetailsRead is a method in my controller that is called to show the page this ListView is on. Why is the ListView looking in my controller for a js function? Haven't run into anything similar to this anywhere else in our website.

Are there any alternatives to showing modelstate errors when updating an item? Something more similar to grids?

ListView

answered on 12 Jan 2017

2 answers

848 views

ListView Won't Refresh

Here's my MVC ListView:

@(Html.Kendo().ListView<EntryExitBoard>()

.Name("matrixEntryExitBoardLV")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("GetEntryExitBoard", "Warehouse").Data("getStartDepotNumber"));

})

.TagName("div")

.ClientTemplateId("entryExitTemplate")

.Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))

.Events(events => events.Change("onEntryExitBoardChange"))

)

It loads initially with no problem. But when the following code tries to refresh it...

var listView = $("#matrixEntryExitBoardLV").data("kendoListView");

listView.refresh();

It steps over the refresh without throwing an error, but the list view doesn't refresh.

ListView

answered on 04 Nov 2016

4 answers

103 views

First Row after Reload or Paging

Hi,

I have the following listview below - what I want to have is that at every reload ($("#gridMitglied").data("kendoListView").dataSource.read();) and after paging
the first row should be visible (listview Scrolling) - the listview is not selectable!

now after a reload or changing the page not the first row is visible which is not usable...

@(Html.Kendo().ListView<SEARCH_GPDB>()

.Name("gridMitglied")

.TagName("div")

.ClientTemplateId("template")

//.ClientAltTemplateId("templatealt")

//.Selectable(ListViewSelectionMode.Single)

.Pageable(pageable => pageable

.Refresh(true)

.ButtonCount(5)

)

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Mitglied_Read", "Suche").Data("Suche"))

.PageSize(20)

)

.Pageable()

)

ListView

answered on 21 Oct 2016

1 answer

106 views

Boostrap Style Layout

Hi,

I am in the process of converting to an Kendo MVC application and using a bootstrap style framework.

I was looking for an example in Kendo ListView that I could achieve in a RadListView with the following code. Setting pagesize to 3 and displaying 3 items horizontally.

<telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource" ItemPlaceholderID="PlaceHolder1" PageSize="3" AllowPaging="true" Width="100%">

<LayoutTemplate>

<div class="row uniform">

<asp:PlaceHolder ID="PlaceHolder1" runat="server" />

</div>

</LayoutTemplate>

<ItemTemplate>

<div class="4u 12u(narrower)">

<div class="boxwrapper style1">

<section class="box special">

<span class="image fit">

<telerik:RadBinaryImage ID="RadBinaryImage2" runat="server" AutoAdjustImageControlSize="false" DataValue='<%#Eval("ArticleImage") %>' />

</span>

<h5><%# DataBinder.Eval(Container, "DataItem.Title")%></h5>

<a class="button" href='<%#Eval("ID", "ShowArticle.aspx?id={0}") %>'>Learn More..</a>

</section>

</div>

</ItemTemplate>

</telerik:RadListView>

ListView

answered on 16 Sep 2016

1 answer

119 views

Populating Dropdown Lists When Editing

I'm trying to figure out how to populate a dropdown list when editing a ListView item. I'm binding to a ViewModel that contains an IEnumerable<SelectListItem>. On other pages without a ListView, I do something like below, however I'm not sure what action I can use to set up the model so that I have access to it when editing using the ListView. I tried looping through each item in the Read action and setting States there, which is definitely inefficient, but regardless didn't work. Any ideas?

public IActionResult Index()

{

var model = _service.FindById(1));

model.States = (_lookupService.GetStates());

return View(model);

}

<select asp-for="StateId" asp-items="Model.States" class="form-control">

<option value=""></option>

</select>

ListView

answered on 01 Sep 2016

1 answer

142 views

Virtual Or Custom Scrolling

I'm looking to customize the paging of the ListView to have an infinite scroll (loading next group when getting to the bottom). Similar to the functionality offered in the grid. Is there any way to achieve this? It kind of looks like the ASP.NET AJAX listview has the ability to customize the pager. Is there any way to go about this?

Thanks

ListView