Questions on UI for ASP.NET MVC Forum

5 answers

234 views

ComboBox, NumberPicker and other (?) widgets missing bottom border

All skins, seems to happen when number pickers are embedded in TabStrips and ComboBoxs when in KendoWindows.

See attachment.

(Chrome)

General Discussions

answered on 19 Nov 2013

5 answers

156 views

serverPaging, serverSorting and serverFiltering questions

Question 1
Is serverPaging, serverSorting and serverFiltering officially supported with javascript notation?

Question 2

To enable serverPaging, serverSorting and serverFiltering through javascript the dataSource schema must be changed to:

schema: {
data: "data",
total: "total"
}

Here
is our previous schema which enabled us to define default values and specify types, how do we combine the two:

schema: {
model: {
id: "TransactionID",
fields: {
TransactionID: { editable: false, nullable: true, defaultValue : "00000000-0000-0000-0000-000000000000"
},
TicketNumber: {type: "string" },
//TransactionTypeDesc: { type: "string",editable: false,
defaultValue: "Fuel" },
StatusName: {type: "string" },
Departure_Date: { type: "date"},
Arrival_Date: {type: "date"},
FlightNumber: { type: "string" },
AircraftName: {type: "string" },
TerminalAndGate: { type: "string" },
AirlineName: {type: "string", defaultValue: { AirlineID: 1,
AirlineName: "135 Airways"} },
DestinationAirportCode: { type: "string", defaultValue: { LocationID:1, AirportCode: "ATL"} },
ArrivalAirportCode: { type: "string", defaultValue: { LocationID: 1, AirportCode: "ATL"} },
ShipNumber: { type: "string" },
TailNumber: { type: "string" },
Product: { type: "string" },
FuelQuantity: { type: "string" },
Temperature: { type: "string" },
Density: { type: "string" },
StartTotalizer: { type: "string" },
StopTotalizer: { type: "string" },
TotalGallons: { type: "string" },
FuelEquipment: { type: "string" },
Fueler: { type: "string" },
InOpGuage: { type: "string" },
Supplier: { type: "string" },
StartTime: { type: "string" },
EndTime: { type: "string" },
FuelCaps: { type: "string" },
Notes: { type: "string" }
}
}
}

Grid

answered on 19 Nov 2013

2 answers

381 views

In Cell Editing With Editor Templates

I'm trying to implement in-cell editing on a kendo ajax bound grid. All of my columns have a editor template. I have a client side javascript function that is called in the grid's save event.

Here is the grid definition

@( Html.Kendo().Grid<CNX.Domain.Entities.CnxTrain>()

.Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))

.Filterable()

.Pageable()

.Name("IncompleteTrains")

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

.Columns(columns =>

{

columns.Bound(x => x.Id).Visible(false);

columns.Bound(x => x.STANDARD_CARRIER_ALPHA_CODE).Width(75).EditorTemplateName("_textEditor");

columns.Bound(x => x.UNIT_TRAIN).Width(75).EditorTemplateName("_textEditor");

columns.Bound(x => x.CNX_AUT).Width(75).EditorTemplateName("_textEditor");

columns.Bound(x => x.ARRIVAL_DATE_TIME).Width(100).Format("{0:MM/dd/yyyy hh:mm:ss}").EditorTemplateName("_dateTimeEditor");

columns.Bound(x => x.PERMIT_NUMBER).Width(100).EditorTemplateName("_textEditor");

columns.Bound(x => x.SHIPPER_NAME).Width(100).EditorTemplateName("_textEditor");

//  columns.Bound(x => x.CNX_RELEASE_DATE_TIME).Width(100).Format("{0:MM/dd/yyyy hh:mm:ss}").EditorTemplateName("_dateTimeEditor");

})

.ClientDetailTemplateId("incompleteTrainTemplate")

.Events(ev => ev.Save("incompleteTrains_Save"))

.DataSource(dataSource => dataSource.Ajax().PageSize(5).Read(read => read.Action("IncompleteTrains", "MenuTrain").Type(HttpVerbs.Post))

.Update(update => update.Action("IncompleteTrainsUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))

.Model(model => model.Id(x => x.Id)))

)

@model string

@Html.TextBoxFor(m => m , new {@class = "k-input k-textbox"})

@(Html.Kendo().DateTimePickerFor(m => m).Format("MM/dd/yyyy hh:mm:ss").Name("DateTimeEditor"))

Here is the client side javascript function

function incompleteTrains_Save(e) {

var dateValue;

var timeValue;

if (e.values.DateTimeEditor != null) {

dateValue = e.values.DateTimeEditor.toDateString();

timeValue = e.values.DateTimeEditor.toTimeString();

e.model.set("ARRIVAL_DATE_TIME", new Date(e.values.DateTimeEditor.toDateString() + ' ' + e.values.DateTimeEditor.toTimeString()));

}

else {

var objGet = e.values.get();

var objSet = valueOf(e.values);

e.model.set(e.values.get(), valueOf(e.values));

}

e.sender.dataSource.sync();

}

i need to figure out a way to set the model fields based on e.values in a generic way rather than having to specify the model field specifically like shown for the datetime editor.

something like e.model.set(e.values.???? , val(e.values.???))

Thanks in advance

Grid

answered on 18 Nov 2013

3 answers

115 views

Dropdown populate on parent grid records saved

Hi

I have two different grid on the same tabstrip. (Not a hierarchical grid)

I want to load second grid based on the first grid records in a second grid dropdown.

Is there any other good way to populate second grid dropdown when the first grid has new record added or edited?

At the moment, I am refresing the dropdown value on the drop down event. But it takes some time and it doesnt look good to wait untill open event is completed.

Victor

Grid

answered on 18 Nov 2013

9 answers

341 views

chart and grid not working on the same page

Hello.
I am currently evaluating kendo charts and web controls in asp.net mvc.
I need to add a chart and grid on the same page but i am getting a javascript error :
''Error: Invalid negative value for <svg> attribute height="-0.6666667461395264px"" After a few hours of debugging i found that if i comment out the css reference line :
<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" />
then the chart is rendered correcty but the grid styles are messed up.

@using Kendo.Mvc.UI

@using System.Data

@{

var datalist = new DataTable();

datalist.Columns.Add(new DataColumn() {ColumnName = "col1", DataType = typeof (string)});

datalist.Columns.Add(new DataColumn() { ColumnName = "col2", DataType = typeof(string) });

datalist.Rows.Add(new object[] {"dsd", "dcf"});

}

<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" />

<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.default.min.css")" rel="stylesheet" />

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>

@(Html.Kendo().Grid(datalist)

.Name("datagrid123")

.Columns(columns =>

{

//add grid columns

columns.Bound("col1").Width(100).Title("col1").Visible(true).HtmlAttributes(new { @class = "dsss" });

columns.Bound("col2").Width(100).Title("col2").Visible(true).HtmlAttributes(new { @class = "dsss" });

})

.Scrollable(scr => scr.Enabled(true))

.Sortable(builder => builder.Enabled(true))

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

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

))

@(Html.Kendo().Chart()

.Name("chart")

.Title("Internet Users")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series => {

series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");

series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");

})

.CategoryAxis(axis => axis

.Categories("2005", "2006", "2007", "2008", "2009")

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Format("{0}%"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

Is this a bug or am i doing something wrong?
Nick.
Oh,Great toolkit i would like to add.

Chart

answered on 18 Nov 2013

3 answers

959 views

Configure DropDownList to not preselect the first item.

How do I configure a DropDownList to show as empty when the page first loads? Whatever I try, it preselects the first item.

I'm trying to use this as a guide, but nothing is working:

http://demos.kendoui.com/web/dropdownlist/mvvm.html

DropDownList

answered on 18 Nov 2013

2 answers

106 views

Multi List -- Adding items that are not in the auto-complete list

I am using JSON To populate the AutoComplete List of the MultiSelect like Below:

Controller

public JsonResult PopList(string name)

{

var lstNames = db.GetNames.Select(e => new

{

name = e.OrgNames

});

return Json(orgs, JsonRequestBehavior.AllowGet);

}

Razor:

@(Html.Kendo()

.MultiSelect()

.Name("nameBox")

.AutoBind(true)

.Placeholder("Select names...")

.DataTextField("name")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("PopList", "ListNames");

})

.ServerFiltering(true);

})

)

Can I bind the Value to a list that is not in the list I am using for the auto-complete list?

I attached a image.

If the user wanted to type a name and add it, or if the value being bound are not in the list can it be added?

When saved the items would then appear in the list.

MultiSelect

answered on 17 Nov 2013

4 answers

120 views

Kendo Validation Client Validation on IE 9

Hi,

We are using Kendo Controls for MVC (kendo UI Version 2013.1.514) in our project and we have some cross browser compatibility issue.

Specifically, the Kendo client side validations (unobstrusive) does not work as expected in IE 9. Usually when you focus a required field control (textbox for instance) and move to the next control without entering data, the unobstrusive validation triggers and shows the message. The same is true when you directly hit submit without entering any required fields.

The application works fine in Chrome and Firefox but it does not work in IE 9.
This is how we are triggering validate function.

$(document).ready(function () {

var form = $("form");

var validator = form.kendoValidator().data("kendoValidator");

$("#btnSubmit").click(function () {

if (validator.validate()) {

form.submit();

}

});

View Model Binding

@using (Html.BeginForm())

{

@Html.ValidationSummary(true)

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

<span>

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

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

</span>

--- omitted for brevity

<p>

             <input id="btnSubmit" type="submit" value="Add Customer" />

        </p>

}

Attached other files for support.

Any help is highly appreciated. Thanks.

General Discussions

answered on 15 Nov 2013

1 answer

484 views

Add MultiSelect Values that are not in the bound list

I am populating The auto-complete portion of the Multi-Select like below

Controller:

public JsonResult lstNames(string name)

{

var lstOfNames = db.GetNames.Select(e => new

{

name = e.Names

});

return Json(lstOfNames , JsonRequestBehavior.AllowGet);

}

Razor:

@(Html.Kendo()

.MultiSelect()

.Name("names")

.AutoBind(true)

.Placeholder("Select names...")

.DataTextField("name")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("lstNames", "ListNamesView");

})

.ServerFiltering(true);

})

)

I was wondering is it possible to bind the value to a list that is not in the auto-complete list and also be able to type a new name in as the value?

MultiSelect

answered on 15 Nov 2013

1 answer

836 views

Custom Toolbar Template in MVC Grid

I need to create a custom toolbar template for a mvc detail grid.

here is my detail grid definition:

<script id="incompleteTrainTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<CNX.Domain.Entities.CnxRailcar>()

.Name("IncompleteTrains_#=Id#")

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

.Columns(columns =>

{

columns.Bound(o => o.Id).Visible(false);

columns.Bound(o => o.TRAIN_GUID).Visible(false);

columns.Bound(o => o.EQUIPMENT_NUMBER).Width(125);

columns.Bound(o => o.SEQUENCE_NUMBER).Width(75) ;

columns.Bound(o => o.PILE).Width(75);

columns.Bound(o => o.CLASS).Width(75);

columns.Bound(o => o.LOT).Width(75);

columns.Bound(o => o.INBOUND_TRACK).EditorTemplateName("_inboundTrackDropDown").Width(100);

columns.Bound(o => o.EMPTY_TRACK).EditorTemplateName("_emptyTrackDropDown").Width(100);

columns.Bound(o => o.AS_RECEIVED_WEIGHT).Width(100);

columns.Bound(o => o.STATUS);

})

.DataSource(dataSource => dataSource.Ajax()

.PageSize(10)

.Update(update => update.Action("CnxRailcarUpdate" , "MenuTrain" , Model))

.Read(read => read.Action("CnxRailcars", "MenuTrain", new { trainGuid = "#=Id#" })

.Type(HttpVerbs.Post))

.Update(update => update.Action("CnxRailcarUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))

.Model(model => model.Id(o => o.Id)))

.Pageable()

.Sortable()

.Filterable()

.Events(ev => ev.Save("incompleteRailcars_Save"))//.DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))

.ToolBar(tb =>

{

tb.Template(() =>

{

@Html.Kendo().DropDownList().Name("Lot_#=Id#").DataTextField("val").DataValueField("id").DataSource(dataSource => dataSource.Read(read => read.Action("GetTrainLots", "MenuTrain", new { trainGuid = "#=TRAIN_GUID#" })));

});

})

.ToClientTemplate()

)

</script>

Here are my controller actions :

[HttpPost]

public ActionResult CnxRailcars(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)

{

return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));

}

[HttpPost]

public JsonResult GetTrainLots(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)

{

return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));

}

I just can figure out how to force the dropdownlist's datasource to read. Should i be reading from the datasource in the grid's databound event?

Maybe something like this

.Events(ev => ev.Save("incompleteRailcars_Save")).DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))

Maybe i'm going completely in the wrong direction. Any ideas on what i'm doing wrong or missing here?

Thanks in advance

Grid

answered on 15 Nov 2013