Questions on UI for ASP.NET MVC Forum

1 answer

109 views

Issue on column Menu and column reorder functionality

I found an issue and could not find on forums if anyone else has reported it. The steps are these

1. Grid with column reorder and column menu

2. On a column open the column menu to show/hide columns

3. Reorder the grid columns

4. Open the column menu for the same column => the columns in menu are in the initial state (before reorder)

5. Open column menu for any other column => the columns menu is in the correct state (after reorder)

Questions:

Is this issue going to be fixed in framework? If not is there a workaround for this issue?

On related note: Is there available a custom Widget that simulates the Show/Hide columns menu (having the visibility columns outside of the grid on a button related to this thread Add ColumnMenu To Custom Toolbar On Telerik MVC Grid).

Grid

answered on 26 Jul 2017

1 answer

680 views

DropDownList stays empty

I've tried using Ajax Binding (and also ToDataSourceResult Binding) from this article to populate a DropDownList. I copy/pasted the exact code from the article into my solution. The GetProducts method on the controller returns 78 products, yet the DropDownList stays empty.

What am I doing wrong?

Controller

public JsonResult GetProducts()

{

NorthwindDataContext northwind = new NorthwindDataContext();

return Json(northwind.Products, JsonRequestBehavior.AllowGet);

}

View

@(Html.Kendo().DropDownList()

.Name("productDropDownList")

.DataTextField("ProductName")

.DataValueField("ProductID")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetProducts", "Home");

})

.ServerFiltering(true);

})

.SelectedIndex(0)

)

DropDownList

answered on 25 Jul 2017

1 answer

155 views

Mneu popout not showing

I am using the MVC Menu component, and I am using is in a slide out div. So hit a menu button, a div slides out from the side of the screen, showing menu choices. However, the menu itself (with a Vertical Orientation) fills up the entire div, and submenu items are not showing up because I assume they're being cut off by the div. I have tried setting an HtmlAttriibutes on the main menu itself, with a style of z-index: 1000 to ensure it's the top most, but that doesn't work. I've also tried using PopupCollisions to false, but I guess that's for something else entirely.

So my question is, if a menu is part of a popup or slide out div, how to ensure sub menu items get displayed, and secondly, where do I put in the URLs for these menu items? All the demos only show the menus, but not what should happen when a menu is clicked?

Menu

answered on 25 Jul 2017

1 answer

362 views

Html.ActionLinks in TreeView Template

Hey guys,

I have a solution for adding Html.ActionLink to the Template of a TreeView control. I searched everywhere for something similar and I was unable to find it, so I'm going to post it here in hopes that it might help others in the same predicament.

I am using the razor pages for my implementation so I, for the most part, setup my TreeView control exactly like the Remote Data Binding demo found here: http://demos.telerik.com/kendo-ui/web/treeview/remote-data.html

My Tree View control looks like this:

<div>

@(Html.Kendo().TreeView()

.Name("treeview")

.DataTextField("DisplayValue")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("CategoryTree", "Category")

)

</div>

In my case, I wanted to add a couple of Action Links to the end of each item, in this categories. The purpose of the action link was to navigate to a screen to allow the user to edit the items in the category tree. I searched everywhere but could not find a way to do this. I even came across a few posts stating that this was not possible.

I chose to use .Template() to add the action links.

Here's what I added to my tree to add an action link.

.Template("#: item.DisplayValue # " + @Html.ActionLink("Update", "Update", new { id = "newId" })

.ToHtmlString().Replace("newId", "#: item.id #"))

After I added one, I added a second that would navigate to another page. My final tree view control looks like this:

<div style="padding-top: 10px;">

@(Html.Kendo().TreeView()

.Name("treeview")

.DataTextField("DisplayValue")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("CategoryTree", "Category")

)

.Template("#: item.DisplayValue # " + @Html.ActionLink("Update", "Update", new { id = "newId" })

.ToHtmlString().Replace("newId", "#: item.id #") + " | " + @Html.ActionLink("Deactivate", "Deactivate", new { id = "newId" })

.ToHtmlString().Replace("newId", "#: item.id #"))

)

</div>

I hope this helps someone out because it's not documented anywhere.

Cheers!

TreeView

answered on 24 Jul 2017

1 answer

121 views

Unable to Set Dimensions of Window

Hello,

I'm trying to set the width of a Kendo window I am using, and have so far been unable to get it to work. I've attached my code below, and I've bolded the three different places where I have tried setting the width (lines 7, 14, and 21) --so far, none of these individually or combined have created any effect on the width of the window.

Am I missing something here?

Thanks!

01.@(Html.Kendo().Window()

02. .Name("preview")

03. .Title("Preview")

04. .Visible(false)

05. .Modal(true)

06. .Draggable(true)

07. .Width(100)

08.)

09.

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

11.

12. function openPreview(storyID) {

13. $("#preview").kendoWindow({

14. width: 100

15. });

16. var dialog = $("#preview").data("kendoWindow");

17.

18. dialog.refresh({

19. data: { storyID: storyID },

20. url: "@Url.Action("Preview", "Home")",

21. width: 100

22. });

23.

24. dialog.center().open();

25. }

26.</script>

Window

answered on 24 Jul 2017

2 answers

149 views

Mvc Based Implementation of Existing Thread

Here is the existing thread link http://www.telerik.com/forums/how-to-change-command-buttons-dynamically-in-data-bound-event#KRtpAM_XoEeiI-UCwgwzsw

and here is my fiddle http://jsfiddle.net/valchev/Q69by/18/

I want to implement this using MVC using razor syntax . Please help

Thanks

Grid

answered on 24 Jul 2017

3 answers

2.7K+ views

NumericTextBox for percentages with 3 decimals

I'm trying to use the NumericTextBox for values that are percentages, with three decimal points. How do I format it so it displays properly? I tried using .Decimals(3) but it still only displayed with two decimal numbers. For example, 34.567 displayed as 34.57... And it should also be a percentage, allowing only values up to 100.000

Here is what I have

@(Html.Kendo().NumericTextBox<decimal>()

.Name("adminFee")

// .Format("p") commented out since it didn;t appear to work

.Min(0)

.Max(100)

.Decimals(3)

.HtmlAttributes(new { style = "width: 100%", data_bind="value: AdminFee" })

)

NumericTextBox

answered on 24 Jul 2017

1 answer

223 views

Additional Data callback not sending combobox reference parameter to function

According to your docs:

http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview#parameter-sending-to-server

There is a default event handler for the Data callback of the datasource. This event handler passes a reference to the combobox firing the event that can be resolved by running ".data("kendoComboBox")" against it.

However if I manually hookup the same function, I get an error when typing something into the combox, because the "selector" parameter isn't actually a combobox.

http://dojo.telerik.com/iPeca/3

It appears to be a bug?

I am trying to create a Data function that sends a reference to the combobox calling it as a parameter. And I cannot use strict ID selectors, because all my comboboxes have ID's that are generated dynamically at runtime.

ComboBox

answered on 24 Jul 2017

12 answers

1.9K+ views

Basic Upload not working

So I'm doing something fairly simple. Using the Upload component... Here is my View code:

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<div style="width: 45%">

<form method="post" id="csvForm" action='@Url.Action("Result", "Home")'>

<div class="k-content">

@(Html.Kendo().Upload()

.Name("files")

.Multiple(false)

)

<span class="k-invalid-msg" data-for="files"></span>

<p></p>

<div style="text-align: right">

@(Html.Kendo().Button()

.Name("submit")

.Content("Upload")

.HtmlAttributes(new { type = "submit", @class = "k-button k-primary" })

)

</div>

<div id="status"></div>

</form>

</div>

And my controller is also simple:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using BankFTP.Attributes;

namespace BankFTP.Controllers

{

[MustBeAuthorized]

public class HomeController : Controller

{

// GET: Home

public ActionResult Index()

{

return View();

}

public ActionResult Result(IEnumerable<HttpPostedFileBase> files)

{

if (files == null) { return RedirectToAction("Index"); }

HttpPostedFileBase file = files.ToArray()[0];

string thisFile = file.FileName;

FileInfo thisFileInfo = new FileInfo(thisFile);

return View();

}

Nothing much to it really, and matches what the Basic Demo shows, except the IEnumerable<HttpPostedFileBase> parameter to the Action has a Count of 0, even though a file is chosen before pressing the Upload button. I know this should be fairly simple, and I've done it before, but I just don;t know what I'm missing here...

Upload

answered on 23 Jul 2017

1 answer

125 views

How the selected text, plus a custom CSS

http://demos.telerik.com/aspnet-mvc/editor/custom-tools
Samble is update body css.
But I need is for the selected text, plus a custom CSS style or cancel the style.

Editor

answered on 21 Jul 2017