Questions on UI for ASP.NET MVC Forum

3 answers

588 views

AutoComplete shows undefined and null in template

I have an AutoComplete control in a in a client template that uses the ToClientTemplate method

@(Html.Kendo().AutoComplete()

.Name("presenter")

.DataTextField("DisplayText")

.Filter("contains")

.MinLength(3)

.HtmlAttributes(new { style = "width:100%" })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Search", "People", new { SPHostUrl = ViewBag.SPHostUrl })

.Data("onPresenterAdditionalData");

})

.ServerFiltering(true);

})

.Template("<div><span class=\"k-state-default\">${ data.DisplayText }</span></div><div><span class=\"k-state-default\">${ data.Title }</span></div>")

.ToClientTemplate())

The controller is returning data and I have used Fiddler to make sure it is being sent to the browser.

The dropdown just shows "undefined" for DisplayText and "null" for Title.

The above control is in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"> and render using

var template = kendo.template($("#documentDetailsTemplate").html());

When I select one of the options, it displays the DisplayText of the selected option.

AutoComplete

answered on 18 May 2016

1 answer

150 views

Change edit to single click

Can the edit function for the MVC Scheduler be changed from a double click to a single click event?

Scheduler

answered on 18 May 2016

3 answers

254 views

Drag and Drop between TreeLists

How do I drag and drop between two TreeLists?

TreeList

answered on 17 May 2016

1 answer

150 views

Clearing the Cell Modified Indicators

I have a page where the update is put in motion using a custom button click that resides in the Kendo Toolbar.

The editing is done using GridEditMode.InCell and everything is working for the update but at the end of the process the little red triangle is remaining in the modified cells.

I have tried the following to clear them but it is not working:

....
grid.dataSource.read();
resetGridDirtyIndicators();
...

function resetGridDirtyIndicators (){

var grid = $('#Grid').data().kendoGrid;

var $gridData = grid.dataSource.data();

for (var i = 0; i < $gridData.length; i++) {

var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']");

var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")");

if (cell.hasClass("k-dirty-cell")) {

debugger;

cell.removeClass("k-dirty-cell");

}

Any Help would be greatly appreciated.

Thanks,

Reid

Grid

answered on 17 May 2016

1 answer

58 views

String changes to date

Good day,

In the spreadsheet control any time you type a string that resembles a date or time, the format for the cell changes to Date.

For instance, if you go to the DataSource Binding demo at http://demos.telerik.com/aspnet-mvc/spreadsheet/datasource and type 10:00 PM in the ProductName column the current date will be displayed in the cell. If you type 10-10-10 it will be changed to 10/10/2010. If you type 10:99 it gets changed to 11:39.

So with a spreadsheet that is bound to a datasource. How do you force a column to keep the input string as a string?

Thanks and Regards

Spreadsheet

answered on 17 May 2016

2 answers

1.5K+ views

Getting a column value and passing to javascript

Hello,

My grid has a column called "vessel_idx" that shows all the IDs relating to each vessel(obviously), each row also has a button that calls my own Javascript function. I need to pass the value of the vessel_idx into this function, does anyone know how I can accomplish this?

Here is my grid with the required column and button as described above.

@(Html.Kendo().Grid<MyProject.ViewModels.SpotGridViewModel>()

.Name("Grid")

.Deferred()

.Columns(columns =>

{

columns.Bound(c => c.vessel_idx);

columns.Template(@<text></text>)

.ClientTemplate("<ul class='grid-options'>" +

"<input type='button' id='mybtn' value='Prompt' />"+

"</ul>").Width(200);

})

)

Here is my javascript code that I need to pass the vessel_idx into

$("#Grid").on("click", "#mybtn", function (e) {

var id = vessel_idx;

$.ajax({

url: "@Url.Action("buttonPrompt", "Home")",

type: "GET",

data: { id: id },

dataType: 'json',

cache: false,

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert("Error" + errorThrown);

console.log(errorThrown);

},

success: function (data) {

console.log("yay");

}

});

Many thanks

Grid

answered on 17 May 2016

1 answer

432 views

Limit TreeView depth during drag and drop

I have two TreeViews which have drag and drop enabled. I am trying to limit the depth when someone tries to drag a branch to the other tree.

Example:

TreeA (root)

TreeA.1.0 (child; level 1)

TreeA.1.1 (child; level 2)

TreeB (root)

TreeB.1.0 (child; level 1)

TreeB.1.1 (child; level 2)

Given the above two trees and I desire to only have nodes up to 3 levels deep (ie. no deeper than child level 2) If a user drags "TreeB.1.0" under "TreeA.1.1" then TreeA will have children 4 levels deep.

I see events Drag and Drop which allow me to validate the destination tree to prevent this. I tried to implement custom data elements as HtmlAttributes in my OnDemand TreeViewItemModel DataSource in server-side code:

TreeViewItemModel node = new TreeViewItemModel();

...

node.HtmlAttributes.Add(new KeyValuePair<string, string>("data_level", level.ToString()));

This

TreeView

answered on 16 May 2016

1 answer

128 views

Using MultiSelect (Single Mode) attempting to create a .TagTemplate using maxTotal or currentTotal

I'm looking to get the MultiSelect list to display something like "1 out of 15" But when using the "maxTotal" found here tagTemplate, I get "maxTotal is not defined"

1.<script type="text/x-kendo-template" id="selectedRoleTemplate">

2. #:data.length# out of #:maxTotal#

3.</script>

4.<script type="text/javascript">

5. var selectedRoleTemplate = kendo.template($("#selectedRoleTemplate").html(), { useWithBlock: false });

6.</script>

01.@(Html.Kendo().MultiSelectFor(m => m)

02. .AutoBind(true)

03. .AutoClose(false)

04. .DataValueField("RoleId")

05. .DataTextField("RoleName")

06. .TagMode(TagMode.Single)

07. .TagTemplate("#=selectedRoleTemplate()#")

08. .DataSource(dataSource =>

09. {

10. dataSource.Read(read => read.Action("UserRoleList", "Lov", new { userId = -9, isActiveOnly = false}))

11. .ServerFiltering(false);

12. }))

MultiSelect

answered on 14 May 2016

2 answers

243 views

Access Scheduler Resources in Event Template

Hi,

Is there a way to access scheduler resources inside the Event Template?

For instance:

Course Resource - List of courses with CourseID and CourseTitle.

Event Template -

.EventTemplate(
"<div style=color:#:setTextColor(data)#>" +
"<h4>Course: #= CourseTitle # </h4>" +
"<h5>Class: #= title # </h5>" +
"</div>"
)

"<h4>Course: #= CourseTitle # </h4>" would be returned by the foreign key ID from the viewModel record to the Course Resource primary key.

Scheduler

answered on 13 May 2016

3 answers

495 views

MVC Menu not rendering items with areas

I'm currently working on a .NET MVC app with one area, Inside, and then a single controller on the root area, Home. What I'm noticing is something somewhat similar to what is discussed in this post; I have a Home controller in both my root and Inside areas, and when the menu attempts to render the links to the root actions while at an Inside url, such as /Inside/Account/Login, the links to any Home actions which are present in both the Inside and root areas are not rendered. I noticed that if I take away the [Authorize] attribute on my Inside Home controller, the actions do render properly i.e. /Home/Index is rendered. However, I want to make sure that my inside controllers are decorated with the Authorize attribute.

For example, with the following code snippet

// Root Home Controller

public class HomeController : Controller {

// Doesn't render

public ActionResult Index() { return View(); }

// Doesn't render

public ActionResult Contact() { return View(); }

// Renders

public ActionResult About() { return View(); }

}

// Inside Home controller

[Authorize]

public class Home : Controller {

public ActionResult Index() { return View(); }

public ActionResult About() { return View(); }

}

// /Inside/Account/Login View snippet

@(Html.Kendo().Menu().Name("MainMenu").Items(children =>

{

items.Add().Text("Root Home").Action("Index", "Home", new { area = "" });

items.Add().Text("Root Contact").Action("Contact", "Home", new { area = "" });

items.Add().Text("Root About").Action("About", "Home", new { area = "" });

items.Add().Text("Login").Action("Account", "Login", new { area = "Inside" });

}))

if I go to /Home/Index or /Home/Contact I get a menu the menu you would expect (as seen in Correct.png), whereas if I go to /Inside/Account/Login, I get a menu with only the About and Login buttons (as seen in Incorrect.png). My guess is that the Telerik Menu rendering function is attempting to security trim [Authorize] decorated action links with identical names disregarding the area in which the action was specified.

I'm wondering if there is a better way around this bug than to decorate my Inside.Home.Index/Contact actions with [AllowAnonymous] and using a redirect to the root area if a user is not authenticated.

Menu

answered on 13 May 2016