Questions on UI for ASP.NET MVC Forum

3 answers

235 views

I’m trying out the grid control and have a problem. When I create a new project in VS 2012 using the Kendo wizard and simply replace the sample controls with a simple grid (source code attached), my grid headers don’t look right – there is a white space at the top of the header cells. This space doesn’t appear in the “Getting Started with MVC” samples that I downloaded. I can’t figure out how to correct this. Screenshot of my grid is also attached.

Grid

answered on 19 Nov 2013

1 answer

124 views

Server Filtering generates ajax requests continuously if the initial request doesn't return anything

I have a MultiSelect control set up like this:

01.@(Html.Kendo().MultiSelect()

02. .Name("myCombo")

03. .DataTextField("Text")

04. .DataValueField("Value")

05. .AutoBind(false)

06. .DataSource(source =>

07. {

08. source.Read(read =>

09. {

10. read.Action("_SearchAction", "Controller");

11. })

12. .ServerFiltering(true);

13. })

14.)

And I noticed that if I type in a value that doesn't match any records in the database, it keeps on sending ajax requests. Typing something that matches my criteria stops any further requests. Is there a reason why it would behave like that?

MultiSelect

answered on 19 Nov 2013

1 answer

316 views

Simple Example using a Kendo DataGrid

I am new to Kendo for MVC Asp.net. Can you point me to a simple example for using the kendo datagrid? Maybe a simple tutorial or just a simple code example. Thanks

Grid

answered on 19 Nov 2013

5 answers

240 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

160 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

386 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

118 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

345 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

965 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

109 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