Questions on UI for ASP.NET MVC Forum

4 answers

564 views

How can I highlight that a filter has been applied to a column after I enable the option to choose columns using .ColumnMenu()

Refer to the attached screen shots No ColumnMenu Filter.png and No ColumnMenu Filter Applied.png when I don't have the .ColumnMenu() applied a user can visually see that a filter has been applied.

Below is the MVC Helper config for completeness:

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(f => f.FluidID).Width(50).Title("ID").Hidden();

columns.Bound(f => f.Name).Width(150).Title("Name");

columns.Bound(f => f.Code).Width(150).Title("Code");

columns.Bound(f => f.Grade).Width(150).Title("Grade");

columns.Bound(f => f.Manufacturer).Width(150).Title("Manufacturer");

})

.Deferred()

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

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

.Groupable()

.Pageable()

.Sortable()

//.ColumnMenu() <-- Once enabled, there is no visual cues to highlight that a filter is applied

.Scrollable(s => s.Height("auto"))

.Navigatable()

.Filterable()

.Events(e => e

.DataBound("grid_dataBound")

)

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.Read(read => read.Action("GetJsonData", "FluidKendo"))

)

Once I enable .ColumnMenu() the filtering options are contained in a submenu item and the user is unable to visually see if a column filter has been applied. Refer to ColumnMenu.png and ColumnMenu Filter Applied.png.

I want users to be able to choose columns and highlight when filtering is applied to columns. Is there any way I can achieve this?

Is there any other way I can enable grid column selection without enabling .ColumnMenu(). I have tried: http://stackoverflow.com/questions/13637475/how-to-show-kendo-grids-columnmenu-using-script but the grid .ColumnMenu() option needs to be enabled for this to work which defeats the purpose.

Maybe there is an options to show as text, what filter options have been applied, hook into an event?

Thanks,
Beau

Grid

answered on 15 May 2015

6 answers

1.3K+ views

Object doesn't support property or method 'slice'

I am attempting to implement a Kendo DropDownList with server filtering. I have the following in my view (.cshtml):

@(Html.Kendo().DropDownList()

.Name("UnselectedADGroups")

.DataTextField("Name")

.DataValueField("Name")

.Filter("StartsWith")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetUnselectedADGroups", "ARItemPost");

}

)

.ServerFiltering(true);

})

)

I have the following in my controller:

public ActionResult GetUnselectedADGroups([DataSourceRequest]DataSourceRequest request, string startsWith)

{

try

{

var groups = ARItemPost.GetUnselectedADGroups(startsWith);

var result = groups.ToDataSourceResult(request);

return Json(result, JsonRequestBehavior.AllowGet);

}

catch (Exception e)

{

ErrorSignal.FromCurrentContext().Raise(e);

return null;

}

I have verified that I'm getting results back from the AJAX call (it's a collection of a simple object with a single public string property called "Name"), but the dropdown list does not populate and I get an "Object doesn't support property or method 'slice'" error on the "i_pristineData=n.slice(0);" line of [I think] kendo.all.min.js.

DropDownList

answered on 15 May 2015

3 answers

258 views

How to keep Kendo Window open after POST

I have actually posted my question on StackOverflow, but this forum is specific with Kendo Window so im riposting the question here

http://stackoverflow.com/questions/30112793/how-to-keep-kendo-window-open-after-post

Window

answered on 15 May 2015

1 answer

81 views

Performance when grid is update freqvently

Hello,

I have grid with cca 50-100 rows one column has online FX price and this column is changed frequently. I update data with pushUpdate method on datasource. When I profiling application in Grid I see that about 60% of time is spend in two functions _setContentWidth and _setContentHeight. But I set fixed width for all columns and fixed height of row in css. Is possible to tell grid not to recomputed width and height on each update?

Thanks

Regards

Martin

Grid

answered on 15 May 2015

4 answers

98 views

Custom syncing of several DDLs

So, I am using UI for ASP.NET MVC Q1 2015. I have 3 DDLs, configured to populate their data remotely(from action method inside a controller) using DataSource/Read action AJAX pattern.

I have some custom business logic I need to implement: when something gets changed in the 1st DDL, I have to do some custom calculations that may potentially involve what it has been selected in 2nd DDL so I can eventually change the selected values in the 3rd DDL.
So this here has nothing to do with datasource filtering or custom cascading.

My issue/concern here is: how can I do any such calculations/alterations of the other DDLs from inside a 'Changed' event handler in the 1st one safely, given all 3 are populated asynchronously? I mean, how can I be sure that when inside the Changed event handler in 1st DDL, data for 2nd & 3rd DDL had been fully loaded so I can use them in calculations and/or change the Selected value for those DDLs?

Thanks!

DropDownList

answered on 15 May 2015

4 answers

163 views

Pop Up Window without focus

Hi,

We are using a pop up window to display information about a selected item in a grid. When the user selects the grid item the window appears but it then has focus.

Is there a way to pop-up the window but retain focus on the calling control?

Regards,

Mark.

Window

answered on 15 May 2015

5 answers

174 views

IE11 & Chrome Issues with Kendo.Menu

In the attached image, we are having issues with the menu bar and spacing between the sub menu's. We are currently running Kendo.UI 2013.2.918. Do the newer versions of Kendo fix this "bug" or is there an fix that we can do with our current version? The screen print is from Chrome version 42.0.2311.135

Code:

@(Html.Kendo().Menu()
.Name("Menu")
.HtmlAttributes(new { @style = "width:99%;border: 0px;"})
.Direction(MenuDirection.Bottom)
.Items(items =>
{
items.Add().Text("home").Action("Index", "Home").ImageUrl(Url.Content("~/Images/B-home%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("search").Action("Index", "Search").ImageUrl(Url.Content("~/Images/B-search%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("activities & alerts").ImageUrl(Url.Content("~/Images/B-Activity%2048.png")).HtmlAttributes(new { style = "width:175px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("bins").Items(binNode =>
{
binNode.Add().Text("central processing unit").Action("Index", "ActivityPage", new { BinID = "1" });
binNode.Add().Text("charge off").Action("Index", "ActivityPage", new { BinID = "7" });
binNode.Add().Text("collateral cashier").Action("Index", "ActivityPage", new { BinID = "9" });
binNode.Add().Text("defensive action").Action("Index", "ActivityPage", new { BinID = "4" });
binNode.Add().Text("delinquency").Action("Index", "ActivityPage", new { BinID = "2" });
binNode.Add().Text("foreclosure / reo").Action("Index", "ActivityPage", new { BinID = "6" });
binNode.Add().Text("legal / bankruptcy").Action("Index", "ActivityPage", new { BinID = "3" });
binNode.Add().Text("office automation assistant").Action("Index", "ActivityPage", new { BinID = "8" });
binNode.Add().Text("settlement").Action("Index", "ActivityPage", new { BinID = "5" });
}).HtmlAttributes(new { style = "width:175px" });
children.Add().Text("my").Items(my =>
{
my.Add().Text("activities").Action("Index", "ActivityMyPage").HtmlAttributes(new { style = "width:175px" });
my.Add().Text("alerts").Action("Index", "Alerts", new { Mine = true });
}).HtmlAttributes(new { style = "width:175px" });

children.Add().Text("office").Items(office =>
{
office.Add().Text("actities").Action("Index", "ActivityPage", new { BinID = "0" }).HtmlAttributes(new { style = "width:175px" });
office.Add().Text("alerts").Action("Index", "Alerts");
}).HtmlAttributes(new { style = "width:175px" });
});
items.Add().Text("reports & portfolios").ImageUrl(Url.Content("~/Images/B-reports%2048.png")).HtmlAttributes(new { style = "width:190px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("reports").Items(sibling1 =>
{
sibling1.Add().Text("my activity report").Action("Index", "StaffMetrics");
sibling1.Add().Text("office activity report").Action("Index", "OfficeMetrics");
}).HtmlAttributes(new { style = "width:190px" });
children.Add().Text("portfolios").Items(sibling2 =>
{
sibling2.Add().Text("office portfolio").Action("Index", "Reports_OfficeLoan");
sibling2.Add().Text("litigation portfolio").Action("Index", "Reports_Litigation", new { status = "true" });
});
children.Add().Text("statisitics").Visible(@Convert.ToBoolean(Session["isManagement"].ToString())).Items(sibling3 =>
{
sibling3.Add().Text("staff report").Action("Index", "ManagerStaffReport");
sibling3.Add().Text("role process report").Action("Index", "RoleMetrics");
});
});
items.Add().Text("admin").ImageUrl(Url.Content("~/Images/B-admin%2048.png")).HtmlAttributes(new { style = "width:100px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("staff").Action("Index", "AdminStaff").HtmlAttributes(new { style = "width:100px" });
children.Add().Text("database").Action("Index", "AdminDatabase").Visible(@Convert.ToBoolean(Session["AdminDatabase"]));
children.Add().Text("website").Action("Index", "AdminWebsite").Visible(@Convert.ToBoolean(Session["AdminWebsite"]));
});
})
)

Menu

answered on 14 May 2015

3 answers

269 views

ListView not rendering

Hi,

I'm trying to use a MobileListView in my project with this code:

<div class="row">

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

@(Html.Kendo().MobileView()

.Title("Chiamate")

.Header(obj =>

Html.Kendo().MobileNavBar()

.Name("ChiamateNavbar")

.Content(navbar =>

@<text>

@navbar.ViewTitle("Chiamate")

</text>)

)

.Content(

@<text>

@(Html.Kendo().MobileListView<Telesan.CloudLift.WebApplication.Models.Chiamate.ChiamataListViewModel>()

.Name("ChiamateListView")

.TemplateId("ChiamateTemplate")

.PullToRefresh(true)

.EndlessScroll(true)

.DataSource(dataSource =>

dataSource

.Read(r => r.Action("ChiamateAjaxList", "Chiamate").Data("onData").Type(HttpVerbs.Post))

.ServerOperation(true)

.Filter(t =>

{

t.Add(m => m.DataOra).IsGreaterThanOrEqualTo(DateTime.Today.AddDays(-3));

t.Add(m => m.IDStato).IsNotEqualTo((Guid)ViewBag.StatoChiuso).And().IsNotEqualTo((Guid)ViewBag.StatoElaborato);

})

.Sort(s => s.Add(m => m.DataOra).Descending())

.PageSize(50)

)

</text>)

)

</div>

But it doesn't render to my page so after a search I've found a possible solution by adding this in _L:

@(Html.Kendo().MobileApplication()

.ServerNavigation(true)

)

I can see some differences now, the page style has changed but the listview is not yet appeared.

Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.

But I didn't find a solution for this problem with ASP.NET MVC Wrappers.

This is the _Layout block where @RenderBody is:

<div class="cloudlift-container">

<div class="row">

<div class="col-xs-12 main-content">

@RenderBody()

</div>

@(Html.Kendo().MobileApplication()

.ServerNavigation(true)

)

I don't know how to tell to MobileApplication helper to find the div inside my structure as seen in examples found about KendoUI Professional.

Can somebody help?

ListView (Mobile)

answered on 14 May 2015

10 answers

717 views

Are there events for the ImageBrowser?

The documentation doesn't show that there are events for the ImageBrowser, such as Change, Upload, etc. Are there any?

If not, it would be nice in a future version, this way I can wrap my images in an HTML snippet for styling when I click Insert Image.

Just a thought.

Editor

answered on 14 May 2015

1 answer

62 views

Grid editor

I have a grid that has joined tables from a doamin method entity.

I want to edit the grid columns. for some reason, I keep getting a null value for some of the grid colunms.

public ActionResult EditSubscriber([DataSourceRequest] DataSourceRequest gridRequest, Sub editSub, Subs editSubs)
{
if (ModelState.IsValid)
{

// Passin values
Sub subToUpdate = db.Subss.FirstOrDefault(s => s.Sub_ID == editSub.Sub_ID);
subToUpdate .SFirstName = editSub.SFirstName;
subToUpdate .SLastName = editSub.SLastName;
subToUpdate .SEmail = editSub.SEmail;

// Null values. Values are not being passed. Why?

Subs subsToUpdate = db.Subsss.FirstOrDefault(s => s.Subs_ID == editSubs.Subs_ID);
subsToUpdate .SubsStartDate = editSubs.SubsStartDate;
subsToUpdate .SubsEndDate = editSubs.SubsEndDate;
subsToUpdate .SubsStatus = editSubs.SubsStatus;
subsToUpdate .SubsType_ID = editSubs.SubsType_ID;

db.SaveChanges();
}

return Json(new[] { editSub}.ToDataSourceResult(gridRequest, ModelState));
}

Any idea?

Grid

answered on 14 May 2015