Questions on UI for ASP.NET MVC Forum

6 answers

287 views

DropDownList crashes after Paging in a Grid

I have attached a view. It has three DropDownLists and a Grid. Two of the DropDownLists provide values which filter the third and the Grid. If I change a value in either of the two filtering lists, the third list and the grid change accordingly. This all works just fine. The grid often has more than one page, and I can change pages however I want, no problem. However, if the grid has more than one page, and I change the page, then just select either of the two filtering lists, kendo/2013.1.514/jquery.min.js throws an error, saying o.activeElement is an “Unspecified error”. This happens every time I follow this scenario. By inserting an alert at the top of the lists' Change event handler, I can see that the error occurs before it even gets there.

I don't expect it to be helpful, but I copied the Call Stack here:
trigger [jquery.min.js] Line 3
  trigger [jquery.min.js] Line 3
  Anonymous Function [jquery.min.js] Line 4
  each [jquery.min.js] Line 3
  each [jquery.min.js] Line 3
  trigger [jquery.min.js] Line 4
  Anonymous Function [jquery.min.js] Line 5
  _toggle [kendo.all.min.js] Line 14
  toggle [kendo.all.min.js] Line 15
  Anonymous Function [kendo.all.min.js] Line 15
  dispatch [jquery.min.js] Line 3
  handle [jquery.min.js] Line 3

General Discussions

answered on 28 Aug 2013

2 answers

169 views

[Solved] Issue with PanelBar having a Grid as content

Hello,

I have a treeview populated with some data.
When you click on a node, it fires an ajax request and populates a PanelBar with the content.
each panel bar item then fires another request when clicked to load more data into a grid.

The issue is that on each click on a panel bar item, only one ajax request should fire.
So click on a node in tree, you see the panel bar, click on an item and one request fires for the grid.
Click on another item in the tree, click on panel bar and then 2 requests fire.
click a third time and we'll notice 3 requests firing.

Somehow there seems to be a relation between how many calls the panel bar triggers and how many items in the tree were clicked.
I attached a test project to demonstrate the issue.

Any idea why more than 1 request is fired when clicking on a PanelBar item and what can I do to stop it ?

PanelBar

answered on 28 Aug 2013

3 answers

813 views

Grid custom-binding for Sorting, Paging, Grouping and Filters

Hello,

i'm searching for a way to implement a custom binding for Sorting, Paging, Grouping and Filters within a grid but i just found informations for sorting and paging.

I've done a look into this http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding post but it would only handle the soring and paging stuff.

It sould be possible to handle the grouping and filtering stuff as well without the .ToDataSourceResult(request); right?

Any help to figure this out would be welcome :-)

Kind Regards
Daniel

Grid

answered on 28 Aug 2013

3 answers

913 views

Inline Editing with Dropdown as Editor.

Hello every one, I m using Kendo Grid on MVC, it is configured for inline editing. here is the sample code

01.@(Html.Kendo().Grid<Sanwin.ViewModels.Customer.CustomerInfoModel>()

02..Name("user-Grid")

03..EnableCustomBinding(true)

04.//.BindTo(Model.Customers)

05. .Events(ev=>ev.Edit("edit"))

06..Columns(columns =>

07.{

08.

09. columns.Bound(p => p.FirstName).Width(150).Title("First Name");

10. columns.Bound(p => p.LastName).Width(150).Title("Last Name");

11. columns.Bound(p => p.Email).Width(150).Title("Email");

12.

13. columns.Bound(p => p.Ranking).Width(150).Title("Ranking");

14. // columns.ForeignKey(p => p.RankingId, rankingList,"Value","Text").Width(150).Title("Ranking");

15. columns.Bound(p => p.Gender1).Title("Gender");

16.

17. columns.Bound(x => x.UserName).Width(100);

18. columns.Bound(x => x.Password).Width(100);

19.

20.

21. columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100).Title("Action");

22.})

23..ToolBar(toolBar => toolBar.Create())

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

25..Pageable()

26..Sortable()

27.

28. .DataSource(dataSource => dataSource

29. .Ajax()

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

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

32. .Create(update => update.Action("EditingInline_Create", "Customer", ViewBag.CustomerInfoModel))

33. .Read(read => read.Action("UsersList", "Customer"))

34. .Update(update => update.Action("EditingInline_Update", "Customer"))

35. .Destroy(update => update.Action("EditingInline_Destroy", "Customer"))

37. ))

On line number 13, we have a column called Ranking, that is a editor template, here is the code for that
Raanking template

01.@using System.Web.Mvc;

02.@using Kendo.Mvc.UI;

03.@using Sanwin.Services.Catalog;

04.

05.@model string

06.

07.@{

08. var _rankingService = DependencyResolver.Current.GetService<IRankingService>();

09. var rankings = _rankingService.GetAllRanking().Select(c => new { Id = c.Rankings, Name = c.DisplayText }).ToList();

10. rankings.Insert(0, new { Id = 0, Name = "--select--" });

11.

12. var rankingList=new List<SelectListItem>();

13. foreach(var r in rankings)

14. {

15. rankingList.Add(new SelectListItem

16. {

17. Text=r.Name,

18. Value=r.Id.ToString()

19. });

20. }

21.}

22.@*@(Html.Kendo().DropDownList().Name("Ranking").DataSource(

23.ds=>ds.Read("RankingList","Catalog")

24. )

25. //.SelectedIndex(0)

26. .DataTextField("Name").DataValueField("Id")

27. //.Value(Model.ToString())

28. )*@

29.

30.@(Html.Kendo().DropDownList().Name("Ranking").BindTo(rankingList)

31. )

On my model I have this

1.[UIHint("Ranking")]

2.

public string Ranking { get; set; }

on coltroller

01.for (int i = 0; i < customers.Count; i++)

02. {

03. if (!customerIds.Contains(customers[i].Id))

04. {

05. Customer manager = null;

06. string siteName = "";

07. if (customers[i].ManagerCustomerId.HasValue && customers[i].ManagerCustomerId > 0)

08. {

09. manager = _customerService.GetCustomerById(customers[i].ManagerCustomerId.Value);

10. siteName = manager.EntityId.HasValue ? _customerService.GetEntityById(manager.EntityId.Value).Title : string.Empty;

11. }

12. var customermodel = new CustomerInfoModel

13. {

14. Id = customers[i].Id,

15. Email = customers[i].Email,

16. UserName = customers[i].UserName,

17. Active = customers[i].IsActive,

18. FirstName = customers[i].FirstName,

19. LastName = customers[i].LastName,

20.

Ranking = customers[i].Ranking.HasValue && customers[i].Ranking.Value > 0 ? _rankingService.GetRankingByRank(customers[i].Ranking.Value).DisplayText : "",

21.

GroupName = customers[i].CustomerGroups.FirstOrDefault() != null ? customers[i].CustomerGroups.FirstOrDefault().Group.Name : string.Empty,

22. Manager = manager != null ? siteName + "-" + manager.UserName : string.Empty,

23. Gender1 = customers[i].Gender,

24. RankingId = customers[i].Ranking.HasValue ? customers[i].Ranking.Value : 0,

25.

26. };

27. customerInfoModel.Add(customermodel);

28. customerIds.Add(customers[i].Id);

29. }

30. }

31.

32.

33.

34. return Json(customerInfoModel.ToDataSourceResult(request));

My problem is that, the grid is working fine, except only on edit mode, on edit mode, the ranking should display a dropdownlist, it is ok, but it is not retaining its value, I mean if on normal mode, its value is Ranking3, on edit mode, the dropdown should have selected item with Ranking3, but is not highlighting that item.

I have also tried the foreign key column type, but the result is same.

What wrong I m doing here, please correct me. Its really Urgent.

Grid

answered on 28 Aug 2013

1 answer

445 views

How to delete row programatically?

I want to change confirmation popup from synchronous browser popup to asynchronous popup (alertify). I found some old threads in Telerik MVC Extensions (http://www.telerik.com/community/forums/aspnet-mvc/grid/delete-a-row-programmatically.aspx), but this code is not working for me.

How can I delete row programatically?
I already attached to Delete event and prevent remove row, but I can't remove it programatically on positive confirmation callback (callback was called but nothing happens).

How prevent deleting row in client side too? - return false or e.preventDefault cancel remote delete call but row was removed from view.

Here is my javascript delete handler code:

function deleteRow(e) {

/* How prevent delete row in client side too - return false or e.preventDefault cancel remote delete call but row was removed from view */

alertify.confirm("dddd", function(result) {

if (result) {

e.sender.removeRow(e.row); /* not removing row */

}

});

return false;

}

Here is grid MVC builder code:

@(Html.Kendo().Grid(Model.Franchises)

.Name("franchisesGrid")

.Columns(columns =>

{

columns.Bound(p => p.Name);

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

columns.Command(command =>

{

command.Edit().Text(LocalizationResources.Update).CancelText(LocalizationResources.Cancel).UpdateText(LocalizationResources.OK);

command.Destroy().Text(LocalizationResources.Remove);

});

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.ColumnMenu()

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="row control-group">

<div class="span10">

<a class="btn k-btn-add k-grid-add"><span class="k-icon k-add"></span>@LocalizationResources.Create</a>

</div>

</text>);

})

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Editable(editable =>

{

editable.Mode(GridEditMode.PopUp).Window(builder => builder.Title("Title"));

editable.DisplayDeleteConfirmation(false);

})

.Events(builder => builder.Remove("deleteRow"))

.DataSource(dataSource => dataSource

.Ajax()

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

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

.Read("Get", "Home")

.Create("Create", "Home")

.Update("Update", "Home")

.Destroy("Remove", "Home")))

Grid

answered on 27 Aug 2013

6 answers

307 views

[Solved] Ajax binding for multiple series fails

Hi,

I have an existing legacy MVC project where I use Telerik MVC extensions. I'm now trying to migrate it to Kendo UI.
I have a little problem with scatter charts with uses ajax binding. If I have a single series, it works fine. But if I have more than one, it doesn't. This was working quite well in MVC extensions.

When I put a put a breakpoint in firebug, I see that chart.options.series[].data in case of a single series has a collection of objects which represent each data point. But in case of 2 series,
each chart.options.series[].data seems to have another array of 2 objects and inside it the data points. So my chart seems to have 4 sets of data for 2 series. I'm attaching a sample project.

Secondly I'd like the Kendo equivalent for these snippets of code

1. .YAxis(y => y.Numeric().MinorTickType(ChartAxisTickType.Outside))

2.

function formatXAxis(value) {

var hr = Math.floor(value);

var min = value - hr;

var newval = hr + (min * 6 / 10);

return $.telerik.formatString('{0:N}', newval).replace('.', ':').replace(',', ':');

}

Thanks and Regards

Achilles

Chart

answered on 27 Aug 2013

3 answers

124 views

[Solved] Getting started Kendo UI for ASP.NET MVC -problems

I reffered the below link to create a asp.net mvc3 project with kendo UI
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction
I use razor view. my index page is as follows

Index.cshtml
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<title>Index</title>
<link href="../../KendoStyles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../KendoStyles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="../../KendoScripts/jquery.min.js" type="text/javascript"></script>
@*<script src="../../KendoScripts/kendo.all.min.js" type="text/javascript"></script>*@
<script src="../../KendoScripts/kendo.web.min.js" type="text/javascript"></script>
<script src="../../KendoScripts/kendo.aspnetmvc.min.js" type="text/javascript"></script>

</head>
<body>
<h1>Welcome to Kendo Samples</h1>
<div>
@(Html.Kendo().DatePicker().Name("Birthday"))
</div>
</body>
</html>

when i use kendo.web.min.js i get the error "Microsoft JScript runtime error: Unable to get value of the property 'extend': object is null or undefined"
with kendo.all.min.js it works fine. I get no error message.

What is wrong with my code if any?

General Discussions

answered on 27 Aug 2013

8 answers

2.9K+ views

Dropdownlist model binding behaviour

After several hours of trying, and googling, I realised, in order for my model (in the controller, after a postback) to register the value of my dropdownlist, the .Name property has to actually match the name of my model property.

This is how my dropdownlist looks like

@(Html.Kendo().DropDownListFor(m => m.EventTrigger.EventType)
                                      .Name("EventTrigger.EventType")
                                      .DataTextField("EventType")
                                      .DataValueField("EventType")
                                      .BindTo(Model.EventDefs))

Shouldn't this:

(m => m.EventTrigger.EventType)

be sufficient to bind the dropdownlist selected value to my model? Why is the following .Name("") necessary?

What is the purpose of (m => m.EventTrigger.EventType)?

DropDownList

answered on 26 Aug 2013

4 answers

218 views

Multiselect does not work when .Event(e => e...) is applied

Not quite sure if I'm going about this wrong or it's the widget that has a bug in it.
Whenever I use the .Event() in my code, the controller does not work properly. It transforms back to a textbox, and does not display the elements at all. I've even tried this with your code, found here:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/multiselect/overview

This is your code:

@(Html.Kendo().MultiSelect()

.Name("multiselect")

.BindTo(new string[] { "Item1", "Item2", "Item3" })

.Events(e => e

.Select("multiselect_select")

.Change("multiselect_change")

)

<script>

function multiselect_select() {

//Handle the select event

}

function multiselect_change() {

//Handle the change event

}

</script>

This is my code:

@(Html.Kendo().MultiSelect()

.Name("tags")

.Placeholder("No tags selected for this unit")

.BindTo(new SelectList(Model.TagNames))

.Value(Model.TagNames)

.Events(e => e

.Select("tags_select")

.Change("tags_change")

)

)

<script>

...

</script>

Doing this results in the widget breaking, somehow. See attached images. I should also mention that the widget, when initialized without the .Event(), works. Allthough, it flickers before the initialization is completed and the inputbox, textbox or whatever it is before the css-styling is applied to it, appears.

MultiSelect

answered on 26 Aug 2013

2 answers

349 views

Panel bar load content from clicked item

Hello,

Is it possible to build a panel bar where the content is a grid of items retrieved by an ajax call ?
it could come from loading a view. How would you go about building something like this ?

PanelBar

answered on 26 Aug 2013