Questions on UI for ASP.NET MVC Forum

1 answer

1.1K+ views

Validation in Popup Edit Template

Hello,

I'm not sure that I understand validation in the grid popup edit...

By default here is Kendo Validation used based on Data Annotations - right?
Remote Validation is not possible with Kendo Validation?
if yes why not supporting this major Feature
is it possible to disable/Change the popup edit Validation to jQuery so that I an use Remote Validation?

robert

Grid

answered on 07 Mar 2017

6 answers

955 views

Grid Icons Changed

My app has progressed amazingly well, so I figured I'd create some chaos and update my Telerik MVC components. I went from 2016.3.1118 to 2017.1.223 and the resulting chaos was actually pretty minimal. Except for one thing, and I cannot quite seem to figure it out. My grid column header icons, for selecting columns and setting filters has changed from a black icon depicting 3 horizontal lines to what appears to be a blue arrow point upwards towards a dot. I've attached a screenshot.

My question is, how do I get my regular icons back because I certainly do not like these new ones at all, and neither do my users.

Grid

answered on 06 Mar 2017

2 answers

783 views

Grid will not tab to next field

I have a kendo grid set up for batch mode, GridEditMode.InCell. After entering data in any field and pressing 'Tab', the 'Delete' key gets focus. The editing example in the Kendo.Mvc.Examples source exhibits the same behavior.

The online batch editing example (http://demos.kendoui.com/web/grid/editing.html) tabs to each field correctly. My view is set up like the online demo.

Is there a setting I'm missing to allow this behavior?

Thanks,

Jerry

Grid

answered on 06 Mar 2017

9 answers

1.4K+ views

How to add a linear gauge/ progress bar in an kendo mvc grid column

Hi,

Can anyone help me with this:

How to add a linear gauge/ progress bar in an kendo mvc grid column

I couldn't find any sample for it

Grid

answered on 06 Mar 2017

4 answers

240 views

ColorPicker throws an error when cancelling changes in a grid

Hi,

I have a grid has its edit mode set to GridEditMode.InlineCell, and when I click on a particular cell I show a ColorPicker.

My grid definition is as follows:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.Item>()

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.Id))

.Read(read => read.Action("GetItems", "Home"))

.Update(up => up.Action("UpdateItems", "Home")).Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.Id).Editable(false);

model.Field(p => p.Color).Editable(true);

})

)

.Columns(columns =>

{

columns.Bound(c => c.Id).Width(200);

columns.Bound(c => c.Color).ClientTemplate("#= Color # <div style='background-color: #= Color #; padding:10px;'></div>"); ;

})

.Pageable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Events(e => e.Edit("onEdit"))

)

The grid onEdit event is as follows:

function onEdit(e) {

if (e.container.index() === 1) {

var grid = e.sender;

var colourPicker = $("#Color").data("kendoColorPicker");

var originalColour = e.model.Color;

colourPicker.bind({

close: function () {

var newColour = this.value();

console.log("old colour = " + originalColour + ", new colour = " + newColour);

if (newColour !== originalColour) {

console.log("colour has changed");

grid.saveChanges();

}

else {

console.log("colour has not changed");

grid.cancelChanges();

}

});

colourPicker.open();

}

The model bound to the grid is as follows:

public class Item

{

public int Id { get; set; }

[UIHint("ColorEditor")]

public string Color { get; set; }

}

The ColorEditor template is defined as follows:

@(Html.Kendo().ColorPicker()

.Name("Color")

.Value("#=Color#")

)

When the ColorPicker is displayed, I choose a colour, click Apply and then call saveChanges() on the grid so that I can update some data on the server. That all works fine.

The problem I have is that if I click Cancel (or click Apply without changing the color) I want to change the grid so that it is no longer in edit mode. I attempt to do that calling cancelChanges() on the grid. The call to cancelChanges() results in this error being thrown:

Uncaught TypeError: Cannot read property 'children' of null

at init.close (kendo.all.min.js:24)

at init.trigger (kendo.all.min.js:9)

at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)

at init._trigger (kendo.all.min.js:20)

at init.close (kendo.all.min.js:20)

at init.close (kendo.all.min.js:24)

at init.cancel (kendo.all.min.js:24)

at init.trigger (kendo.all.min.js:9)

at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)

at init._cancel (kendo.all.min.js:24)

Am I going about this the wrong way?

I have been able to reproduce this error with versions 2014.3.1411.545, 2015.3.1111.545 and 2017.1.223.545 of Kendo.Mvc.dll

Thanks,

David

ColorPicker

answered on 06 Mar 2017

1 answer

98 views

Text position

Hi,

Is there away when using an image to put the text below the image.

Regards

Button

answered on 06 Mar 2017

1 answer

207 views

Menu from sqlserver using Entity Framework

Hello Sir,

I am try to fetch dynamic menu from sql server, i am using northwind database,i am using your mvc model binding code but i am getting below error

help me please

The model item passed into the dictionary is of type 'System.Data.Entity.DbSet`1[TelerikMvcApp3.EFwork.Category]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[TelerikMvcApp3.Models.Category]'.

thank you.

Menu

answered on 06 Mar 2017

1 answer

189 views

Grid / Editing custom editor example question

This examples http://demos.telerik.com/aspnet-mvc/grid/editing-custom mentions "Html.Kendo().DropDownListFor()" but the actual razor markup does not use this helper. Can someone show how to correctly use the drop down within the grid in MVC ?

Grid

answered on 03 Mar 2017

4 answers

719 views

Vertical Column Lines?

I'm sure there's some deep hidden nested style somewhere to define vertical column lines, but damned if I can find it. How do I get vertical lines between my columns?

Grid

answered on 03 Mar 2017

5 answers

2.3K+ views

Default Grouping on Grid

Is there anyway to provide default grouping when the grid is rendered on the view? For example, in the grid below, I want to group by Type, by default. Thanks.

@(Html.Kendo().Grid<SomeModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.TYPE).Title("Type");
columns.Bound(p => p.NAME).Title("Name");
columns.Bound(p => p.CITY).Title("City");
})
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("GetInfo", "Summary"))
)
.Groupable (// group by first column)

Grid

answered on 03 Mar 2017