Questions on Kendo UI for jQuery Forum

1 answer

179 views

[Solved] NoRecord Properties in the MVVM

i'd like to do this with MVVM.

<div id="grid"></div><script> $("#grid").kendoGrid({ columns: [{ field: "name" },{ field: "age" }], pageable: true, noRecords: { template: "No data available on current page. Current page is: #=this.dataSource.page()#"}, dataSource: { data: [{name: "John", age: 29}], page: 2, pageSize: 10}});</script>

How i write this (noRecords) in the mvvm?

no-data-records?

data-no-data-records?

or

data-noData-records?

Grid

answered on 05 Oct 2017

4 answers

1.3K+ views

how can I do custom validation before upload?

in my customized (multiple photos) upload, I preview each photo that user uploaded and have a drop down list for each photo, this drop down list lets user select photo type. Each photo needs a different type. When user click 'upload' button, how can I check that these photos are of different type? I noticed the onUpload() event handler is triggered for EACH photo, so I cannot put this check in onUpload(). I cannot user async.batch mode either, since I'm not able to show the preview of those photos.

Upload

answered on 05 Oct 2017

3 answers

223 views

Programmatic template binding with source

Hello,
1) have where and external template are The is bind to that The script inside template has div with no data-bind specified. In want to make ajax call to get data source and bind that data to how to do that, since new data is not part of viewModel?

2) if we specify kendo.bind() statement in javascript we need to write data-bind="source: x" in div attribute right? either one of them should be written or both are

MVVM

answered on 04 Oct 2017

1 answer

158 views

IE 11: pasting large image results in browser freeze

Pasting a large (>500kb) image into the editor in IE 11 renders the browser frozen for a significant time.

To reproduce:

1. Go here: http://demos.telerik.com/kendo-ui/editor/index

2. Open any image greater than 500kb in MS Paint. A larger image will make the problem worse.

3. Select all and copy the image.

4. Paste into the demo editor.

On my i7 machine, this takes around 24 seconds to unfreeze, and then the image is pasted normally. No other browsers exhibit this behavior.

After digging through the Editor source code, and placing timers in several locations within the "paste" function, I found that there is quite a bit of DOM manipulation going on, without the clipboard content being validated in any way.

My question is this: what is the best way to stop the execution of the paste function based on the size of the clipboard data? Is there something already within the Editor API that I'm missing? PasteCleanup doesn't fire until after the paste event, so a custom function there doesn't help. What I really need is something like a maxPasteSize option in the Editor instantiation, that will reject anything over that without manipulating the DOM.

Editor

answered on 04 Oct 2017

4 answers

921 views

How to use paging and filtering in angular 2

Hi everyone,

I am beginner and I am trying to generate a grid and I would like that my grid would have the options of sorting, paging and filtering, so I have been trying to achieve it without a good result unfortunately.

1- At the moment I can sorting but I can't pass to the next page in the grid.

2 - I got two button in the grid to call functions and I don't know how to show them and extract a specific id from the array data

3 - I would appreciate as well if someone can send me any tutorial or samples about filtering mixed with the rest of the options.

The telerik code is in the next route:
SolucionCore2\Core2.WebApi\ClientApp\app\components\arboles\registro

Here is my project: Download

Thanks in advance and Kind Regards

General Discussions

answered on 04 Oct 2017

3 answers

1.8K+ views

Hide Label when all values are zero or null

Hi,

I was wondering if there is a way of hiding a label if all the values in that series are either zero or null? For example I've got a test block of code below:

@(Html.Kendo().Chart(Model)

.Name("ChartTest")

.Legend(l => l.Visible(true))

.Series(series =>

{

series.Column(x => x.WebSite01);

series.Column(x => x.WebSite02);

series.Column(x => x.WebSite03);

series.Column(x => x.WebSite04);

series.Column(x => x.WebSite05);

series.Column(x => x.WebSite06);

series.Column(x => x.WebSite07);

series.Column(x => x.WebSite08);

series.Column(x => x.WebSite09);

}

)

.SeriesDefaults(s => s.Column().Stack(true))

.Legend(l => l.Position(ChartLegendPosition.Bottom))

.CategoryAxis(axis => axis

.Categories(model => model.ChartDateStamp)

.MajorGridLines(lines => lines.Visible(false))

.Labels(l =>

{

l.Format("MM/yy");

l.Rotation(90);

})

)

.Tooltip(t => t

.Visible(true)

.Color("#FFFFFF")

.Background("#0000CC")

.Template("${series.name} : #= kendo.toString(value, 'n') #")

)

This is all fine and works as I'd expect however in my test data WebSite02 is all NULL and WebSite06 is all 0.00 value so there is no point in showing this information on a label, see the diagram attached. What I would like to do is hide the label for Website02 and Website06 as they will clutter the chart and in my real world example I could have 70+ items in there!

I've tried doing this from Javascript but run into issues getting a tool tip working as well as putting custom labels in under the chart so due to time constraints am settling with this way for this version.

If it helps, I've also included a screen grab of the raw data.

Thanks in advance
Mike

Charts

answered on 04 Oct 2017

1 answer

126 views

[Solved] viewModel.attr vs. viewModel.get('attr')

Hi,

When retrieving data from a model whats the difference between using "viewModel.attr" and "viewModel.get('attr')" ?

Both return the same object.

Thanks,
Grant

MVVM

answered on 04 Oct 2017

4 answers

2.1K+ views

Want to add dropdownlist in my grid

Hi,
I want to add dropdownlist list of Role field to my grid cell.
Currently I am using ASP.NET MVC3 RAZOR engine.

I have a template. When it is executed, RoleName field is displayed as label in grid cell which should be displayed as drop down list.

_RoleDropDown.cshtml
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

@(Html.Kendo().DropDownList()
.Name("RoleName")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem {Text = "Admin", Value = "Admin"},
new SelectListItem {Text = "User", Value = "User"}
}))
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

My current view is as follows.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

@model List<TssPlog.Models.User>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/AdminLayout.cshtml";
}

<div>
<fieldset>
<legend>Logs</legend>
<p></p>
@{

Html.Kendo().Grid(Model)
.Name("UserGrid")
.Columns(
columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.Ntid);
columns.Bound(p => p.RoleName).EditorTemplateName("_RoleDropDown");
columns.Bound(p => p.Phone);
columns.Bound(p => p.EmailAddress);

}
)

.Pageable(ps => ps.Refresh(true)
.PreviousNext(true).PageSizes(true))
.Sortable()
.Editable(m=>m.Mode(GridEditMode.InCell))
.ToolBar(toolbar=>toolbar.Save().SaveText("Save").CancelText("Cancel"))
.Selectable(s => s.Enabled(true)
.Type(GridSelectionType.Row)
.Mode(GridSelectionMode.Single))
.Filterable()

.DataSource
(dataSource => dataSource
.Ajax()
.Batch(true)
.Read(read => read.Action("UsersRead", "AdminUserAdministration"))
.Update(update => update.Action("UsersUpdate", "AdminUserAdministration"))
.PageSize(5)
.ServerOperation(false)
.Model(model => { model.Id(p => p.UserId); model.Field(p => p.UserId).Editable(false); }
)
).Render();


}

</fieldset>
</div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

and my controller is as follows.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TssPlog.Models;

namespace TssPlog.Controllers
{
public class AdminUserAdministrationController : Controller
{
//
// GET: /AdminUserAdministration/
public ActionResult Index()
{
var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
PopulateRoleNames();
return View(userManager.GetAllUser());
}

public ActionResult UsersRead([DataSourceRequest] DataSourceRequest request)
{
var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
return Json(userManager.GetAllUser().ToDataSourceResult(request));
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UsersUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<User> users)
{
if (users != null && ModelState.IsValid)
{
foreach (var user in users)
{
var userManager = new UserManager();
userManager.UpdateUser(user);
}
}

return Json(ModelState.ToDataSourceResult());
}

}
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Best regards
Parvez Nawaz

Grid