Questions on UI for ASP.NET MVC Forum

5 answers

150 views

First attempt at a Grid; Fail

Model

public class Switch

{

[DisplayName("Switch Id")]

public string SwitchId { get; set; }

}

Controller

public class UserConsoleViewModelsController : Controller

{

public ActionResult FilteredSwitches_Read([DataSourceRequest]DataSourceRequest request)

{

var filteredSwitches = GetFilteredSwitches().ToDataSourceResult(request); //3 records are here at runtime

return Json(filteredSwitches);

}

private IEnumerable<Switch> GetFilteredSwitches()

{

return db.Switches.ToList();

}

View

@(Html.Kendo().Grid<Switch>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.SwitchId).Width(140);

})

.HtmlAttributes(new { style = "height: 380px;" })

.Scrollable()

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("FilteredSwitches_Read", "UserConsoleViewModels"))

)

I get a grid, but there are no rows in it for the 3 records known to be in 'FilteredSwitches_Read()'.

What am I doing wrong?

Dave

Grid

answered on 01 Dec 2014

2 answers

281 views

Dynamically creating a Menu issues

I have a Kendo UI MVC Menu which I created dynamically using code from this link - my code is below.
When I select a menu option I want to call an Ajax request to load some report details on the page. Note in my code I have menuItemOption1 and menuItemOption2 (this one is commented out) I have two queries:

1. Using menuItemOption1 which sets the Action i.e. .Action("GetReports", "Reports",new {Oid=child.Oid}); I want to be able to retrieve this Action Url in the 'reportSelectChanged' javascript function to use in the Ajax request - how do I get the generated Action url in the javascript function I can get the menu item text using javascript below:

$(e.item).children(".k-link").text();

But how do I access the action url parameter?

2. In menuItemOption2 I was trying to dynamically add a html data attribute i.e. data-reportoid - then in my javascript function I'd like to access this data attribute. The Kendo UI MVC MenuBuolder is fine with the first parameter - so code below works fine:

var menuItemOption2 = menuItems.Add().Text(child.Text).HtmlAttributes(new {@id=child.Oid.ToString()});

However when I add the second data attribute I get the compiler error below when the browser tries to render the razor page. Is it possible to set the data attribute dynamically and if it is how do I get it i the javscript function.

Compiler Error Message: CS0746: Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access.

@model IList<ModelMenuItem>

@functions

{

public void addCategoryChildren(MenuItemBuilder builder, string parentCategory, IList<ModelMenuItem> items)

{

var children = items.Where(m => m.Category == parentCategory);

if (children != null)

{

builder.Items(menuItems =>

{

foreach (var child in children)

{

var menuItemOption1 = menuItems.Add().Text(child.Text).Action("GetReports", "Reports",new {Oid=child.Oid});

//var menuItemOption2 = menuItems.Add().Text(child.Text).HtmlAttributes(new {@id=child.Oid.ToString(), data-reportoid=child.Oid.ToString()});

}

});

}

@{

var categories = Model.Select(x => x.Category).Distinct().ToList();

}

<div id="workflowToolbar">

@(Html.Kendo().Menu()

.Name("mnuReports")

.Items(topMenu =>

{

foreach (var cat in categories)

{

var builder= topMenu.Add().Text(cat.ToString());

addCategoryChildren(builder, cat.ToString(), Model);

}

})

.Events(e=>e.Select("reportSelectChanged"))

)

</div>

Menu

answered on 01 Dec 2014

1 answer

104 views

Filtering through ClientDataSource

Hi, I need to filter the Grid through a Client DataSource in client side.
I can filter the grid applying the filter to the grid directly, however it is not possible filter using non visible columns, so I tried to apply a filter the grid adding filter expressions in the ClientDataSource but nothing happens.
For example
var datasource = $find('MyClientDataSource');
datasource.get_filterExpressions().add({ fieldName: "MyField", value: "MyValue", operator:Telerik.Web.UI.ClientDataSource.FilterOperator.EqualTo });
tableView.rebind();

This code doesnt work. It is possible do this kind of filtering?

Grid

answered on 28 Nov 2014

1 answer

123 views

How to Use Kendo Validator in Gantt for validating?

Hi ,

Can we able to use kendo validator in gantt for making validation in the gantt list view while editing?

Regards,
Manoj

Gantt

answered on 28 Nov 2014

1 answer

374 views

Print window contents

I want to print the window contents on window open. Is there a way to do this? Thanks.

Window

answered on 28 Nov 2014

1 answer

84 views

Internal error when use templates

Hello.
I tried to find a solution on the forum, but did not find.

I have a treeview with tempate -

<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
<span><input class="color" value="1" /></span>
<a class="k-button appendNodeToSelected" href='\#'>Append node</a>
<a class='k-button delete-link' href='\#'>Remove node</a>
</script>

input in js I transforamtion to kendo dropdown.

And when I select a node there is an error in the file 'kendo.all.min.js'
error :
TypeError: e is undefined>....each(function(){var e=i.dataItem(this);e.set("selected",!1),delete e.selected}).

If i remove input, all work OK. Help resolve this problem. Because with this error I can't add Node.

TreeView

answered on 28 Nov 2014

1 answer

94 views

Using InLine edit mode and want to move to the second column for editing

I have a grid using InLine edit mode with the Command buttons Edit and Delete in column 0. When I add a new row I need the focus to change go column 1 (0 is the buttons). Right now the focus goes to the Update button and it takes 2 tabs to move to column 1. How can I move focus to column 1?

I have tried the following and it does not work.

$('#grid').find('td').eq(0).removeClass("k-state-selected").removeClass("k-state-focused");
$('#grid').find('td').eq(1).addClass("k-state-selected").addClass("k-state-focused").addClass("gridFieldEdit");
$("#grid_active_cell")

or

var grid = $("#grid").data("kendoGrid");
theCell = $('#grid tbody td:eq(1)');
grid.current(theCell);

Help!

Thanks in advance for your help.

Grid

answered on 28 Nov 2014

1 answer

80 views

Error in documentation of Ajax mode

Was just running through some documentation. Found that the "Example - enable client data processing (Razor)" section of the Ajax binding documentation has an error in the placement of the .ServerOperation(false). (http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-binding)

The example code should read:

@(Html.Kendo().Grid<KendoGridAjaxBinding.Models.Product>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false) // <== This is not an available option of .Read. Should be above and must apparently be after .Ajax
.Read(read => read
.Action("Products_Read", "Home") // Set the action method which will return the data in JSON format
.Data("productsReadData")
)
) <snip>

Couldn't find a more appropriate place to enter this

Grid

answered on 27 Nov 2014

1 answer

164 views

custom popup editing

May I know how to add or edit record which have more fields than display in the grid. i.e.: in the grid, it display name, phone, email but when click edit button, we can edit another fields too.

Grid

answered on 27 Nov 2014

3 answers

130 views

Native popup editor with additional fields

May I know how to do it in MVC? Previously, I have used a custom popup template. Something like javascript code below.

editable: { mode: "popup", template: kendo.template($("#popup_editor").html())}

Grid

answered on 26 Nov 2014