Questions on UI for ASP.NET MVC Forum

2 answers

1.5K+ views

Send date as parameter for Data in Datasource

Okey I have been breaking my head over this for hours now and using google but I can not seem to find the right solution

I have a chart that uses a data source and some javascript to send aditional data.

But the DateTime is always null in my controller how do I fix this

View code

@(Html.Kendo().DatePicker().Name("startField")

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

    //.Format("dd-MM-yyyy")

    .Value(DateTime.Now.Date.AddDays(-6))

)

@(Html.Kendo().Chart<ECOnX.Web.Modules.Containers.Mvc.Models.Container.ContainerDataChartViewModel>()

.Name("dataChart")

.Title(Html.Resource("Week"))

.ChartArea(chartArea => chartArea.Background("transparent"))

.DataSource(ds => ds.Read(read => read.Action("ChartContainerData_Read", "ContainerController").Data("containerReadData")))

...

.Tooltip(tooltip => tooltip.Visible(true).Shared(true))

)

And the controller

public ActionResult ChartContainerData_Read(string id, DateTime? startDateTest)

{

using (DataContext context = new DataContext())

{

DateTime startDate = DateTime.Now.Date.AddDays(-6);

DateTime endDate = DateTime.Now.Date.AddDays(7);

..

var json = Json(query.ToList(), JsonRequestBehavior.AllowGet);

return json;

}

General Discussions

answered on 09 Oct 2017

2 answers

1.8K+ views

MVC Grid DataSource Change Event

When the field Changed is a certain field ("WelderStencil"). I want to get the value of the field and got the server to retrieve additional data. I want to then plug the data into the next cell in the grid "WelderName". Then tab to the next cell where the user is going to do some data entry. This is proving extremely complex for some reason. I was using the selectedDataItems but then realized that when adding a new row nothing is selected.

1) How do I get to the modified data on the DataSource Change Event

2) After Making a call to the Server and returning the data needed. How do I plug it into the datasource and have it refresh immediately

3) Then how do I tab or set focus to the 3rd column.

Thanks

Lee

Grid

answered on 09 Oct 2017

1 answer

458 views

How to extend Kendo UI MVC controls on the client side?

I can follow the help topic on how to extend the Kendo UI widgets here, but I'm looking for how to do a similar thing for MVC Controls.

If an MVC control has been initialized and rendered into the page's partial view, how can I tell the MVC control to use my Kendo Widget which was inherited from the original control?

Thank you

General Discussions

answered on 09 Oct 2017

2 answers

214 views

Custom Datasource CRUD operations all perform GET requests

Hello all,

So, as the title states I am having an issue where my grid's CRUD operations all perform GET requests instead of POST, PUT, and DELETE.

Here is my grid and datasource:

@model ERMgtProgram.Models.ProductViewModels.GradeGroupViewModel

@{

ViewBag.Title = "Grade Group";

}

<h2>@ViewBag.Title</h2>

@(Html.Kendo().Grid<ERMgtProgram.Models.ProductViewModels.GradeGroupViewModel>()

.Name("gradeGroupGrid")

.Columns(columns =>

{

columns.Bound(c => c.GradeGroups).Width(140);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

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

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

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 })

.ButtonCount(5)).Navigatable()

.Selectable(selectable =>

{

selectable.Mode(GridSelectionMode.Multiple);

selectable.Type(GridSelectionType.Row);

})

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.MultipleColumn);

})

.Filterable()

.Scrollable()

.DataSource(dataSource => dataSource

.Custom()

.Batch(true)

.PageSize(50)

.Schema(schema => schema.Model(m => m.Id(p => p.GradeID)))

.Transport(transport =>

{

transport.Read(read =>

read.Url("http://localhost:62664/api/gradegroup")

.DataType("jsonp")

.Type(HttpVerbs.Get)

);

transport.Create(create =>

create.Url("http://localhost:62664/api/gradegroup/create")

.DataType("jsonp")

.Type(HttpVerbs.Post)

);

transport.Update(update =>

update.Url("")

.DataType("jsonp")

.Type(HttpVerbs.Put)

);

transport.Destroy(destroy =>

destroy.Url("")

.DataType("jsonp")

.Type(HttpVerbs.Delete)

);

})

)

<script>

$(function() {

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

grid.dataSource.transport.options.update.url = function (data) {

return "http://localhost:62664/api/gradegroup/update/" + data.models[0].GradeID;

}

grid.dataSource.transport.options.destroy.url = function(data) {

return "http://localhost:62664/api/gradegroup/delete/" + data.models[0].GradeID;

}

});

</script>

My datasource is making calls to a remote WebAPI. The read method works, and the data popluates the grid just fine; but, for my create, update, and destroy methods the datasource sends GET requests even after I specify the "Type" on the various transport methods. I have been at this for some time, and it seems like it should work, but it just doesn't change my request types.

I attached a screenshot of the response.

Any help would be greatly appreciated.

Ruben

Grid

answered on 09 Oct 2017

1 answer

360 views

Populating multiple sub-grids with one datasource

Hi,

I am using a grid that initially only pulls the most commonly used data fields for each record in the grid (what I call level 1). Optionally, the user can expand a given row, in which case additional details are displayed in a nested grid, which I call level2. This works fine when a single row is expanded.

I have a method for the user to expand all of the rows currently displayed in the level1 grid. When this occurs, a call is made to the server for each row that is being expanded in order to pull the additional details for the level2 grid for each row. This is a very slow operation when I am displaying a large number of rows in the level1 grid (for example, 100 rows).

I am wondering if it is possible to query the data for all of the rows to be expanded in a single call to the server and then use the resulting data set to populate all of the level2 grids without having to make n round trips to the server for one record at a time. Querying and returning the data for all rows is not a problem. But since each level2 grid is a separate object, I am not sure how to point them all to the appropriate data on the client side, or if it is even possible.

Or is there a better approach to populating multiple level2 grids that would perform well?

Thanks!

Grid

answered on 06 Oct 2017

7 answers

430 views

Empty decimal value in Chrome

I'm trying to get a decimal value into the Kendo numeric textbox from a viewmodel (MVC)
The value for the numeric textbox stays empty in Chrome but not in IE.

Besides that I notice a difference in de HTML output between IE and Chrome:

IE
<input name="Value" class="k-input" id="Value" role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="125,1" style="display: none;" type="text" value="125,100" data-val-required="The Value field is required." data-val="true" data-role="numerictextbox" data-val-number="The field Value must be a number.">

CHROME
<input data-val="true" data-val-number="The field Value must be a number." data-val-required="The Value field is required." id="Value" name="Value" type="text" value="125,100" data-role="numerictextbox" role="spinbutton" style="display: none;" class="k-input" aria-valuenow="" aria-disabled="false" aria-readonly="false">
The initial value of the aria-valuenow is empty in Chrome where IE provides the actual value from the (view)model.

NumericTextBox

answered on 06 Oct 2017

3 answers

251 views

Sprite image overlay with custom theme

Probably I am doing something wrong and hopefully a simple fix - I am seeing the up triangle sprite overlaid on all sprite images when using a custom theme. As seen here.

I had gone through the process of creating a custom theme based off of material through here. In the generated kendo.custom.css file, I replaced all references to images (url('none/sprite.png'); with the proper path on my web server.

Everything looks fine with standard material theme:

<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />

<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

But the sprites become overlaid after I specify my custom theme:

<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />

<link href="../../Content/kendo.custom.css" rel="stylesheet" type="text/css" />

General Discussions

answered on 05 Oct 2017

13 answers

5.1K+ views

Dropdownlist autoclose on open in modal popup

Hi there,

I'm having a problem with a DropDownListFor inside a modal popup when i have the filter option active.

Basically i have this piece of code.

@(Html.Kendo().DropDownListFor(c => c.StopId)
.DataTextField("Name")
.DataValueField("Id").OptionLabel(" ")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ReadStop", "MasterData");
});
}).Filter(FilterType.Contains)
)

If i remove the Filter(FilterType.Contains) it works well, and if its outside of the modal (with the filter) it will work ok also.

Any sugestion? did anyone had the same problem?

Thanks!

M. Macias

DropDownList

answered on 05 Oct 2017

1 answer

120 views

Copy&Paste isssue when using .Tag parameter

We're creating editor with these settings:

01.var editor =

02. html.Kendo()

03. .EditorFor(expression)

04. .Tag("div")

05. .Encode(false)

06. .HtmlAttributes(htmlAttributes)

07. .Messages(x => x.FontNameInherit("font").FontSizeInherit("size"))

08. .Tools(toolsConfigurator)

09. .Events(events => events

10. .Change("onKendoEditorChange")

11. .Execute("onKendoEditorExecute")

12. .Select("onKendoEditorSelect")

13. .Paste("onKendoEditorPaste"));

We use .Tag parameter because we need to access editor content.(Without .Tag editor is in iframe)

So when we're trying to copy & paste in the editor, copied text and cursor always jumps to the bottom of the editor, no matter where it was.

Without .Tag, pasting works fine.

Can You suggest any possible solution?

Thanks.

Editor

answered on 05 Oct 2017

1 answer

177 views

Missing images in spreadsheet template

I'm importing legacy spreadsheet templates with images. When I load the spreadsheet, the images are missing. Does the spreadsheet control recognize image formats?

I've attached the legacy excel template, with the corresponding image of it loaded in the spreadsheet control.

I'm using the Upload control to save the templates as byte streams in a SQL Server database.

Spreadsheet

answered on 05 Oct 2017