Questions on UI for ASP.NET MVC Forum

3 answers

143 views

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

297 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

101 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

115 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

780 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

108 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.

DatePicker

answered on 13 Jul 2018

9 answers

156 views

grid

Hi ,

this is my grid:

@using TaskManagementUI.Models
@model InfoModel
<link href="~/Css/SavedManagementProjects.css" rel="stylesheet" />
<script src="~/JavaScript/SavedManagementProjects.js"></script>

<script type="text/kendo" id="DevelopersTemplate">
<ul>
#for(var i = 0; i< data.length; i++){#
<li title="#:data[i].Name#">#:data[i].Name#</li>
#}#
</ul>
</script>

@Html.Partial("~/Views/Shared/Info.cshtml", Model)

@(Html.Kendo().Grid<ProjectViewModel>()
.Name("GridManagementProjects")
.Columns(columns =>
{
columns.Bound(c => c.ProductID).Title("Product Id").Hidden();
columns.Bound(c => c.ProductName).Title("Product Name").Hidden();
columns.Bound(c => c.Name).Title("Name").Width(120)
.Filterable(f => f.UI("NamesProjectFilter")
.Mode(GridFilterMode.Row)
.Extra(false).Messages(m => m.Info("Show items with this name"))
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))));
columns.Bound(c => c.Leader.Name).EditorTemplateName("LeaderEditor").Title("Leader").Width(150)
.Filterable(f => f.UI("developersFilter")
.Mode(GridFilterMode.Row)
.Extra(false).Messages(m => m.Info("Show items with this leader"))
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))));
columns.Bound(c => c.CodeReviewer.Name).EditorTemplateName("CodeReviewerEditor").Title("Code Reviewer").Width(150)
.Filterable(f => f.UI("developersFilter")
.Mode(GridFilterMode.Row)
.Extra(false).Messages(m => m.Info("Show items with this code reviewer"))
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))));
columns.Bound(c => c.DevelopersDataSource).Width(200).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
.Filterable(f => f.UI("developersMultiFilter")
.Extra(false)
.Messages(m => m.Info("Show items contain these developers")))
.Sortable(false);
columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<div style='width:94px; height:94px;'><canvas id='projectManagementChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>");
columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").Format("{0: MM/dd/yyyy}").Width(130);
columns.Bound(c => c.ActualEndDate).Title("Actual End Date").Format("{0: MM/dd/yyyy}").Width(130);
columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Width(130).Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Width(130).Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.GitUrl).Title("Git Url").ClientTemplate("<a href='#= GitUrl #'>#= GitUrl #</a>").Width(120);
columns.Bound(c => c.StageId).Title("Stage").EditorTemplateName("StageEditor")
.Filterable(f => f.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))))
.Width(110);
columns.Bound(c => c.Description).Title("Description").Width(250).HtmlAttributes(new { @class = "customCell" });

if (User.IsInRole("secSftwrProjMgmtDepl"))
{
columns.Bound(c => c.VstsBuildName).Title("Build Name").Width(120);
columns.Bound(c => c.VstsRepository).Title("Repository").Width(120);
columns.Bound(c => c.OctoProject).Title("Octopus Project").Width(120);
}
columns.Command(command =>
{
command.Custom("ADDTASK").Text("Add Task").Click("addTask");
command.Custom("DeployProject").Click("DeployProject").Text("Deploy");
if (User.IsInRole("secSftwrProjMgmtAdmn"))
{
command.Custom("CompleteProject").Click("CompleteProject").Text("Complete");
}
command.Custom("ProjectRequirements").Text("Requirements").Click("addProjectConditions");
}).Width(160).HtmlAttributes(new { id = "addTaskButton" });
columns.Command(command => { command.Edit().UpdateText(" ").Text(" ").CancelText(" "); if (User.IsInRole("secSftwrProjMgmtAdmn")) { command.Destroy().Text(" "); } }).Width(150);

})
.Groupable(g => g.Enabled(false))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar" style="float: left">
@(Html.Kendo().DropDownList()
.Name("ProjectsByProduct")
.OptionLabel("SELECT PRODUCT")
.DataTextField("Name")
.DataValueField("ID")
.AutoBind(false)
.Events(e => e.Change("ProductGroupChange"))
.DataSource(ds =>
{
ds.Read("ProductList", "Product");
}))
<a class="k-button k-grid-excel k-button-icontext" href="#">
<span class="k-icon k-i-excel"></span>Export to Excel
</a>

@if (User.IsInRole("secSftwrProjMgmtAdmn"))
{
<a style="margin:0 "class="k-button k-button-icontext" onclick='addProjectAjax()' href="#">
<span class="k-icon k-i-add"></span> ADD PROJECT
</a>
}
</div>
</text>);
})

.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Excel(excel => excel
.AllPages(true)
.FileName("Projects.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Scrollable()
.Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("FilterMenuInitProject").DataBound("onDataBoundSavedProjects").Cancel("createPieAfterCancellation").Edit("onProjectEdit").Save("onProjectSave").ExcelExport("exportProjects"))
.DataSource(dataSource => dataSource
.Ajax()
.Group(group => group.Add(p => p.ProductName))
.PageSize(20)
.Events(events => events.Error("errorHandlerProject"))
.Read(read => read.Action("GetSavedManagementProjects", "Project").Data("additionalData"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(a => a.ActualStartDate).Editable(false);
model.Field(a => a.ActualEndDate).Editable(false);
model.Field(a => a.PercentCompleted).Editable(false);
})
.Update(update => update.Action("UpdateProject", "Project").Data("serialize"))
.Destroy(update => update.Action("DeleteProject", "Project").Data("serialize"))))

in the tool bar I have dropdown list for doing filter on the group.

also I have drop down list filter on this column in the grid : columns.Bound(c => c.Name).Title("Name").Width(120).Filterable(f => f.UI("NamesProjectFilter").

this filter is for presenting name list for the projects.
I want that this drop down list will present only projects that belong to the selected product (in the group filter).

so i did like your example of cascading drop down list https://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist:

this is the drop down list of the projects

var NamesProjectFilter = function (element) {

element.kendoDropDownList({
autoBind: false,
cascadeFrom: "ProjectsByProduct",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "/Project/NamesProjectList"
}
},
valuePrimitive: false,
optionLabel: "Select a project..."

});

}

this is the function in the controller:

public ActionResult NamesProjectList([DataSourceRequest] DataSourceRequest request, int? ID)
{
List<string> projects;
if (ID != null)
{
projects = m_Repository.FindAllBy<TaskManagement.Data.Project>(p => p.ProductID == ID)
.OrderBy(x => x.Name)
.Select(x => x.Name).ToList();
}
else
{

projects = m_Repository.GetAll<TaskManagement.Data.Project>()
.OrderBy(x => x.Name)
.Select(x => x.Name).ToList();
}
return Json(projects, JsonRequestBehavior.AllowGet);

}

everything is working fine, the value of the selected product is sent in the network. but in the controller I always get null.

can someone help me please?

Thanks!

General Discussions

answered on 13 Jul 2018

3 answers

131 views

PanelBar busy indicator

Hello,

Is there any way to show a busy indicator on PaneBar (like Kendo Grid), when loading data or doing a long operation?

Thanks for your help.
Regards

PanelBar

answered on 13 Jul 2018