Questions on UI for ASP.NET MVC Forum

1 answer

589 views

get a list of all items in the datasource

Hello,

Here is my scenario. I have a grid populated by an ajax call.
The grid may or may not be paginated.
The user can apply filters, sorts, whatever.
I need to be able to get a list of all the rows in the grid ( not just on the visible page ).
Basically an export of the state of the grid taking into consideration all the user actions.

What's the best way to do this ?

Grid

answered on 20 Mar 2014

2 answers

611 views

[Solved] Kendo Editor ImageBrowser restrict max image size

I need to restrict the size of the image file in Kendo Editor ImageBrowser. The project is similar to the demo http://www.telerik.com/clientsfiles/e3e38f54-7bb7-4bec-b637-7c30c7841dd1_KendoEditorImageBrowser.zip?sfvrsn=0 .

Image browser has a possibility to use filtering by file extension http://docs.telerik.com/kendo-ui/api/web/editor#configuration-imageBrowser.fileTypes, but there is no similar way to set the maximum image file size.

I tried to set change and select events for ImageBrowser as here Kendo UI Editor - open event , but they were never invoked.

The difficult things are:
1) is created on fly, it is hard to set “change” event
2) even if that event is set, on e.preventDefault() kendo image browser still sure it was uploaded and tries to get the preview image from controller.

The thing I did was: trying to find that input control when each element is inserted to document. Once I found it, I marked it as hooked, to avoid hook it twice:

function restrictUpload(e) {

try {

var files = e.target.files;

var len = files.length;

var totalSize = 0;

for (var i = 0; i < len; ++i) {

totalSize += files[i].size;

}

if (totalSize > 1024 * 1024) {

alert("You can add images less than 1MB size only");

e.preventDefault();

}

catch (err) {

console.log("err.message " + err.message);

}

function initUploadRestrict() {

try{

var inputControl = $('input[name=file][type=file][data-role=upload]');

console.log("inputControl.length= " + inputControl.length);

if (0 !== inputControl.length &&

inputControl.data("HookedRestrictUpload") !== true)

{

inputControl.change(restrictUpload);

inputControl.data("HookedRestrictUpload", true);

}

} catch (err) {

console.log(err.message);

}

$(document).bind('DOMSubtreeModified', function () {

console.log("DOMSubtreeModified call");

initUploadRestrict();

})

I know this is wrong solution, because ImageBrowserController.Thumbnail is still invoked and the image still tries to appear in preview. Another con: DOMSubtreeModified is executed for hundreds times.

How to make Kendo ImageBrowser to restrict upload of images by file size in correct way?

Thanks

Editor

answered on 19 Mar 2014

5 answers

248 views

[Solved] Editor + input focus in Window IE8-10

I found problem with focus in kendo Editor that is opened in Kendo window in IE8-10.
I have Grid with Popup editor that contains text input (name) and kendo editor (text).

If i close the windows and focus is inside Kendoui editor and open the window again i can't click on any input(both text and name) at all. It just doesnt get focus (same as this http://www.kendoui.com/forums/mvc/editor/editor-issues-with-firefox-17.aspx, but was not resolved same way).
Odd thing is that if I press Tab key several times and than click on any input or editor - it works.

I'm using build from yeasterday, but it was present in last builds as well.

Editor

answered on 19 Mar 2014

1 answer

171 views

Cannot set initial values from viewmodel

Hello,

When i bind the Multiselect list to ViewBag the list renders fine. However the "Values" property never gets set. I have tried with IEnumerable object as well as list<string> or string[] of ids. I cannot find any help online. When i post the viewmodel does post selected values.
I have also played with Autobind true and false

Here is the code

@{

Html.Kendo().MultiSelectFor(model => model.ActivityIds)

.BindTo(new SelectList(ViewBag.Activity, "ActivityId", "ActivityName"))

.Value(new SelectList(ViewBag.SelectedActivites, "ActivityId", "ActivityName"))

.Placeholder("Select Activity ..")

.HtmlAttributes(new { style = "width: 800px;" })

.Render();

}

ViewBag.Activity = db.GetActivityList(Constants.APP_SC).ToList();

if(smallCellViewModel.HasValue() && smallCellViewModel.ActivityIds.HasValue())

{

ViewBag.SelectedActivites = db.GetActivityList(Constants.APP_SC).Where(c=>smallCellViewModel.ActivityIds.

Contains(c.ActivityId)).ToList();

}

MultiSelect

answered on 19 Mar 2014

1 answer

651 views

Kendo ComboBox is not display error in validation summary

I am able to display validation messages in our validation summary for any standard html control (textbox, drop down, etc).
When I replace my drop down with a Kendo ComboBox, the validation error will display next to the combobox, but will not display within the validation summary. Is there something the needs to be done to get the ComboBox behave the same as the other controls on the page?

Please see the example view below. I have two html textboxes, a kendo combobox, and a standard html drop down. The two html textboxes and the drop down display validation messages within the summary as well as next the field. The Kendo ComboBox validation message only displays a message next to the field - it's message does not appear in the summary.

@{
ViewBag.Title = "Home Page";
}
@model ValidationSummaryComboBox.Models.Customer
　
@section featured {
<div class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</div>
}
@using (Html.BeginForm())
{
@Html.ValidationSummary(false, "Fix these errors, please:")
@Html.TextBoxFor(m => m.FirstName)
<br />
@Html.TextBoxFor(m => m.LastName)
<br />

@( Html.Kendo().ComboBox()
.Name("FavoriteColor")
.Value(Model.FavoriteColor)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{ new SelectListItem() { Text = "Blue", Value = "1" },
new SelectListItem() { Text = "Red", Value = "2" },
new SelectListItem() { Text = "Green", Value = "3" },
new SelectListItem() { Text = "Yellow", Value = "4" } }))

<br />

@Html.DropDownListFor(m => m.FavoriteFood, new List<SelectListItem>()
{ new SelectListItem() { Text = "", Value = "" },
new SelectListItem() { Text = "Pizza", Value = "1" },
new SelectListItem() { Text = "Steak", Value = "2" },
new SelectListItem() { Text = "Raspberries", Value = "3" },
new SelectListItem() { Text = "Ice Cream", Value = "4" }})
　
<br />
<br />
<input type="submit" value="Save" id="save" class="k-button" />

<br />
}
　
<script>
// Initialize the Kendo UI Validator on your "form" containervar validator = $('form').kendoValidator().data("kendoValidator");
</script>

Please advise.
Thanks!

ComboBox

answered on 19 Mar 2014

1 answer

250 views

Force load and expand of node with LoadOnDemand(true)

I'm trying to force the load and expand of a node when using LoadOnDemand. I've seen several examples of this in the forums, but I can't get it to work. This is my code:



var tv = $("#FolderTree").data('kendoTreeView');
 
var selectedItem = tv.dataItem(tv.select());
 
var selectedDataItem = tv.dataItem(tv.findByUid(selectedItem.uid));
 
selectedDataItem.loaded(false);
 
selectedDataItem.load();
 
tv.expand(selectedItem)

The children are being retrieved from the server, but the node is not expanded and the children of the node (which I'm trying to access) are not available in the datasource.

Why is the node not expanding?

Thanks in advance.

TreeView

answered on 19 Mar 2014

1 answer

274 views

'HasChildren = false' ignored

I have the following declaration:

@(Html.Kendo().TreeView()

.Name("FolderTree")

.TemplateId("treeviewtemplate")

.Events(e => e

.Select("tvOnSelect")

.DataBound("tvOnDataBound")

.DragEnd("tvOnDragEnd")

)

.BindTo(Model.Folders, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>

{

mappings.For<PriMate.Web.Models.FolderModel>(bound => bound.ItemDataBound((node, item) =>

{

node.Text = item.name;

node.Id = item.id.ToString();

node.HasChildren = false;

})

.Children(item => item.folders));

})

)

I want to override the 'HasChildren' property with a property from my own model/class and display an image next to the tree item if HasChildren is false. This is my (part of) my template:

# if (item.hasChildren) { #

<input type="image" src="Content/images/trash.png" class="delete-node" onclick="return confirmDelete('folder', '${item.text}', '${item.id}')" title="delete ${item.text}">

# } #

However, I've noticed that:

1. When the property is hard-coded true, it behaves as expected - the image is hidden for all nodes
2. When the property is hard-coded false, it is ignored, and the image is shown only if the the node does not have children (default)
3. When I set the property using my own class property, (node.HasChildren = item.hasChildren;), all images are hidden, despite the fact that this bool value varies.

Is it possible to override this property successfully? If not, can I add my own custom fields to the mappings?

TreeView

answered on 19 Mar 2014

6 answers

134 views

[Solved] Basic Question.

index.cshtml

@(Html.Kendo().MobileView()
       .Title("Scroll down to load")
       .Content(obj =>
            Html.Kendo().MobileListView<Tree.Models.TreeDBModel>()
                .Name("endless-scrolling")
                .TemplateId("template")
                .EndlessScroll(true)
                .ScrollTreshold(30)
                .Filterable(filter =>
                        filter.Field("Name")
                    .Operator("startswith")
                )
                .DataSource(ds =>
                {
                    ds.Read(read =>
                        {
                            read.Action("TReeList_Read", "TreeDB");
                        });                })))
<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <h3>#:Name#</h3>
    </div>
</script>

Controller(public class TreeDBController : Controller)
        public ActionResult TReeList_Read([DataSourceRequest] DataSourceRequest request)
        {
            IQueryable<TreeDBModel> query = from c in db.TreeList
                                            select new TreeDBModel
                                            {
                                                ID = c.GeoId,
                                                Name = c.Name,
                                                Unit = c.Unit,
                                                GeoID = c.GeoId,
                                                Price = c.Price,
                                                MaxPrice = c.MaxPrice,
                                                qty = c.Qty,
                                                CompanyName = c.Geo.CompanyName,
                                                Phone = c.Geo.Phone
                                            };            return Json(query.ToDataSourceResult(request));         }

output.html
<!DOCTYPE html>
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title> - test </title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>        <script src="/Scripts/modernizr-2.6.2.js"></script>    



    <link href="/Content/kendo.compatibility.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.bootstrap.min.css" />


    <script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.aspnetmvc.min.js"></script>



<script src="/Scripts/kendo.modernizr.custom.js"></script>
</head>
    <body>

            <div class="content-wrapper">
                <div class="float-left">
                    <p class="Menu"></p>
                </div>
                          <div class="float-right">
                    <section id="login">
                            <ul>
        <li><a href="/Account/Register" id="registerLink">register</a></li>
        <li><a href="/Account/Login" id="loginLink">login</a></li>
    </ul>
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">geo</a></li>
                            <li><a href="/TreeDB">search</a></li>
                            <li><a href="/Home">about</a></li>                                                    </ul>
                    </nav>
                </div>
            </div>

        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<div data-reload="false" data-role="view" data-stretch="false" data-title="Scroll down to load" data-use-native-scrolling="false" data-zoom="false"><div data-role="content"><ul data-endless-scroll="true" data-filterable="{"autoFilter":true,"field":"Name","ignoreCase":false,"operator":"startswith"}" data-role="listview" data-scroll-treshold="30px" data-source="{"transport":{"prefix":"","read":{"url":"/TreeDB/TReeList_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"number"},"Name":{"type":"string"},"Unit":{"type":"string"},"qty":{"type":"number"},"Price":{"type":"number"},"MaxPrice":{"type":"number"},"GeoID":{"type":"number"},"CompanyName":{"type":"string"},"Phone":{"type":"string"}}}}}" data-template="template" id="endless-scrolling"></ul></div></div>
<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <h3>#:Name#</h3>
    </div>
</script>            </section>
        </div>        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© 2014</p>
                </div>
            </div>
        </footer>



<script type="application/json" id="__browserLink_initializationData">
    {"appName":"InternetExplorer","requestId":"55ca8e2b6c0349f29d26a3b9859d41d5"}
</script>
<script type="text/javascript" src="http://localhost:9308/1da8a992d4e74d81818c2cf92074605d/browserLink" async="async"></script>
</body>
</html>

ListView (Mobile)

answered on 19 Mar 2014

3 answers

411 views

[Solved] Filtering/sorting on bit flag column

Hi,

I'm trying to find out whether Kendo supports filtering and sorting operations (client side) on bit flag columns (i.e enums with the [Flags] attribute).

We'd like to have one column that displays several different icons depending on which bits are set in the column. This can be accomplished easily with a client template, but filtering looks more complex. By default, it looks like Kendo will try and set "equal to" as the operator in the generated filter expression, when we really need a logical and to return records with the selected flag bits set. I've dug through the source code a bit and it doesn't seem that filter expressions can support logical and or logical or as the operator for a single filter (I am not talking about the logic used to combine multiple filters). Is this correct, or is there something I've overlooked?

Thanks,
Nick

Grid

answered on 18 Mar 2014

0 answers

161 views

popup editortemplate dropdownlist selectedindex

Dear Telerik Team,
I'm actually using a Grid with popup edit and an editor template which contains a dropdownlist that looks like this:

@(Html.Kendo().DropDownListFor(model => model.Table)

.OptionLabel(@GeneralConstants.SELECT_VALUE)

.HtmlAttributes(new { style = "width: 200px", id = "TableDropDown", required = "required" })

.SelectedIndex(1)

.Enable(false)

.AutoBind(true)

.Name("Table")

.DataTextField("Name")

.DataValueField("TableID")

.Events(e =>

{

e.Change("onChange");

e.DataBound("bound");

})

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetRegExpressions", "Pattern");

})

.ServerFiltering(true);

})

)

The property Table is an object of type Expressiontable which contains a TableID and a Name. It is disabled, because the value coming out of the database shouldn't be edited.

The thing now is: when the create/update button is clicked the controller doesn't receive the value of the Table property which is delivered as null.
How can I avoid this issue?

Any advice would be helpful.
Thanks in advance and kind regards
Tom

Grid

asked on 18 Mar 2014