Questions on UI for ASP.NET MVC Forum

2 answers

714 views

I was wondering how the kendo grid could be configured such that the grouped rows would be collapsed rather than the expanded as in the default behaviour. I found this workaround, but the problem with that is that it uses the grid's databound event to collapse all rows, and this inadvertently tampers with the scrolling feature, basically the user is then unable to scroll further than the first page. So does the grid expose a OnGrouped() event or something similar which can be exploited to collapse the rows?

The behaviour i desire is similar to the devexpress grid, drag the country column down, and drag it back up to group, notice how the rows are collapsed.

Any other workaround to achieve this beaviour? Thanks.

Grid

answered on 24 Jan 2013

5 answers

268 views

Problem when selecting the option label dropdownlist in edit grid

Hi,

I have a class called Appointment, and within other classes have a service call and time stopped, follows below:

public class Appointment
{
/ / ...
/ / other properties

[UHint ("ServiceEditor")]
public Service Service {get; set;}

[UHint ("ServiceEditor")]
public Service Service {get; set;}
}

public class Service
{

public int Id {get; set;}

public string Name {get; set;}
}

public class TimeStopped
{

public int Id {get; set;}

public string Description {get; set;}
}

/ / View Editor:
@ (Html.Kendo (). DropDownList ()
. Name ("Service")
. DataValueField ("Id")
. DataTextField ("Name")
. BindTo ((System.Collections.IEnumerable) ViewData ["services"])
. OptionLabel ("Select"))

The rule is if a note has a service he can not have hours parade and vice versa. Suppose the User selected a service, ok the change happens, but when he comes back to kendo option select throws a TypeError exception: Service is null

already tried to fix this but so far have found nothing = / what should I do?

DropDownList

answered on 24 Jan 2013

2 answers

166 views

Error adding new C# Kendo UI for MVC web application

Anybody else have this problem?
Any help would be appreciated!

Visual Studio Premium 2012

File -> New -> Project -> Templates -> Telerik -> Web -> C# Kendo UI...
Default for Name, Location, Solution, Solution Name
Create directory for solution is checked
Press OK
Kendo UI for ASP.NET MVC Project Settings page is displayed
Default all except uncheck Add Test Project
Press Next
Data Access with Telerik OpenAccess ORM is displayed (no options)
Press Finish
Error pop-up

    Package Installation Error
    The "repository" attribute of the package element has an invalid value:
    'registry'. Valid values are 'template', or 'extension'

Thanks!

Installer and VS Extensions

answered on 24 Jan 2013

4 answers

340 views

Re-binding grid after search?

I'm just building my first kendo app - and my first mvc app, for that matter - and am stuck on one piece. The page has a kendo grid that is populated using the View's model. Above the grid is a search form, which triggers a "Search" controller action. That action uses any criteria to get a new set of data and passes it back to the View, but the grid doesn't automatically re-bind to the data. I'm not sure how to re-bind the grid, but if there is a way, where would I do it - in the View or the controller action?

Here is my code - Grid:

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

.Name("tblGrid")

.Columns(columns =>

{

columns.Bound(w => w.Id).Hidden();

columns.Bound(w => w.IncidentType).Width(160);

columns.Bound(w => w.Location).Width(180);

columns.Bound(w => w.IncidentDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

columns.Bound(w => w.PostDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

})

.DataSource(dataSource => dataSource

.Server()

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

.PageSize(15)

.Create("Editing_Create", "Grid")

)

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

.Groupable()

.Pageable()

.Sortable()

.Selectable()

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

)

Search Controller:

[HttpPost]

public ActionResult Search([DataSourceRequest] DataSourceRequest request, string location, string reportNum, int? officerId, int? xref, int? days, int incidentTypeId)

{

var summaries = new List<WatchSummaryInfo>();

try

{

summaries = WatchSummaryBL.DoGetWatchListBySearch(SearchCriteriaHere).ToList();

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}

var filtered = new List<WatchSummaryViewModel>();

try

{

foreach (var summary in summaries)

{

filtered.Add(new WatchSummaryViewModel{

Id = summary.ID,

IncidentDateTime = summary.WatchDateTime,

IncidentType = summary.IncidentType,

Location = summary.Location,

PostDateTime = summary.PostDateTime

});

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}

return View("List", filtered);

}

I can verify by stepping through this that the collection I am passing back to the View has a much smaller subset (11) than the original ViewModel data, but the grid doesn't change.

What am I missing?

Thanks for the help!

Eddie

Grid

answered on 24 Jan 2013

1 answer

1.7K+ views

Disable resize for specific column?

Is there a way to disable column resizing for a particular column only (the last column to be precise)?

Some more info on my problem, I have enabled fixed table layout on the Grid, so that an Ellipsis will show for fields that are very long.

/* allow ellipsis to show on overflow text in grid */
.k-grid table
{
table-layout:fixed;
}

... but now when the user resizes the last column, there are rendering issues on the Grid - it overruns the width of the grid (see attachment).

Here is my grid def -

       @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.RoleName).Width(200);
                    columns.Bound(p => p.Description);
                })
                .Events(events => events.Change("Grid_OnRowSelect"))
                .Pageable()
                .Sortable()
                .HtmlAttributes(new { @style = "width:500px" })
                .Selectable(s => s.Mode(GridSelectionMode.Single))
                .Resizable(resize => resize.Columns(true))
                .DataSource(dataSource => dataSource
                    .Ajax()
                        .Read(read => read.Action("RoleSearch", "Role").Data("Grid_OnData"))
                        .Events(e => e.RequestEnd("Grid_OnRequestEnd"))
                    )

)

Grid

answered on 24 Jan 2013

1 answer

275 views

serverside validation during pop-up editing not working with custom template

Hi,

I have followed this example to implement server side validation in my grid edit:

http://www.kendoui.com/code-library/mvc/grid/handling-server-side-validation-errors-during-pop-up-editing.aspx

It works when I used the standard pop up editor but when I substitute it with my custom template editor the tool tip with the model error does not display.

How can I modify this to work with a custom template ? ie one that sits in sharedviews\editor templates\

Grid

answered on 24 Jan 2013

2 answers

1.1K+ views

System.NotSupportedException: The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'

@model System.Collections.IEnumerable

@(Html.Kendo().Grid<HoghoughModel.PTStbKarkonan>()

.Name("Grid")

.EnableCustomBinding(true)

.BindTo(Model)

.Columns(columns => {

columns.Bound(o => o.IssuePlace);

columns.Bound(o => o.BimehName);

columns.Bound(o => o.Family);

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

})

.Pageable()

.Sortable()

.Filterable()

.Scrollable()

.Groupable()

.DataSource(dataSource => dataSource.Server().Total((int)ViewData["total"]))

)

and this code for populating grid :

public ActionResult Index([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request)

{

if (request.PageSize == 0)

{

request.PageSize = 10;

}

IQueryable<PTStbKarkonan> karkonan = db.PTStbKarkonans;

karkonan = karkonan.ApplyFiltering(request.Filters);

var total = karkonan.Count();

karkonan = karkonan.ApplySorting(request.Groups, request.Sorts);

karkonan = karkonan.ApplyPaging(request.Page, request.PageSize);

IEnumerable data = karkonan.ApplyGrouping(request.Groups);

ViewData["total"] = total;

return View(data);

}

public static class PTStbKarkonanExtensions

{

public static IQueryable<PTStbKarkonan> ApplyPaging(this IQueryable<PTStbKarkonan> data, int page, int pageSize)

{

if (pageSize > 0 && page > 0)

{

data = data.Skip((page - 1) * pageSize);

}

data = data.Take(pageSize);

return data;

}

public static IEnumerable ApplyGrouping(this IQueryable<PTStbKarkonan> data, IList<GroupDescriptor>

groupDescriptors)

{

if (groupDescriptors != null && groupDescriptors.Any())

{

Func<IEnumerable<PTStbKarkonan>, IEnumerable<AggregateFunctionsGroup>> selector = null;

foreach (var group in groupDescriptors.Reverse())

{

if (selector == null)

{

if (group.Member == "IssuePlace")

{

selector = Orders => BuildInnerGroup(Orders, o => o.IssuePlace);

}

else if (group.Member == "BimehName")

{

selector = Orders => BuildInnerGroup(Orders, o => o.BimehName);

}

else if (group.Member == "Family")

{

selector = Orders => BuildInnerGroup(Orders, o => o.Family);

}

else if (group.Member == "Name")

{

selector = Orders => BuildInnerGroup(Orders, o => o.Name);

}

else

{

if (group.Member == "IssuePlace")

{

selector = BuildGroup(o => o.IDSeri, selector);

}

else if (group.Member == "BimehName")

{

selector = BuildGroup(o => o.BimehName, selector);

}

else if (group.Member == "Family")

{

selector = BuildGroup(o => o.Family, selector);

}

else if (group.Member == "Name")

{

selector = BuildGroup(o => o.Name, selector);

}

return selector.Invoke(data).ToList();

}

return data;

}

private static Func<IEnumerable<PTStbKarkonan>, IEnumerable<AggregateFunctionsGroup>>

BuildGroup<T>(Expression<Func<PTStbKarkonan, T>> groupSelector, Func<IEnumerable<PTStbKarkonan>,

IEnumerable<AggregateFunctionsGroup>> selectorBuilder)

{

var tempSelector = selectorBuilder;

return g => g.GroupBy(groupSelector.Compile())

.Select(c => new AggregateFunctionsGroup

{

Key = c.Key,

HasSubgroups = true,

Member = groupSelector.MemberWithoutInstance(),

Items = tempSelector.Invoke(c).ToList()

});

}

private static IEnumerable<AggregateFunctionsGroup> BuildInnerGroup<T>(IEnumerable<PTStbKarkonan>

group, Expression<Func<PTStbKarkonan, T>> groupSelector)

{

return group.GroupBy(groupSelector.Compile())

.Select(i => new AggregateFunctionsGroup

{

Key = i.Key,

Member = groupSelector.MemberWithoutInstance(),

Items = i.ToList()

});

}

public static IQueryable<PTStbKarkonan> ApplySorting(this IQueryable<PTStbKarkonan> data,

IList<GroupDescriptor> groupDescriptors, IList<SortDescriptor> sortDescriptors)

{

if (groupDescriptors != null && groupDescriptors.Any())

{

foreach (var groupDescriptor in groupDescriptors.Reverse())

{

data = AddSortExpression(data, groupDescriptor.SortDirection, groupDescriptor.Member);

}

if (sortDescriptors != null && sortDescriptors.Any())

{

foreach (SortDescriptor sortDescriptor in sortDescriptors)

{

data = AddSortExpression(data, sortDescriptor.SortDirection, sortDescriptor.Member);

}

return data;

}

private static IQueryable<PTStbKarkonan> AddSortExpression(IQueryable<PTStbKarkonan> data, ListSortDirection

sortDirection, string memberName)

{

if (sortDirection == ListSortDirection.Ascending)

{

switch (memberName)

{

case "IssuePlace":

data = data.OrderBy(order => order.IssuePlace);

break;

case "BimehName":

data = data.OrderBy(order => order.BimehName);

break;

case "Family":

data = data.OrderBy(order => order.Family);

break;

case "Name":

data = data.OrderBy(order => order.Name);

break;

}

else

{

switch (memberName)

{

case "IssuePlace":

data = data.OrderByDescending(order => order.IssuePlace);

break;

case "BimehName":

data = data.OrderByDescending(order => order.BimehName);

break;

case "Family":

data = data.OrderByDescending(order => order.Family);

break;

case "Name":

data = data.OrderByDescending(order => order.Name);

break;

}

return data;

}

public static IQueryable<PTStbKarkonan> ApplyFiltering(this IQueryable<PTStbKarkonan> data,

IList<IFilterDescriptor> filterDescriptors)

{

if (filterDescriptors != null && filterDescriptors.Any())

{

data = data.Where(ExpressionBuilder.Expression<PTStbKarkonan>(filterDescriptors));

}

return data;

}

I use EntityFramework. When I run project I get
System.NotSupportedException: The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'

Grid

answered on 24 Jan 2013

1 answer

53 views

Value set by JS not returned to server

I set up a value of input text box via javascript. However, the value is not seen from server (i.e. remaining as null).

Could anyone advice how to resolve this?

Grid

answered on 24 Jan 2013

3 answers

1.1K+ views

Grid not binding a Checkbox to Boolean in Model

I've created the following editable grid bound to a model. The Date and Integer EditorTemplates work just fine.

However, our user case requires that we multi-select via a checkbox, which is why I added a Selected boolean in the Model. I'd rather cycle through these via the grid's data than by iterating through [tr]s, as it is a much cleaner way to do so.

Via a custom Checkbox EditorTemplate and the ClientTemplate I'm able to successfully display a checkbox. However, I have tried many ways to bind it to the actual Model property and have failed each time. I've tried @HTML.CheckboxFor and @HTML.Checkbox within my EditorTemplate, the latter working properly but not binding to the Model. The CheckboxFor throws a message about not being able to bind a null value... I've tried bool?, bool and System.Boolean, but all three would not bind properly.

View

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

.Name("ExtensionInfoGrid")

.Columns(columns =>

{

columns.Bound(o => o.Selected)

.Title("")

.Width(50)

.ClientTemplate("<input type='checkbox' id='isSelected' name='isSelected' #if(Selected){#checked#}# value='#=Selected#' />")

.EditorTemplateName("Checkbox");

columns.Bound(o => o.ExtendFromDate)

.Title("Extend From Date *")

.Width(150)

.Format("{0:M/d/yyyy}")

.Filterable(false)

.Sortable(true)

.EditorTemplateName("Date");

columns.Bound(o => o.Units)

.Title("Units *")

.Width(100)

.EditorTemplateName("Integer");

columns.Bound(o => o.UnitType).Title("Unit Type");

})

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

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model =>

{

model.Id(m => m.Code);

model.Field(m => m.Selected).Editable(true);

model.Field(m => m.ExtendFromDate).Editable(true).DefaultValue(DateTime.Now);

model.Field(m => m.Units).Editable(true);

model.Field(m => m.UnitType).Editable(false);

})

)

)}

Model

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using ProviderWebAppMVC.UmServiceRef;

namespace ProviderWebAppMVC.Models

{

    public class ExtensionDetail

    {

        public ExtensionDetail()

        {

            Selected = true;

            Code = string.Empty;

            Description = string.Empty;

            ExtendFromDate = DateTime.Now;

            ExtendToDate = DateTime.Now;

            Units = 0;

            UnitType = string.Empty;

        }

        public bool Selected;

        public string Code;

        public string Description;

        public DateTime ExtendFromDate;

        public DateTime ExtendToDate;

        public int Units { get; set; }

        public string UnitType { get; set; }

    }

}

Grid

answered on 24 Jan 2013

1 answer

132 views

Postback after selection

I am able to define autocomplete in grid popup editor and is also able to select value from the dropdown. However when clicking the update button, the selected value is not retrieved (i.e. value is null).

Any one can advise what happens?

AutoComplete

answered on 24 Jan 2013