Questions on UI for ASP.NET MVC Forum

1 answer

239 views

Hello,

I'm having problems getting my grid to show the data I am passing to the datasource. Although the data is returned it's not displaying inth e gird, I simply get the message "No items to display". The data passed in is an array of Id's.

var testArray = [17, 18, 19];

function tabButton(e) {

console.clear();

let grid = $("#grid").data("kendoGrid");

let filter = $(e).data("filter");

grid.dataSource.read({ array: testArray });

grid.refresh();

}

The controller conditionally handles the presence of an array retunring selected records where true and all records where false. This means that if there is no array of data it simply returns everything.

public ActionResult GetTabVessels(int[] array, [DataSourceRequest] DataSourceRequest request)

{

//Make a list

List<Vessel> vessels = new List<Vessel>();

var vessel = unitOfWork.VesselRepository.Get();

DataSourceResult result = vessel.ToDataSourceResult(request);

JsonResult data;

if (array !=null)

{

//Populate list based on array of Id's

foreach (var id in array)

{

vessels.Add(unitOfWork.VesselRepository.FindSingleOrDefault(x => x.Id == id));

}

//Create Json variable for data source result.

data = Json(vessels, JsonRequestBehavior.AllowGet);

}

else

{

data = Json(result, JsonRequestBehavior.AllowGet);

}

data.MaxJsonLength = int.MaxValue;

return data;

}

This grid is straight forward enough

@(Html.Kendo().Grid<Force3Beta.ViewModels.VesselSearchResultsViewModel>()

.Name("VesselGrid")

.Columns(columns =>

{

columns.Select().Width(50);

columns.Bound(p => p.Name);

columns.Bound(p => p.Type);

})

.Pageable()

.Sortable()

.Events(ev=>ev.Change("onChange"))

.PersistSelection()

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("GetVessels", "Test"))

))

The array function is triggered with a button in the UI for the sake of testing. I can see in the network tab of the console that requested array of data is returned correctly, I can also see this in the controller as well, but for some reason the grid will not show it.

Can anyone help?

Grid

answered on 20 Jul 2018

3 answers

435 views

Row select + command buttons

I use row select:
http://demos.kendoui.com/web/grid/selection.html to display Window with row details

together with:
http://demos.kendoui.com/web/grid/custom-command.html to add some actions.

And when you click the command buttons, the row select action is called at first place. How do I disable row action on command column?

Thank you for reply.

Grid

answered on 19 Jul 2018

3 answers

132 views

Can't get events to show

I'm using the scheduler for the first time but can't get the events to show up. I've followed the demos as closely as possible and I can see that 108 events are being returned to the AJAX read call to my web api method but can't figure out why they're not displaying. The calendar just remains empty with no javascript errors. I've read this can happen if the field mappings are incorrect, but I've done what the demos do.

Scheduler

answered on 19 Jul 2018

3 answers

1.1K+ views

MVC Nested Tabstrips

When I add a simple @(Html.Kendo().TabStrip() strip inside a tab freom the main @(Html.Kendo().TabStrip() it does not work, I can add grids and other things.

Please advise how to add a @(Html.Kendo().TabStrip() inside another tab

Thanks

Cameron

TabStrip

answered on 18 Jul 2018

6 answers

288 views

Grid foreignkey sorting using parameterMap?

Hello

We have the same problem as others with the sorting of foreignkey fields in the grid.
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/4147227-grid-sorting-foreignkey-column
And it is still not solved...

Our workaround was to add the corresponding text value as a hidden column in the grid and in the Read Action we just replaced the Sorting Fields.

Something like that:

foreach (var sort in request.Sorts)

{

if (sort.Member == "BenutzergruppeId")

sort.Member = "Benutzergruppe";

if (sort.Member == "DepartementId")

sort.Member = "Departement";

}

If we do so, the frontend looks like it would sort the foreign key column but actually the data is sorted by the text field. Exactly what we wanted. And yes we could extend the request to make it more generic, as someone has suggested in the link above, but we have another goal.

We want to include it in our Library and to do that the plan was to do it the following way:
(Please keep in mind that the code has only a prototype state! For example, it does not consider multiple dropdowns in a grid. And I did not copy all the code that is necessary, just the parts that are interesting.)

We created an own new Column Type “DropDown” for the Grid and now we can use it like that:

columns.DropDown(config => config

.Bound(p => p.DepartementId)

.DisplayProperty(p => p.Departement))

.Sortable(true)

.Searchable();

Now we can add a DisplayProperty and our code just added a hidden column for that DisplayProperty. (And the ClientTemplate)

public static GridBoundColumnBuilder<TViewModel> DropDown<TViewModel>(

this GridColumnFactory<TViewModel> factory,

Action<XyzGridBoundDropDownBuilder<TViewModel>> configurator) where TViewModel : ViewModelBase, new()

{

var boundDropDownBuilder = new XyzGridBoundDropDownBuilder<TViewModel>((XyzGrid<TViewModel>)factory.Container);

configurator(boundDropDownBuilder);

// Add a hidden column for the DisplayProperty

var gridBoundColumnBuilderHidden = factory.Bound(boundDropDownBuilder.DropDown.DisplayExprValue);

gridBoundColumnBuilderHidden.Hidden();

gridBoundColumnBuilderHidden.Sortable(true);

// Add the visible DropDown column (return it to allow further configuration)

var gridBoundColumnBuilder = factory.Bound(boundDropDownBuilder.DropDown.ExprValue);

gridBoundColumnBuilder.ClientTemplate($"#={boundDropDownBuilder.DropDown.DisplayProperyName}#");

return gridBoundColumnBuilder;

}

And we add the information of the field in the ViewData for later reuse

public XyzGridBoundDropDownBuilder<TViewModel> Bound(Expression<Func<TViewModel, long>> expression)

{

DropDown.ExprValue = expression;

DropDown.ForeignKeyProperyName = expression.ToMemberExpression().Member.Name;

DropDown.Grid.ViewData["ForeignKeyProperyName"] = DropDown.ForeignKeyProperyName;

return this;

}

public XyzGridBoundDropDownBuilder<TViewModel> DisplayProperty(Expression<Func<TViewModel, string>> expression)

{

DropDown.DisplayExprValue = expression;

DropDown.DisplayProperyName = expression.ToMemberExpression().Member.Name;

DropDown.Grid.ViewData["DisplayProperyName"] = DropDown.DisplayProperyName;

return this;

}

Then it was the goal to completely solve the problem together with de DropDown Column and therefore we wanted to solve the replacement of the fields, like above in C#, in JavaScript which we will copy with the DropDown to the View. And we found out the best place to do that would be in the parameterMap method. And we did something like that:

<script>

$(function() {

var displayProperyName = '@ViewData["DisplayProperyName"]';

var foreignKeyProperyName = '@ViewData["ForeignKeyProperyName"]';

if ('null' !== displayProperyName)

$('body').append("<div id='data-displayProperyName' data-displayProperyName='" + displayProperyName + "'></div>");

if ('null' !== foreignKeyProperyName)

$('body').append("<div id='data-foreignKeyProperyName' data-foreignKeyProperyName='" + foreignKeyProperyName + "'></div>");

$('#BenutzerGrid').data("kendoGrid").dataSource.transport.parameterMap = function(options, operation) {

var optionsResult = jQuery.extend(true, {}, options);

if ('null' !== displayProperyName && 'null' !== foreignKeyProperyName) {

optionsResult.sort.forEach(replaceSortDisplayProperty);

}

var sortStringifyed = '';

optionsResult.sort.forEach(function(item, index) {

sortStringifyed += item.field + "-" + item.dir;

}

);

optionsResult.sort = '';

optionsResult.sort = sortStringifyed;

var result = decodeURIComponent($.param(optionsResult, true));

return result;

}

);

This worked that fare. Therefore we expect to be on the right track. But now finally the part which we are not happy with:

var sortStringifyed = '';

optionsResult.sort.forEach(function(item, index) {

sortStringifyed += item.field + "-" + item.dir;

}

);

optionsResult.sort = '';

optionsResult.sort = sortStringifyed;

var result = decodeURIComponent($.param(optionsResult, true));

return result;

We could not find out which kendo JavaScript method is preparing the options to give it back like that:
sort=Name-asc&page=1&pageSize=15&group=&filter=

Is there a method for that? If not necessary we don’t want to implement it by our self to bring the sort, filter and group objects in the correct string based format.

Actually we just want to place something like that

var optionsResult = jQuery.extend(true, {}, options);

if ('null' !== displayProperyName && 'null' !== foreignKeyProperyName) {

optionsResult.sort.forEach(replaceSortDisplayProperty);

}

for the read type at the beginning of the parameterMap method. The rest can run as before.

Generally, is this we do a recommend way, to do what we want? Or is there a better way? For example is the parameterMap the correct method?

And if we are on the right track, which method generates to correct stringifyed options including the translation of the arrays (sort, filter,..)?

Grid

answered on 18 Jul 2018

1 answer

95 views

MVC MAP, Basic-Usage, Issue displaying map

I have a problem displaying the background (mapvision),

i cant see the map, everything else works, like makers, zoom and navigation control

I am implementing the map control like this : https://demos.telerik.com/aspnet-mvc/map

Map

answered on 17 Jul 2018

1 answer

110 views

Dynamically load a tabstrip header from database

Hallo,
i'm trying to load a tabstrip header from database. I mean, the change Paris, New York etc with data from database. I have read this demo https://docs.telerik.com/aspnet-mvc/helpers/tabstrip/overview#model-binding
with the chapter "Model Binding". This is the source code
@model IEnumerable<rcMDM.Data.MN_DEF_REITER>
@(Html.Kendo().TabStrip()
.Name("reiterStrip")
.BindTo(Model,(item,label)=>
{ item.Text = label.RTR_LABEL; }) )
I have seen that the admins from this forum are from Bulgaria or they understand bulgarian, so below i want to explain my problem on bulgarian too :)
Здравейте,
имам малък проблем с табчетата. Правя една апликация, която трябва да зарежда динамична информация. Една от желанията ми е да използвам табовете. Искам да зареждам само самите наименования на табовете. Съдържанието като грид успях да го свържа и се зарежда, но не успях да направя същото с табовете. Ще съм много благодарен за помощта :)

Best wishes,

Grid

answered on 17 Jul 2018

6 answers

741 views

Localization problems

Hello.

I'm currently working on a Spanish application. The project uses the localization javascript files as described here:

http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization

This is my code:

The problem is that 'kendo.messages.es-ES.min.js' is ignored. There are some text that are not translated. Checking every thing we found out that the translations were taken from the 'Kendo.Mvc.resources.dll' in the 'bin/es-ES' folder. This 'dll' has some texts translated and orders not as you can see in the attached image. You can noticed that in the 'kendo.messages.es-ES.min.js' the texts are translated, but in the resulting grid there's not the case.

After that I figured out that if I delete the file 'Kendo.Mvc.resources.dll' in 'bin/es-ES' while running the application in the localhost the texts are translated using the translations of the 'kendo.messages.es-ES.min.js'. So I suppose that the 'kendo.messages.es-ES.min.js' overwrites the default English messages but the 'Kendo.Mvc.resources.dll' in 'bin/es-ES overwrites 'kendo.messages.es-ES.min.js' no matter where I call this javascript.

So, how can I change this behavior giving preference to the 'kendo.messages.es-ES.min.js' javascript? Or is any way to edit the Spanish 'Kendo.Mvc.resources.dll' and add the missing messages?

General Discussions

answered on 16 Jul 2018

2 answers

103 views

DataSource Component

Is it possible to access the data client side for this control?

https://demos.telerik.com/aspnet-mvc/datasource

The example code has a call to dataSource1.fetch();

I am trying to figure out how this works as datasource1 is declared using the razor syntax and isnt actually available in the script block (at least I can't get it to work)

Can someone help me figure this out or point me to an example that I can use for this that uses a datasource that isnt declared and accessed in the same block.

Thank for any help you guys can provide.

General Discussions

answered on 16 Jul 2018

4 answers

3.5K+ views

DateTime not posting correctly to controller

Hello,

I have an issue regarding the posting of a DateTimePicker value to a controller. Code is as follows:

View:

1.@(Html.Kendo().DateTimePickerFor(model => model.FechaLimite)

2. .Format("dd/MM/yyyy hh:mm tt")

3. .TimeFormat("hh:mm tt")

4. .Value(DateTime.Now)

5. .HtmlAttributes(new { @class = "form-control" }))

Controller:

1.[HttpPost]

2.[ValidateAntiForgeryToken]

3.public ActionResult Create([Bind(Include = "FechaLimite")] TiqueteViewModel viewModel)

4.{

5. if (ModelState.IsValid)

6. {

7. }

8.}

There are other fields inside the viewModel which I have omitted for the sake of simplicity, but it's a really weird behavior, I'll explain:

If I POST the form with the default value that's loaded into the DateTimePicker (DateTime.Now), it posts correctly, see screenshot "POSTDefaultValue".
If I POST the form changing either the date or the time, it POSTS nothing, see screenshot "POSTChangeValue".
If I remove the "Format" from the DateTimePicker, it always posts correctly, however, I need the user to see it in am/pm format, see screenshot "POSTWithoutFormat".

When the value is not POSTed, I get the error in screenshot "DateTimeError", like in case number 2.

So I'm guessing it has something to do with the format validation once the date is changed. I have set the same culture to both kendo on the client-side and on the server side using the guides you have available. Just in case, the culture I've set is "es-CR".

Any idea what could be causing this behavior ? If an example is needed I can isolate the issue and attach a project.

Date/Time Pickers

answered on 13 Jul 2018