Questions on UI for ASP.NET MVC Forum

3 answers

800 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

903 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

434 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

295 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

116 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

202 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

340 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

1 answer

110 views

dynamic custom commands

I have a grid with another grid inside the client detail. Each grid gets it data using ajax calls.

In the second grid I need to display various buttons against each row based on a value in a status field (let's call that StatusID)
The number of buttons varies from none to 5. I was thinking to put them all inside 1 column.
How can I achieve this ?

I am using the fluent grid declaration

After playing with it for a while I noticed this :

In my second grid ( aka the grid inside the ClientDetailTemplateID, i cannot use the bound values whatever I do

My column looks like this :

columns.Bound(p => p.PublishStatusID).ClientTemplate("#= PublishStatusID #");
As you can see this is just a test to get the value to display before I move on to building a button. I am getting an error telling me that PublishStatusID does not exist. In fact none of the bound properties can be accessed at all except for the one which is basically the key passed by the parent grid.
The data in the grid itself displays fine, but I cannot access it whatever I do in a ClientTemplate

The controller is setup to return data for the grid :
public JsonResult GetSomeData([DataSourceRequest] DataSourceRequest request, int someID)
and it returns this.Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

What's going on ?

Grid

answered on 26 Aug 2013

11 answers

700 views

[Solved] ImageBrowser with images from database

I'm trying to create an implementation of the imagebrowser where the images are read from a database table.

It reads the images correctly from the database, but they are being treated as folders for some reason. So it never calls the Thumbnail controller method, it just displays the default folder thumbnail. The same thing happens when I try to select an image. It doesn't call the Image method, but instead another call to the Read method.

Any ideas?

I've attached some snippets from my code. We are currently usin gKendoUI 213.1.514.

Regards,
Jan Erik

Editor

answered on 26 Aug 2013