Questions on UI for ASP.NET MVC Forum

5 answers

197 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

740 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

408 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

222 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

432 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

296 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

answered on 11 Oct 2017

3 answers

1.2K+ views

[Solved] Panelbar as Sidebar navigation

Hi,

I am trying to use Panelbar as a Side bar navigation (something like Outlook).

I have the Model this way.

public class NavbarMainMenuModel

{

public int Dept_id { get; set; }

public int Seq_no { get; set; }

public string Dept_name { get; set; }

public List<NavbarMenuItem> Items { get; set; }

}

public class NavbarMenuItem

{

public int Menu_item_id { get; set; }

public int Seq_no { get; set; }

public int Dept_id { get; set; }

public string MenuName { get; set; }

}

Now, I want to load the Panel bar with this data.

Currently, I have this code and it only display the top level items but not the children.

<div id="responsive-panel" style="width:200px;">

@(Html.Kendo().PanelBar()

.Name("panelbar")

.ExpandAll(false)

.ExpandMode(PanelBarExpandMode.Multiple)

.DataTextField("Dept_name")

.DataSource(ds=>ds

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

)

.Events(e=>e

.Select("panelbarselected")

)

</div>

How do I get the Main list and sub items display on the PanelBar?

Also, i need to display them in the right sequence (if possible).

Thanks,

Arun

PanelBar

answered on 10 Oct 2017

1 answer

212 views

Trouble with client side paging

I've got an MVC implementation of a grid, datasource settings below

.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Read(read => read.Action("Data_Read", "StaffManager")
.Data("pageData")
)

I have ServerOperation(false) to allow for some client side sorting, which works great! Now I'm trying to get client side paging working but I cannot.

My page event handler is here:

function onGridPage(args) {
pageNumber = args.page;
var grid = $('#grid').data('kendoGrid');

grid.dataSource.read();
grid.dataSource.sync();
grid.refresh();
}

When I click page, I get back a valid json result from my read method (expecting 1 item) but the grid doesn't display anything. The page numbers and totals are updated correctly, just no data is shown. In dev tools, I see the json object that has data.

I assume that the datasource isn't being updated after the read.

Any suggestions?

Grid

answered on 10 Oct 2017