Questions on UI for ASP.NET MVC Forum

5 answers

337 views

I have a grouped Grid in batch mode. My aggregates aren't refreshing as edits are made to the aggregated data until after a .saveChanges is performed. I want the aggregate to update as soon as the focus leaves a cell that is aggregated.

My Columns look like this:

    columns.Bound(c => c.Period1)
       .HeaderTemplate("<a>" + @title1 + "<br>" + @title2 + "</a>")
       //.ClientGroupHeaderTemplate("#= sum #")
       .ClientGroupFooterTemplate("#= sum #")
       .ClientFooterTemplate("#= sum #")
       .Filterable(false)
       .Width(100);

My Datasource is configured as such:

    .DataSource(dataSource => dataSource
    .Ajax()
    .AutoSync(false)
    .Aggregates(aggregates =>

    {
       if (Model.Count() > 0) { aggregates.Add(p => p.Period1).Sum(); }
       //more aggregate properties here

})
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Group(groups => groups.Add(p => p.ProjectType))
.Model(model =>
{
model.Id(prop => prop.ID);

//other model properties here

})
.Create(create => create.Action("CreateManpowerProjectEstimates", "Manpower"))
.Read(read => read.Action("ReadManpowerProjectEstimates", "Manpower"))
.Update(edit => edit.Action("UpdateManpowerProjectEstimates", "Manpower"))
.Destroy(delete => delete.Action("DestroyManpowerProjectEstimates", "Manpower"))
.PageSize(20)
)

Grid

answered on 07 Mar 2016

3 answers

2.2K+ views

How to get checked/Unchecked Nodes and its children in kendo Treeview

Hi,

Could anybody suggest me to get checked/Unchecked nodes and its children in Kendo Treeview.

Thanks,
Srikanth

TreeView

answered on 07 Mar 2016

1 answer

315 views

Grid -> Column -> Form Post

I am attempting to post to an action in the controller from a custom button in the Grid component. At first the Grid would render the form outside of the column, this was fixed by {}.Render() which appears to generate the form in the correct location.

My problem is that the items being passed to the form are always null, regardles:

I'll simply my example:

@{Html.Kendo().Grid(Model)

.Name("IterationGrid")

.Sortable()

.Columns(columns =>

{

columns.Tempate(@<text>

using (Html.BeginForm("RemindEmployee", "Evaluations", FormMethod.Post))

{

Html.Hidden("employeeID", item.Employee.EmployeeID);

Html.Hidden("reviewID", item.ReviewId);

Html.Hidden("fullname", item.Employee.Fullname);

<input type="submit" name="Remind" value="Remind" class="btn btn-primary btn-k-grid" />

}@</text>).Title("Action"); }).Render(); }

As I mentioned this appears to work fine, and the Controller has:

[HttpPost]

public ActionResult RemindEmployee(int? employeeID, int? reviewID, string fullname) { }

Though the parameters are always passed as null. What's the best way to handle this example here?

Note: I've already used some javascript $.post() to do the same thing, but I would like to know the proper way to get the above to work with hidden forms for my own benefit.

Grid

answered on 07 Mar 2016

1 answer

108 views

Error with popup open and without annotation

Hi,

It’s posible not close grid popup if I have added in modelstate an error on créate or update method of controller.

public ActionResult DirectInCreate([DataSourceRequest]DataSourceRequest request, DirectInViewModel service)

{

if (ModelState.IsValid)

{

if (service.OrigenID == 0)

{

string errorMessage = string.Format("El camp Productor es obligatori.");

ModelState.AddModelError("", errorMessage);

}

Else

function onError(e, gridName) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

var grid = $("#" + gridName).data("kendoGrid");

grid.one("dataBinding", function (e) {

e.preventDefault();

})

alert(message);

grid.cancelChanges();

}

Thanks in advance.

Xavier de la Rubia.

Grid

answered on 04 Mar 2016

5 answers

174 views

Chart - Local Data Error

Hello,

I have a donut chart that uses local data and I'm getting an error on my series of:

Cannot convert lambda expression to type 'System.Collections.IEnumerable' because it is not a delegate type

The chart is being used in a partial view. Here is my source code.

Partial View

@model IEnumerable<MyProject.ViewModels.UtilisationViewModel>

<div class="row">

<div class="col-md-6">

<div class="demo-section k-content wide">

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

.Name("chart")

.Title("Utilisation")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom))

.Series(series =>

{

series.Donut(

model => model.ahts

);

})

)

</div>

The ViewModel

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Data.Entity;

using System.Web;

using Spoton_Areas_Test.Models;

namespace MyProject.ViewModels

{

    public class UtilisationViewModel

    {

        public int idx_index { get; set; }

        public Nullable<System.DateTime> applies_date { get; set; }

        public Nullable<decimal> ahts { get; set; }

        public Nullable<decimal> psv { get; set; }

        public Nullable<int> region_idx { get; set; }

        public string region_name { get; set; }

    }

}

Can anyone point me in the direction of what is going wrong?

Many thanks

Chart

answered on 04 Mar 2016

5 answers

576 views

Telerik overriding htmlattributes?

I have an existing .NET MVC app where I upgraded it to a Telerik MVC app, and I'm noticing my controls htmlattributes are being overridden it seems.

In my view I have controls like this:

@Html.EditorFor(model => model.CompanyName, new {htmlAttributes = new {@class = "form-control", required = "true"}})

which would previously render like:

Now with Telerik, they render like this:

You can see I'm losing my form-control, etc classes, and the required attribute. What is overriding this and how should I handle this?

General Discussions

answered on 04 Mar 2016

2 answers

143 views

Delete issue in grid with subgrids

Hi,

I have a grid with subgrids on page. And I had to make custom delete button which shows delete dialog window (default kendo behaviour - show alert, not acceptable in my app).
But when someone press delete-button in subgrid, it invokes click on delete button in main grid (via injected.js, I understood that in debug proccess in chrome). I dont need that behaviour. How to prevent click on delete button in main grid?

Provide part of code here, and all code of this page in Attachment

Code :

//Main grid

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

.Name("TerminalsGrid")

.Columns(c =>

{

c.Bound(x => x.Brand.Name)

c.Bound(x => x.TerminalModel.Name)

c.Bound(x => x.SerialNumber)

c.Bound(x => x.CommissioningDate)

c.Bound(x => x.CurrentAZS)

c.Command(command => command.Edit()

.HtmlAttributes(new { style = "text-align: center;" })

.Width(131);

c.Command(command => command.Custom("Delete")

.Text("<span class='k-icon k-delete'></span>Удалить")

.Click("prepareToDelete"))

.HtmlAttributes(new { style = "text-align: center;" });

})

.Events(x => x

.Save("onSaveDisableUpdateButton")

.DataBound("onDataBoundHideControlButtons"))

.DataSource(ds => ds

.Ajax()

.Events(e => e

.Error("onErrorInCatalogs"))

.Model(m =>

{

m.Id(x => x.Id);

m.Field(x => x.Brand).DefaultValue(new ListItemIntViewModel { Name = "" });

m.Field(x => x.TerminalModel).DefaultValue(new ListItemIntViewModel { Name = "" });

m.Field(x => x.Organization).DefaultValue(new ListItemViewModel { Name = "" });

m.Field(x => x.Contractor).DefaultValue(new ListItemViewModel { Name = "" });

})

.Read(r => r.Action("JsonRead", "Terminals"))

.Create(c => c.Action("JsonCreate", "Terminals"))

.Update(u => u.Action("JsonUpdate", "Terminals"))

)

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditTerminal")

.Window(x => x.Width(550).Title("Данные терминала")))

.ToolBar(t => t.Create())

.Sortable(s => s.AllowUnsort(true))

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.ClientDetailTemplateId("template")

.Scrollable(scroll => scroll.Height("auto"))

.Pageable()

.Events(events => events

.DetailExpand("detailExpand")

.DetailCollapse("detailCollapse"))

)

// Helper for Delete Window

@Html.DeleteModal()

//Subgrid

@helper StateChanges()

{

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

.Name("grid_state_changes_#=Id#")

.Columns(columns =>

{

columns.Bound(col => col.TerminalState.Name)

.EditorTemplateName("EditTerminalState");

columns.Bound(col => col.StartTime)

.EditorTemplateName("DateTimeEditor");

columns.Bound(col => col.EndTime)

.EditorTemplateName("DateTimeNullableEditor");

columns.Command(c => c.Edit())

.HtmlAttributes(new { style = "text-align: center;" });

columns.Command(command => command.Custom("Delete")

.Text("<span class='k-icon k-delete'></span>Удалить")

.Click("prepareToDeleteInSubgrid"))

.HtmlAttributes(new { style = "text-align: center;" });

})

.Sortable()

.Events(x => x

.Save("onSaveDisableUpdateButton")

.DataBound("onDataBoundHideControlButtons"))

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

.ToolBar(toolbar => { toolbar.Create(); })

.DataSource(data => data

.Ajax()

.Sort(sort => sort.Add("StartTime").Descending())

.Events(events =>

{

events.Error("onErrorInSubgrid.bind({ WidgetID: 'grid_state_changes_#=Id#'})");

events.Sync("onSubgridSync.bind({ WidgetID: 'grid_state_changes_#=Id#'})");

})

.Model(model =>

{

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

model.Field(x => x.TerminalState).DefaultValue(new ListItemIntViewModel());

model.Field(x => x.StartTime).DefaultValue(DateTime.Now);

})

.Create(update => update.Action("StateChangesCreate", "Terminals", new { terminalId = "#= Id #" }))

.Read(read => read.Action("StateChangesRead", "Terminals", new { terminalId = "#= Id #" }))

.Update(update => update.Action("StateChangesUpdate", "Terminals"))

)

.Pageable(pager => pager.Refresh(true))

.ToClientTemplate()

)

}


<script>
function prepareToDeleteInSubgrid(e) {
        e.preventDefault();
        var gridId = this.element[0].id;
        if (gridId.indexOf("state_changes") > 0) {
            deleteUrl = deleteStateChangeUrl;
        }
        else if (gridId.indexOf("fuel_station_changes") > 0) {
            deleteUrl = deleteFuelStationChangeUrl;
        }
        else return;
        showDelete(e, this);
    }
    function prepareToDelete(e) {
        var gridId = this.element[0].id;
        deleteUrl = deleteTerminalUrl;
        showDelete(e, this);
    }


function showDelete(e, gridWidget) {
    if (gridWidget == undefined) {
        gridWidget = this;
    }
    var target = $('#deleteModal');
    var id = gridWidget.dataItem($(e.currentTarget).closest("tr")).id;
    gridname = '#' + gridWidget.element[0].id;
    target.find('#entryId').val(id);
    $('#PopupDeleteExceptionSection').css("display", "none");
    target.modal();
}


</script>

Grid

answered on 04 Mar 2016

1 answer

230 views

Kendo TreeView bigger arrow for mobile device with bigger touch area

Hello,

i am using Kendo TreeView in tablet and phones. It is very difficult to expand and collapse nodes by touching as the Images are very small for touch. So i did create bigger Images and did overqrite like this

.k-treeview .k-minus {
background-position: 0 0;
background: url("@Url.Content("~/Images/Actions-arrow-down-icon.png")") center center;
width: 25px;
height:25px;
cursor: pointer;
position:relative;
left: -10px;
top: 5px;
}
.k-treeview .k-plus {
background-position: 0 0;
background: url("@Url.Content("~/Images/Actions-arrow-right-icon.png")") center center;
width: 25px;
height: 25px;
cursor: pointer;
position:relative;
left: -10px;
top: 5px;
}

But even with bigger Images the touch is not improved. When i tap on bigger arrow it does not take the touch throughout the Image. How can i improve the touch area for mobile devices? Same is thr Problem for Kendo menu on devices. When clicked it does not seem to take touch always.

Thanks

Anamika

TreeView

answered on 04 Mar 2016

3 answers

95 views

[Solved] RadarLine chart static background if no data exists

Given an empty radar line chart, is it possible to have the plotlines still colored as if there were data? Here's a dojo example: http://dojo.telerik.com/@buffcessna/ELoha

If you un-comment the data line, the graph looks fine. But by commenting out the data line, the entire graph is green per the plotbands.

Is there a way for the graph to be colored like the plotbands state even if there's no data present?

Chart

answered on 03 Mar 2016

3 answers

129 views

Grid group and datatype change?

Question around grouping. I've noticed that when the grid's read happens it calls the assigned web method as you would expect. What I have noticed that the code below produced two different results. One for grouped data and another type for all other grid alterations (filters and sorts).

Sample code:

Dim temp As IQueryable = grid.ToDataSourceResult(request).Data.AsQueryable

No grid alterations or filtering or sorting the data type of the above object is:

System.Linq.EnumerableQuery(Of myDataType)

Apply one or more groups and the data type becomes:

System.Linq.EnumerableQuery(Of Kendo.Mvc.Infrastructure.AggregateFunctionsGroup)

Why does this happen? Have we implemented something incorrectly?

Grid