Questions on UI for ASP.NET MVC Forum

4 answers

1.2K+ views

prevent postback

Is it possible to prevent a postback from occurring when clicking the button, but still be able to to the click event to call a client-side javascript function?

Button

answered on 13 Feb 2017

5 answers

906 views

Adding a custom validator to a grid that is using GridEditMode.InCell

Hello,

I'm trying to create a custom validator in a grid (which is using GridEditMode.InCell) but when the validation fail it shows the validation error just for a few milliseconds and then hide it. However when I left the field empty the default error "The xxxxx filed is required." is showed and do not disappear.

What should I do to achieve the same result with my custom validator?

The custom validator is the same I used in this question

http://www.telerik.com/forums/need-help-creating-two-kendo-validators-in-the-same-view#pzfZKgPe7UqXkPnRyN4grg

Thank you.

PS: I've attached a screenshot displaying the default required validator.

Grid

answered on 13 Feb 2017

1 answer

1.6K+ views

Grid loading indicator

I have a page that has a grid which autobinds when the page loads. When the page initially shows, the grid is empty and loading, executing the read action. Unfortunately it's taking a small bit of time, but to the user it shows nothing. So I implemented my own progress spinner, it's kind of our company standard spinner/mascot... So now when the page loads, the grid is empty but my own custom spinner shows appropriately, and in the DataBound event I turn off the spinner. All good so far...

However, doing anything within the grid, such as grouping, sorting, etc... is all handled by the server, and the grid shows it's own little spinner animation. Well this is a bit jarring to the user, different spinners. So what do I need to change or override to replace the built in progress spoinner thing with my own? And if I do that, when the grid is empty and doing it's initial load, would it then be hidden such as the builtin one is? And if so, how can I override that and get it to do what I want, when I want.

Grid

answered on 13 Feb 2017

6 answers

378 views

Group Header : Date format

When using the MVC Grid, and I group by a date, it shows: "Receipt Date: Tue Jan 24 2017 00:00:00 GMT-0700 (US Mountain Standard Time)", when all I want is the field name, followed by the date, formatted as a date. "Receipt Date: 01/24/2017" How can I get this?

Grid

answered on 13 Feb 2017

2 answers

127 views

DatePickerFor height issue

For some reason my DatePickerFor isn't working. It's height is always only 39px. So all I can see is pretty much the header. A photo of the issue is attached. Here's the code for the DatePickerFor:

<div class="row">
<div class="col-sm-4 col-md-3">
@Html.LabelFor(m => m.DATEFROM, translator.Translate("DATEFROM"), new
{
@class = "control-label"
})
@(Html.Kendo().DatePickerFor(m => m.DATEFROM).Format("dd.MM.yyyy").HtmlAttributes(new
{
style = "width:100%;"
}))
</div>
</div>

Date/Time Pickers

answered on 11 Feb 2017

2 answers

216 views

Launch a Grid view from another view with id

I'm trying to launch a view which just has a grid in it, but I want to pass in an id to filter the read from the db

Maybe someone can point out what I'm doing wrong.

Here is my call, although I think I really want the read transport

@Html.ActionLink("Good Sample List", "Index", "Grid", null, null) @*This works but reads all the rows*@
@Html.ActionLink("Sample List", "Index", "Grid", new { id = Model.id }, null) @*This Doesn't*@

What happens is with both calls the Index constructor gets called. When I don't send in an id it calls the AttributeOptions_Read next.

If I call it with an id the Index constructor get called with the correct id, then it calls it without an id. The AttributeOptions_Read is never called.

Here is the controller with some code commented out and using test data instead of my real data. Hopefully this works the same as on my system.

Code was generated with the Kendo UI Scaffolder

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

//using riteTIME_WebApi.Data;

namespace riteTIME_WebApi.Controllers.MVC

{

public class TestData

{

public Guid id { get; set; }

public Guid attribute_id { get; set; }

public string value { get; set; }

}

public class GridController : Controller

{

// Generated

public ActionResult Index()

{

return View();

}

// My version, doesn't do what I expect.

//public ActionResult Index(Guid? id)

//{

// return View();

//}

public ActionResult AttributeOptions_Read([DataSourceRequest]DataSourceRequest request)

{

// I would like to be able to query the db using the attribute_id

var options = new List<TestData>();

options.Add(

new TestData

{

id = new Guid("1B7EC29F-E2D8-E611-8114-00155DDF5703"),

attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),

value = "Test1 A"

});

options.Add(new TestData

{

id = new Guid("1C7EC29F-E2D8-E611-8114-00155DDF5703"),

attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),

value = "Test2"

});

options.Add(new TestData

{

id = new Guid("1D7EC29F-E2D8-E611-8114-00155DDF5703"),

attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),

value = "Test3"

});

IQueryable<TestData> attributeoptions = options.AsQueryable();

DataSourceResult result = attributeoptions.ToDataSourceResult(request, attributeOption => new

{

attributeOption.id,

attributeOption.value,

attributeOption.attribute_id

});

return Json(result);

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult AttributeOptions_Create([DataSourceRequest]DataSourceRequest request, TestData attributeOption)

{

if (ModelState.IsValid)

{

//var entity = new AttributeOption

//{

// value = attributeOption.value

//};

//db.AttributeOptions.Add(entity);

//db.SaveChanges();

attributeOption.id = Guid.NewGuid();

}

return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult AttributeOptions_Update([DataSourceRequest]DataSourceRequest request, TestData attributeOption)

{

if (ModelState.IsValid)

{

//var entity = new AttributeOption

//{

// id = attributeOption.id,

// value = attributeOption.value

//};

//db.AttributeOptions.Attach(entity);

//db.Entry(entity).State = EntityState.Modified;

//db.SaveChanges();

}

return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult AttributeOptions_Destroy([DataSourceRequest]DataSourceRequest request, TestData attributeOption)

{

if (ModelState.IsValid)

{

//var entity = new AttributeOption

//{

// id = attributeOption.id,

// value = attributeOption.value

//};

//db.AttributeOptions.Attach(entity);

//db.AttributeOptions.Remove(entity);

//db.SaveChanges();

}

return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));

}

protected override void Dispose(bool disposing)

{

//db.Dispose();

base.Dispose(disposing);

}

<div id="grid"></div>

<script>

$("#grid").kendoGrid({

height: 400,

columns: [

{ field: "value" },

{ hidden: true, field: "id" },

{ hidden: true, field: "attribute_id" },

{command: [ "edit" , "destroy"], width: 180 }

],

toolbar: ["create"],

dataSource: {

type: "aspnetmvc-ajax",

transport: {

read: {

url: "AttributeOptions_Read"

},

create: {

url: "AttributeOptions_Create"

},

update: {

url: "AttributeOptions_Update"

},

destroy: {

url: "AttributeOptions_Destroy"

}

},

schema: {

data: "Data",

model: {

id: "id",

fields: {

//id: { type: "number"},

value: { type: "string" }

// attribute_id:{ type: "number"}

}

},

serverPaging: true,

serverSorting: true,

},

editable: "inline",

scrollable: true

})

</script>

Grid

answered on 10 Feb 2017

1 answer

79 views

Multi-check filter on dimensions

Hi people.

I'm implementing PivotGrid on my ASP.NET MVC application. With the Grid component, I was able to make filters based on a selection of which values I want due to bounded columns capture feature.

Is there something like this on PivotGrid?

In Grid component. I've done the filter just like this:

var bounded = gridColumns.Bound(dataTableCol.GetType(), dataTableCol.ToString());
// If the column has a multicheckbox filter - set it based on column definition
var customFilterColumn = Model.columns.SingleOrDefault(item => item.ColumnName.Equals(dataTableCol.ToString()));
if (customFilterColumn != null)
{
bounded.Filterable(ftb => ftb
.Multi(true)
.Cell(cell =>
cell.DataSource(ds =>
// This is the action that will return the filter unique values
ds.Read("MultiFilter_read", "Consulta", new { columnId = customFilterColumn.Id }))));
bounded.Width(300);
}

In "Consulta/MultiFilter_read" action I make a search on database returning the possible values for that column, applying them to the respective bounded column. This instructions I've put on Columns property of the Grid HtmlHelper, and I'm doing PivotGrid with HtmlHelpers too.

PivotGrid

answered on 10 Feb 2017

1 answer

447 views

Null values showing in ComboBox

Hi,

I'm using the following template to display values in a ComboBox:

.Template("Name: <strong>#: data.FirstName # #: data.LastName #</strong> Organisation: #: data.Organisation #<br>Email: #: data.Email #, Telephone: #: data.Telephone # <br>-----------------------------")

It's working fine except that null values from the database are actually displayed as 'null' in the display. For example, Name: null null Organisation: null.

I've tried filtering the data on the server so it replaced null values with "" but that didn't seem to work.

How can I replace the text 'null' with just a blank value?

Thanks

Tim

ComboBox

answered on 10 Feb 2017

3 answers

106 views

Cannot Select 0

I cannot select 0 in the example below. I could convert the data to a string type but that would not fit the underlying data. Does anybody have a fix for this issue?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ 0, 1 ],
optionLabel: "Select"
});
</script>
</body>
</html>

DropDownList

answered on 10 Feb 2017

2 answers

200 views

Updating my grid from DDL

public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request, string agencyNum)

{

using (var CB = new CentralBillingEntities())

{

var result = CB.GetAgentViewInfo(agencyNum).ToList();

return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

When I set a breakpoint I actually see the value for my GetAgentViewInfo coming through. But, the grid just flashes and the data never comes back. What am I doing wrong?

Here's the rest of my code:

@model IEnumerable<CentralBilling.Models.CentralBillingEntities>

@{

ViewBag.Title = "View";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="center">

<h3><u>Agent View</u></h3>

</div><br />

<div>

@(Html.Kendo().DropDownList()

.Name("ddlAgency")

.Events(e => e.Change("agencyChange"))

.BindTo(new List<SelectListItem>()

{

new SelectListItem() { Text = "" },

new SelectListItem() { Text = "250-Louisville", Value = "U00250" },

new SelectListItem() { Text = "590-OKC", Value = "U00590"},

}

))

</div>

<div>

@(Html.Kendo().Grid<CentralBilling.Models.GetAgentViewInfo_Result>()

.Name("gridAgent")

.DataSource(datasource => datasource

.Ajax()

.Read(read => read.Action("AgentIndex", "Agent")))

.Columns(columns =>

{

columns.Bound(o => o.Req).Width("130px").Title("Request Submission").Template(

@<text>

@Html.ActionLink("GetAgentDetail", "Agent", new { controller = "Agent", id = item.Full_Order_Number })

</text>

).ClientTemplate(@"<a href=/Agent/GetAgentDetail?id=#= Full_Order_Number #>#= Req #</a>");

columns.Bound(o => o.Master_OrderNum).Width("150px");

columns.Bound(o => o.Shipper).Width("175px");

columns.Bound(o => o.aom_shipment_type).Title("MoveType").Width("100px");

columns.Bound(o => o.AccountHeader).Width("150px");

columns.Bound(o => o.EarlyLoadDate).Format("{0:MM/dd/yyyy}").Width("135px");

columns.Bound(o => o.Date_Delv_Act).Format("{0:MM/dd/yyyy}").Width("135px");

columns.Bound(o => o.Book_Agent).Width("135px");

columns.Bound(o => o.Haul_Agent).Width("135px");

columns.Bound(o => o.Org_Agent).Width("135px");

columns.Bound(o => o.Dest_Agent).Width("135px");

})

.HtmlAttributes(new { style = "height: 550px" })

.Resizable(resize => resize.Columns(true))

.Sortable()

.Scrollable()

.Filterable()

)

</div>

<script type="text/javascript" language="javascript">

function agencyChange() {

var ddlAgency = $("#ddlAgency").val();

alert("Drop down list value is: " + ddlAgency);

$.get('/Agent/AgentIndex', { agencyNum: ddlAgency }, function (data) {

onDataUpdated();

});

}

function onDataUpdated() {

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

grid.dataSource.read();

}

</script>

DropDownList

answered on 09 Feb 2017