Questions on UI for ASP.NET MVC Forum

4 answers

669 views

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.5K+ 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.0K+ 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

374 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

185 views

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

380 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

242 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

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

175 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

3 answers

524 views

Repeating Partial Views with Kendo Controls

Hi,

I have a razor patial view that contains a few controls (i.e. inputs, drop downs, date pickers...). These controls are created using kendo helper functions for MVC.
In my main view I have an "Add Item" ajax action link that woud append a new instance of partialview in a div container every time it's clicked.
Using this approach kendo controls don't get correctly rendered. Dropdowns show as text, datepickers are missing styles .

If there is a different/better approach that I should be using for Adding dynamic partials to the view please let me know.

The code that adds partialview to main view is:

@(Ajax.ActionLink("Add another shipment", "BlankEditor", new AjaxOptions

{

UpdateTargetId = "items",

InsertionMode = InsertionMode.InsertAfter,

}))

And the Partial View is looking like this:

@model SupplyViewModel

<div class="k-block k-info-colored" style="margin-bottom: 1em;">

<div class="k-block">

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.ReportDate)

</div>

<div class="editor-field">

@(Html.Kendo().DatePickerFor(model => model.ReportDate)

.Name("ReportDate" + new Random().Next())

.Value(DateTime.Now.Date)

.Max(DateTime.Now.Date))

@Html.ValidationMessageFor(model => model.ReportDate)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.OrganizationId, "Supplier")

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.OrganizationId).Name("ddlOrganization").HtmlAttributes(new { @Class = "HABddList" }).SelectedIndex(0).BindTo(ViewBag.OrganizationId))

@Html.ValidationMessageFor(model => model.OrganizationId)

</div>

<div class="k-block vesselinfo" style="position: relative;">

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.VesselName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.VesselName)

@Html.ValidationMessageFor(model => model.VesselName)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.VesselId)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.VesselId)

@Html.ValidationMessageFor(model => model.VesselId)

</div>

<div style="display: inline-block;">

<div class="editor-label">

@Html.LabelFor(model => model.PortOfEntryId, "PortOfEntry")

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.PortOfEntryId).OptionLabel("Select Port of Entry...").BindTo(ViewBag.PortOfEntryId))

@Html.ValidationMessageFor(model => model.PortOfEntryId)

</div>

@* <div style="float: right;">

<a href="#" class="k-button show_hide" style="text-align: right;">Hide</a>

</div>*@

</div>

@* <div class="k-block k-info-colored" id="vesselShowButton" style="text-align: right;">

<a href="#" class="k-button show_hide">Show Vessel Info</a>

</div>*@

<div class="k-block">

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.EstimatedDepartureDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.EstimatedDepartureDate)

@Html.ValidationMessageFor(model => model.EstimatedDepartureDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.EstimatedArrivalDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.EstimatedArrivalDate)

@Html.ValidationMessageFor(model => model.EstimatedArrivalDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.DepartureDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.DepartureDate)

@Html.ValidationMessageFor(model => model.DepartureDate)

</div>

<div class="dates">

<div class="editor-label">

@Html.LabelFor(model => model.ArrivalDate)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.ArrivalDate)

@Html.ValidationMessageFor(model => model.ArrivalDate)

</div>

<div class="k-block">

<table class="quantities">

<tr>

<th></th>

<th>Unit</th>

<th>Sizes:</th>

@foreach (SelectListItem item in ViewBag.ProductSizeId)

{

<th>@item.Text</th>

}

</tr>

<tr>

<td style="font-size: smaller;">Quantity in</td>

<td>lugs</td>

<td></td>

@foreach (SelectListItem item in ViewBag.ProductSizeId)

{

<td>@(Html.Kendo().NumericTextBox<double>()

.Name(item.Text)

.Format("##,#")

.Spinners(false)

)</td>

}

</tr>

</table>

</div>

<script>

$(function () {

//var ddLists = $(".HABddList").each(

// function () {

// // $(this).data("kendoDropDownList").list.width("auto");

// alert('hi');

// setWidth($("this"));

// });

setWidth($("#ddlOrganization"));

//$(".vesselinfo").hide();

//$(".show_hide").show();

//$('.show_hide').click(function () {

// $(".vesselinfo").slideToggle();

// $("#vesselShowButton").slideToggle();

//});

});

function setWidth(el) {

var d = el;

var p = d.data("kendoDropDownList").popup.element;

var w = p.css("visibility", "hidden").show().outerWidth() + 30;

p.hide().css("visibility", "visible");

d.closest(".k-widget").width(w);

}

</script>

<style scoped>

.k-numerictextbox {

max-width: 50px;

margin: 0px;

padding: 0;

}

.show_hide {

display: none;

}

.dates {

display: inline-block;

margin-left: 1em;

}

.dates:nth-of-type(1) {

margin-left: 0;

}

.quantities {

border-collapse: collapse;

border-spacing: 0;

border: solid 1px;

}

.quantities th {

min-width: 40px;

max-width: 50px;

text-align: center;

font-size: 1em;

border: solid 1px;

margin: 0.5em 0.5em;

}

.quantities th:nth-of-type(1) {

width: 35px;

}

.quantities td {

text-align: center;

padding: 0;

border: solid 1px;

}

</style>

General Discussions

answered on 10 Oct 2017