Questions on UI for ASP.NET MVC Forum

4 answers

495 views

Skipping non-editable cells when tabbing in grid

Hi there, i am running into a bit of a problem. I want to tab through a batch edit grid and i have certain cells that are non-editable. I read in Telerik's documentation that for this to work, i have to remove "Navigatable()" from grid. But if there is not event to attach to, how does the java script execute when i press the Tab key. Could this also be the reason whey i get the error "The grid is undefined."

Here is the JavaSript

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

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

03.

04. console.log("this is grid:", grid);

05.

06. grid.table.on('keydown', function (e) {

07. if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {

08. e.preventDefault();

09. var currentNumberOfItems = grid.dataSource.view().length;

10. var row = $(e.target).closest('tr').index();

11. var col = grid.cellIndex($(e.target).closest('td'));

12.

13. var dataItem = grid.dataItem($(e.target).closest('tr'));

14. var field = grid.columns[col].field;

15. var value = $(e.target).val();

16. dataItem.set(field, value);

17. var nextCellCol = 3;

18.

19. if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {

20. console.log("this is col:",col);

21. var nextCellRow;

22. if (col === 3) {

23. nextCellCol = 4;

24. }

25. else if (col === 4) {

26. nextCellCol = 5;

27. }

28. else if (col === 5) {

29. nextCellCol = 6;

30. }

31. else if (col === 6) {

32. nextCellCol = 7;

33. }

34.

35. if (e.shiftKey) {

36. nextCellRow = nextCellCol === 3 ? row : row - 1;

37. } else {

38. nextCellRow = nextCellCol === 3 ? row + 1 : row;

39. }

40.

41. if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {

42. return;

43. }

44.

45. // wait for cell to close and Grid to rebind when changes have been made

46. setTimeout(function () {

47. grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));

48. });

49. }

50. }

51. });

52.

53.</script>

Here is my code Index.cshtml

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()

02. .Name("PlanPepole")

03. .Columns(columns =>

04. {

05. columns.Bound(e => e.PeopleCategoryName).Title("").Width(154);

06. columns.Bound(e => e.MinistryGroupCategoryName).Title("Ministry Group").Width(2);

07. columns.Bound(e => e.AgeCategoryName).Title("Age Category").Width(2);

08. columns.Bound(e => e.PeopleQ1).Title("Q1").Width(79);

09. columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79);

10. columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79);

11. columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79);

12. columns.Bound(e => e.Annual).Width(79);

13. })

14. .ToolBar(toolbar =>

15. {

16. toolbar.Save();

17. })

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

19. //.Navigatable()

20. .Events(events =>

21. {

22. events.DataBound("Ppg_Uneditable_ColandRow");

23. events.SaveChanges("disableBeforeUnload");

24. events.Edit("onEditPlanPepole");

25. })

26. .DataSource(dataSource => dataSource

27. .Ajax()

28. .ServerOperation(false)

29.

30. .Batch(true)

31. .Model(model =>

32. {

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

34. model.Field(p => p.PeopleCategoryName).Editable(false);

35. model.Field(p => p.MinistryGroupCategoryName).Editable(false);

36. model.Field(p => p.AgeCategoryName).Editable(false);

37. })

38. .PageSize(30)

39. .Read(read => read.Action("People_Read", "PlanPeople"))

40. )

41.)

Grid

answered on 12 Oct 2017

5 answers

205 views

Data binding for Azure DocumentDB

I created a standard MVC web app in VS 2015

I want to use the Grid and can not figure out how to data bind it

Grid

answered on 12 Oct 2017

4 answers

746 views

[Solved] Warn user before losing edit changes (in-line)

Hello,

We are using Kendo version 2016.2.714. And when you click edit, make some changes and then click edit from another row, you will lose your changes without a confirmation. How can we achieve this confirmation? If possible, it should include when the user clicks another page, or when the user clicks to add a new row (These events makes you lose your in-line edit changes without confirmation).

Also, the simpler the better, as we have to implement this in various places where we use the grid widget.

Thanks in advance!

Grid

answered on 12 Oct 2017

1 answer

1.6K+ views

Read return error 500

Hi,

I have defined datasource read actions in grid (not only grid):

.DataSource(dataSource => dataSource
.Read(read => read.Action("ReadAction", "Controller").Type(HttpVerbs.Post))

This return in network error 500: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

public JsonResult ReadAction([DataSourceRequest] DataSourceRequest request)

{
return Json(list.ToDataSourceResult(request))

}

I don't know why, because this applications I have published on 4 servers. On 3 server is all right and on the fourth server I have this problem.
It's not problem only with grid component. This problem I have with treelist, treeview, ...

If I changed return in method in controller and I added JsonRequestBehavior.AllowGet (return Json(list.ToDataSourceResult(request))) than it's ok. But I want to use POST request.
Why it doesn't work on 1 server ?
Where could be the problem ?

Thanks

Grid

answered on 12 Oct 2017

4 answers

2.1K+ views

Enable paging in the Grid

I’m currently testing the Grid control for ASP.NET MVC 5 and I need some help with paging. I’ve managed to get it working with my ASP.NET MVC 5 application at a basic level (data is fetched from a database and displayed in the grid) but the paging is not working (paging buttons are grayed out).

I found the following guide to enable paging but I still can’t make it working:

http://demos.telerik.com/aspnet-core/grid/paging

I mean what does it require to enable paging buttons? My goal is to fetch data, for example, 20 rows at a time (page 1), and when you click on the next button, you'll get the next 20 items (page 2) from the database etc. Is this possible with the Grid?

Here's my code that I'm using to show the grid and fetch the data:

@(Html.Kendo().Grid<PluTable>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Code);
columns.Bound(p => p.Description1);
columns.Bound(p => p.Price);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable
.Input(true)
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events
.Error("error_handler")
)
.Model(model => model.Id(p => p.Code))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)

Grid

answered on 12 Oct 2017

1 answer

413 views

How to change item text

Hi,

If I change the text of a button it removes span and other classes as well.

This is my code but doesn't work.

@(Html.Kendo().Menu()

.Name("HeaderMenu")
.Items(items =>
{
items.Add().Text("Home").Action("Index", "Home").SpriteCssClasses("fa fa-home");
items.Add().Text("About").Action("About", "Home").SpriteCssClasses("fa fa-info");
items.Add().Text("Contact").Action("Contact", "Home").SpriteCssClasses("fa fa-mobile-phone");
items.Add().Text("User").HtmlAttributes(new { id = "userloggedin" }).SpriteCssClasses("fa fa-user").Items(children => {
children.Add().Text("Sign out").SpriteCssClasses("fa fa-sign-out").HtmlAttributes(new { id = "signout" }).Enabled(false);
});
}))

html = $("#userloggedin").children(".k-link").html();
console.log(html);

}

</script>

Toolbar

answered on 12 Oct 2017

1 answer

235 views

[Solved] Edit Kendo Window Diagram Shape Edit

Hello,

I have a Diagram Widget with a ShapeTemplate (Html.Kendo().Diagram().Editable.ShapeTemplateName("NodeEditTemplate")

@model Web_Anlageneditor.ViewModels.Diagram.DiagramEditNodeVm

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.AntiForgeryToken()

<div class="form-group row">

@Html.LabelFor(m => m.Title, new { @class = "col-sm-10 " })

<div class="col-sm-10">

@Html.EditorFor(m => m.Title, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(m => m.Title, "", new { @class = "text-danger" })

</div>

<script>

//Kendo Validation

$(function() {

$("form").kendoValidator();

});

</script>

How can I access the window's Title-bar, Width, etc. build around this Template when editing/creating the shape? (s. attachment)

Diagram

answered on 12 Oct 2017

3 answers

448 views

Binding line series to Array/List

Hi,
I have my model described like:
public class PerformanceChartSeriesModel_2
{
public string[] Date { get; set; }
public double[] P1 { get; set; }
}

Now, I chart :
@(Html.Kendo().Chart<PerformanceChartSeriesModel_2>()
.Name("chartPerformance")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds => ds
.Read(read => read.Action("PerformanceChartData", "Performance").Data("performanceChartData"))
)
.Series(series =>
{
series.Line(p=>p.P1);
})
.CategoryAxis(axis =>
{
axis.Categories(l => l.Date);
})

Neither series nor categories pick up values, series actually behave in a strange way drawing only one point.
Could you tell what is wrong, or how can I work with such model.
Thanks.

Chart

answered on 11 Oct 2017

4 answers

306 views

Gantt chart with signalR datasource

Hello, is it possible to use the gantt chart with a signalR datasource in either Asp.NET MVC or Core? I can't seem to find any demos/examples of it and my attempts are not succesful.

Below is my Gantt.cshtml:

@using KendoNetCoreTest.Models;

@using Kendo.Mvc.UI.Html;

<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.min.js")"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>

<script type="text/javascript">

var hub = $.connection.ganttHub;

var start = $.connection.hub.start();

function pushEvent(e) {

var notif = $("#notif").data("kendoNotification");

notif.success(e.type);

}

</script>

<div>

@(Html.Kendo().Notification()

.Name("notif")

.Width("100%")

.Position(p => p.Top(0).Left(0))

)

</div>

<div>

@(Html.Kendo().Gantt<GanttTask, GanttDependency>()

.Name("gantSignalR")

.Columns(cols => {

cols.Bound(c => c.ID);

cols.Bound(c => c.Title);

cols.Bound(c => c.Start);

})

.DataSource(ds => ds

.SignalR()

.AutoSync(true)

.Events(e => e.Push("pushEvent"))

.Transport(tr => tr

.Promise("start")

.Hub("hub")

.Client(c => {

c.Read("read");

/* c.Create("create");

c.Update("update");

c.Destroy("destroy"); */

})

.Server(s => {

s.Read("read");

/* s.Create("create");

s.Update("update");

s.Destroy("destroy"); */

})

)

.Schema(sch => sch.Model(m => {

m.Id(f => f.ID);

m.Field(f => f.Title).DefaultValue("New task");

m.Field(f => f.Start).DefaultValue(DateTime.Now);

m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));

m.Field(f => f.Name).From("Name").DefaultValue("New task");

m.Field(f => f.ParentID).From("ParentID").DefaultValue(null);

m.Field(f => f.OrderId).From("OrderId");

}))

)

</div>

<div>

@(Html.Kendo().Grid<GanttTask>()

.Name("grid")

.Columns(cols => {

cols.Bound(c => c.ID);

cols.Bound(c => c.Title);

cols.Bound(c => c.Start);

cols.Bound(c => c.End);

cols.Command(c => { c.Edit(); c.Destroy(); });

})

.DataSource(ds => ds

.SignalR()

.AutoSync(true)

.Transport(tr => tr

.Promise("start")

.Hub("hub")

.Client(c => {

c.Read("read");

c.Update("update");

})

.Server(s => {

s.Read("read");

s.Update("update");

})

)

.Schema(sch => sch.Model(m => {

m.Id(f => f.ID);

m.Field(f => f.Title).DefaultValue("New task").Editable();

m.Field(f => f.Start).DefaultValue(DateTime.Now).Editable();

m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));

m.Field(f => f.Name).DefaultValue("New task");

m.Field(f => f.ParentID).DefaultValue(null);

m.Field(f => f.OrderId);

}))

)

.Editable(e => e.Mode(GridEditMode.InLine))

)

</div>

The hub is currently just returning a dummy data of

public List<GanttTask> Read() {

return new List<GanttTask>() {

new GanttTask() { ID= 1, Title = "New task", Name= "New Task", Start = DateTime.Now, End=DateTime.Now.AddDays(2), OrderId = 1, ParentID = null }

};

}

The result is a bit mixed for the gantt. It show the ids but nothing else, while the grid shows everything ok, see attached picture. The grid meanwhile shows the dates also.

Gantt