Questions on UI for ASP.NET MVC Forum

2 answers

443 views

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

146 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

400 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

1.0K+ 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

139 views

[Solved] 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

153 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

528 views

[Solved] 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

891 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

2 answers

275 views

Initially loading data locally with remote data source

I have Grid View which I'm using with a remote data source but initially populating with local data. Basically the same requirement as the following
http://www.kendoui.com/forums/kendo-ui-web/grid/initial-load-locally-with-remote-datasource.aspx except that I'm using .NET MVC extensions.

Its essentially working as a normal remotely loaded grid view but I'm also passing data with a view model on the initial page load.

This seems to work fine (at least with a smallish data set) however I can't find any other examples of anyone doing this which makes me wonder if I'm being stupid and there is a reason I shouldn't do this? Is the fact the I'm using 2 data set likely to cause issues that I've not yet discovered? Would the fact I'm not passing my data DataSourceResult in Index() mean I bring more data to the server than I need to? The data set for this isn't big, but it's being pulled together from various sources so it is quite slow, so speed is a big consideration for me.

My Grid view is as follows

@model IEnumerable<MVCCOD.ViewModels.ProviderDisputeViewModel>

@(Html.Kendo().Grid(Model).Name("Disputes").Columns(c => {

c.Bound(p => p.ID);

c.Bound(p => p.BillingPrvName);

/* etc */

}

).

DataSource(d => d

.Ajax()

.Read(r => r.Action("JsonRead", "ProviderDispute")).PageSize(50)

).

Pageable().

Sortable())

Controller is below where the view is loaded via ActionIndex

public class ProviderDisputeController : Controller

{

public ActionResult Index()

{

return View(GetDisputes());

}

public ActionResult JsonRead([DataSourceRequest] DataSourceRequest request)

{

return Json(GetDisputes().ToDataSourceResult(request));

}

private List<ProviderDisputeViewModel> GetDisputes()

{

/* etc */

}

Grid

answered on 14 Nov 2013

1 answer

376 views

Kendo Grid Header - column context menu replaces default "sort" when clicking Header text

I have a Kendo grid with sorting, filtering and column menu enabled. Out of the box, there are two clickable actions in each column header:
* Clicking the title in the column header sorts the data in that column
* Clicking the chevron column menu icon displays the column menu options

What I’d like to accomplish - instead of a sort being applied when the title in the column header is clicked is for the column menu options (sort asc, sort desc, columns, filter) to appear. Essentially, I want the title in each column header to take the place of the chevron icon. Is this possible? The main motivation is that some of the columns are just too narrow (ex: 40px)to properly display all the default icons. Is there some event that can be intercepted to do this? BTW, I am using the MVC Html wrappers to setup the grid - if that matters.

Thanks,
R Cornish

Grid

answered on 14 Nov 2013