Questions on UI for ASP.NET MVC Forum

3 answers

1.4K+ views

I've been working on change the class added to a table row of the grid based on the value of a specific cell. For some reason however my code doesn't actually seem to do anything. There are no errors it just doesn't apply a class to the row cell and I don't know why. Can someone do a sanity check for me and make sure I have the code correctly structured please.

The Grid

@(Html.Kendo().Grid<Spoton_Areas_Test.ViewModels.VesselsViewModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(c => c.fixture_work)

.Title("Work");

columns.Bound(c => c.vessel_status)

.Title("Status");

})

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

.Pageable()

.Events(e=>e.DataBound("OnDataBound"))

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort =>

{

sort.Add(

company => company.owner_company).Ascending();

})

.PageSize(40)

.Model(model =>

{

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

})

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

.Update(update => update.Action("vessels_Update", "Home"))

))

My Javascript

function onDataBound(e) {

var kendoGrid = $("#Grid").data("kendoGrid");

var rows = e.sender.element.find("tbody tr");

for (var i = 0; i < rows.length; i++) {

var row = rows[i];

var status = kendoGrid.dataItem(row).vessel_status;

if (status = "PPT") {

$(row.cells[3]).addClass("customRed");

}

Not sure what's wrong but any help is appreciated

Grid

answered on 07 Mar 2016

5 answers

317 views

Grid Aggregates in Batch Mode

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.1K+ 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

299 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

97 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

161 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

550 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

128 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

214 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

83 views

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