Questions on UI for ASP.NET MVC Forum

6 answers

88 views

Multiple Grid Filters Throwing String Error

Hi there,

I set up my grid to use multiple grid filters which are combo boxes. These filters allow you to refine your displayed data however there is a slight problem when using them. Initially they work fine but when you use them in conjunction with one another you get an error

System.FormatException: String was not recognized as a valid DateTime.

I made 4 filters, 3 of them are string values and 1 of them is a datetime (see below).

@(Html.Kendo().ComboBox()

.Name("periods")

.Suggest(true)

.Filter("contains")

.DataTextField("Text")

.DataValueField("Value")

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

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "All",

Value = "30000"

},

new SelectListItem() {

Text = "3 Months",

Value = "90"

},

new SelectListItem() {

Text = "21 Days",

Value = "21"

}}))

@(Html.Kendo().ComboBox()

.Name("locations")

.Placeholder("-- Filter Region --")

.Suggest(true)

.Filter("contains")

.DataTextField("Text")

.DataValueField("Value")

.AutoBind(false)

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

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Aberdeen",

Value = "1"

},

new SelectListItem() {

Text = "Norway",

Value = "2"

},

new SelectListItem() {

Text = "Southern Sector",

Value = "3"

},

new SelectListItem() {

Text = "North Sea",

Value = "4"

},

new SelectListItem() {

Text = "Brazil",

Value = "7"

},

new SelectListItem() {

Text = "Other",

Value = "8"

},

new SelectListItem() {

Text = "All",

Value = ""

}}))

@(Html.Kendo().ComboBox()

.Name("owners")

.Placeholder("-- Filter Owner --")

.Suggest(true)

.Filter("contains")

.DataTextField("company_name")

.DataValueField("company_name")

.AutoBind(false)

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

.DataSource(ds =>

{

ds.Read("toolbar_Owners", "Home");

}))

@(Html.Kendo().ComboBox()

.Name("vessel_types")

.Placeholder("-- Select Type --")

.Suggest(true)

.Filter("contains")

.DataTextField("spot_name")

.DataValueField("spot_name")

.AutoBind(false)

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

.DataSource(ds =>

{

ds.Read("toolbar_Types", "Home");

}))

If you filter on PERIODS and REGION there is no error at all. If you filter on PERIODS and any other filter the above error regarding datetime is thrown. Here is the javascript that handles the filters:

function filterChange() {

var filters = [];

var grid = $('#Grid').data('kendoGrid');

var ddl_owners = $("#owners").getKendoComboBox().value();

var ddl_region = $("#locations").getKendoComboBox().value();

var ddl_types = $("#vessel_types").getKendoComboBox().value();

var ddl_periods = $("#periods").getKendoComboBox().value();

var value = this.value();

//Convert value of dropdown to int

intDays = parseInt(value),

today = new Date(),

addDays = ddl_periods.value;

today.setDate(today.getDate() + intDays);

today.setHours(0, 0, 0, 0);

if (ddl_owners) {

filters.push(

{

field: "owner_company",

operator: "eq",

value: ddl_owners

}

);

}

if (ddl_region) {

filters.push(

{

field: "current_location_spotlist_id" && "spotlist_id",

operator: "eq",

value: ddl_region

}

);

}

if (ddl_types) {

filters.push(

{

field: "vessel_type",

operator: "eq",

value: ddl_types,

}

);

console.log("Type" + ddl_types);

}

if (ddl_periods) {

filters.push(

{

field: "fixture_stop",

operator: "lte",

value: today

}

);

console.log("Period: " + today);

}

grid.dataSource.filter({

logic: "and",

filters: filters

});

}

I am looking for some help on where I may have gone wrong.

Thanks

Grid

answered on 18 May 2016

2 answers

253 views

Dropdown remote binding not matching the selecteditem

Because a grid i try to implement has records with many (large) dropdownboxes, i have set them to autobind false. Now when a record is set to editmode, the dropdownbox is empty, when clicked it is populated and the appropiate item is selected. Because an empty dropdownlist is confusing the user, i'm looking for a solution where the value is displayed.

View:

@(Html.Kendo().Grid<Indato.Data.EF.Models.Oplovk>()

.Name("grid")

.Columns(columns =>

{

columns.ForeignKey(c => c.idCategory, (System.Collections.IEnumerable)ViewData["Categories"], "idCategory", "Name").Title("Category").EditorTemplateName("Category");

})

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

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

})

)

.ClientDetailTemplateId("template")

Editortemplate:

@model object

@(

Html.Kendo().DropDownListFor(m => m)

.AutoBind(false)

.DataSource(ds =>

{

ds.Read("Catgories", "Category", new { Area = "Tabellen" });

})

.DataTextField("Name")

.DataValueField("idCategory")

)

DropDownList

answered on 18 May 2016

3 answers

596 views

AutoComplete shows undefined and null in template

I have an AutoComplete control in a in a client template that uses the ToClientTemplate method

@(Html.Kendo().AutoComplete()

.Name("presenter")

.DataTextField("DisplayText")

.Filter("contains")

.MinLength(3)

.HtmlAttributes(new { style = "width:100%" })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Search", "People", new { SPHostUrl = ViewBag.SPHostUrl })

.Data("onPresenterAdditionalData");

})

.ServerFiltering(true);

})

.Template("<div><span class=\"k-state-default\">${ data.DisplayText }</span></div><div><span class=\"k-state-default\">${ data.Title }</span></div>")

.ToClientTemplate())

The controller is returning data and I have used Fiddler to make sure it is being sent to the browser.

The dropdown just shows "undefined" for DisplayText and "null" for Title.

The above control is in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"> and render using

var template = kendo.template($("#documentDetailsTemplate").html());

When I select one of the options, it displays the DisplayText of the selected option.

AutoComplete

answered on 18 May 2016

1 answer

173 views

Change edit to single click

Can the edit function for the MVC Scheduler be changed from a double click to a single click event?

Scheduler

answered on 18 May 2016

3 answers

271 views

Drag and Drop between TreeLists

How do I drag and drop between two TreeLists?

TreeList

answered on 17 May 2016

1 answer

165 views

Clearing the Cell Modified Indicators

I have a page where the update is put in motion using a custom button click that resides in the Kendo Toolbar.

The editing is done using GridEditMode.InCell and everything is working for the update but at the end of the process the little red triangle is remaining in the modified cells.

I have tried the following to clear them but it is not working:

....
grid.dataSource.read();
resetGridDirtyIndicators();
...

function resetGridDirtyIndicators (){

var grid = $('#Grid').data().kendoGrid;

var $gridData = grid.dataSource.data();

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

var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']");

var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")");

if (cell.hasClass("k-dirty-cell")) {

debugger;

cell.removeClass("k-dirty-cell");

}

Any Help would be greatly appreciated.

Thanks,

Reid

Grid

answered on 17 May 2016

1 answer

63 views

String changes to date

Good day,

In the spreadsheet control any time you type a string that resembles a date or time, the format for the cell changes to Date.

For instance, if you go to the DataSource Binding demo at http://demos.telerik.com/aspnet-mvc/spreadsheet/datasource and type 10:00 PM in the ProductName column the current date will be displayed in the cell. If you type 10-10-10 it will be changed to 10/10/2010. If you type 10:99 it gets changed to 11:39.

So with a spreadsheet that is bound to a datasource. How do you force a column to keep the input string as a string?

Thanks and Regards

Spreadsheet

answered on 17 May 2016

2 answers

1.5K+ views

Getting a column value and passing to javascript

Hello,

My grid has a column called "vessel_idx" that shows all the IDs relating to each vessel(obviously), each row also has a button that calls my own Javascript function. I need to pass the value of the vessel_idx into this function, does anyone know how I can accomplish this?

Here is my grid with the required column and button as described above.

@(Html.Kendo().Grid<MyProject.ViewModels.SpotGridViewModel>()

.Name("Grid")

.Deferred()

.Columns(columns =>

{

columns.Bound(c => c.vessel_idx);

columns.Template(@<text></text>)

.ClientTemplate("<ul class='grid-options'>" +

"<input type='button' id='mybtn' value='Prompt' />"+

"</ul>").Width(200);

})

)

Here is my javascript code that I need to pass the vessel_idx into

$("#Grid").on("click", "#mybtn", function (e) {

var id = vessel_idx;

$.ajax({

url: "@Url.Action("buttonPrompt", "Home")",

type: "GET",

data: { id: id },

dataType: 'json',

cache: false,

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert("Error" + errorThrown);

console.log(errorThrown);

},

success: function (data) {

console.log("yay");

}

});

Many thanks

Grid

answered on 17 May 2016

1 answer

442 views

Limit TreeView depth during drag and drop

I have two TreeViews which have drag and drop enabled. I am trying to limit the depth when someone tries to drag a branch to the other tree.

Example:

TreeA (root)

TreeA.1.0 (child; level 1)

TreeA.1.1 (child; level 2)

TreeB (root)

TreeB.1.0 (child; level 1)

TreeB.1.1 (child; level 2)

Given the above two trees and I desire to only have nodes up to 3 levels deep (ie. no deeper than child level 2) If a user drags "TreeB.1.0" under "TreeA.1.1" then TreeA will have children 4 levels deep.

I see events Drag and Drop which allow me to validate the destination tree to prevent this. I tried to implement custom data elements as HtmlAttributes in my OnDemand TreeViewItemModel DataSource in server-side code:

TreeViewItemModel node = new TreeViewItemModel();

...

node.HtmlAttributes.Add(new KeyValuePair<string, string>("data_level", level.ToString()));

This

TreeView

answered on 16 May 2016

1 answer

171 views

Using MultiSelect (Single Mode) attempting to create a .TagTemplate using maxTotal or currentTotal

I'm looking to get the MultiSelect list to display something like "1 out of 15" But when using the "maxTotal" found here tagTemplate, I get "maxTotal is not defined"

1.<script type="text/x-kendo-template" id="selectedRoleTemplate">

2. #:data.length# out of #:maxTotal#

3.</script>

4.<script type="text/javascript">

5. var selectedRoleTemplate = kendo.template($("#selectedRoleTemplate").html(), { useWithBlock: false });

6.</script>

01.@(Html.Kendo().MultiSelectFor(m => m)

02. .AutoBind(true)

03. .AutoClose(false)

04. .DataValueField("RoleId")

05. .DataTextField("RoleName")

06. .TagMode(TagMode.Single)