Questions on UI for ASP.NET MVC Forum

1 answer

202 views

Panel bar custom helper : how to add item

Hello,

I need to make my own helper of panel bar to manage conditional displaying of items.

I made it like this

public static Kendo.Mvc.UI.Fluent.PanelBarBuilder MovementPanel(this HtmlHelper helper, string name, Boolean withContainer,string Controller, RouteValueDictionary export)

{

Kendo.Mvc.UI.Fluent.PanelBarBuilder myPanel = helper.Kendo().PanelBar()

.Name(name)

.ExpandAll(true)

.ExpandMode(PanelBarExpandMode.Multiple);

PanelBarItem itAction = new PanelBarItem();

itAction.Text = "Actions";

itAction.Items.Add(NewBarItem("Error detail","javascript:void(0)"));

itAction.Items.Add(NewBarItem("File content", "javascript:void(0)"));

PanelBarItem itExcel = new PanelBarItem();

itExcel.Text = "Excel export";

itExcel.Action("ExportToExcel", Controller, export);

itAction.Items.Add(itExcel);

if (withContainer)

{

itAction.Items.Add(NewBarItem("Container history", "javascript:void(0)"));

}

myPanel.ItemAction(ac => ac.Items.Add(itAction));

myPanel.Events(events =>

events.Select("OnSelectAction")

);

return myPanel;

}

private static PanelBarItem NewBarItem(string text, string url)

{

PanelBarItem itTemp = new PanelBarItem();

itTemp.Text = text;

itTemp.Url = url;

return itTemp;

}

But how can I link items to the PanelBarBuilder ?

With this instructions : myPanel.ItemAction(ac => ac.Items.Add(itAction));

Method only returns javascript.

thanks for your help

PanelBar

answered on 05 Dec 2014

1 answer

462 views

[Solved] MVC Grid WebApi vs Ajax binding

Hi!
I've investigated grid control for few hours and came to the confusion with bindings. I found no principal differences between WebApi() and Ajax() bindings. Could you drop some light on this topic: why do they exist separately and when should I use one or another?

Investigation details:

- documentation for MVC grid doesn't have WebApi binding description. It has only a WebService which I think was the predecessor of WebApi binding. Anyway, that didn't explain the differences.

- one difference I've found so far is that by default Ajax binding use POST request, while WebApi binding use GET request. But this behavior can be overriden. So the following examples generate identical network traffik:
1) .DataSource(dataSource => dataSource
.WebApi()
.Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
2) .DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
Changing HttpVerbs.Get to HttpVerbs.Post again generates the same traffik for both bindings.
Obviously my MVC controller works the same too since I don't need to change it to work with one or another binding.

- another difference is in the HTML output which is rendered on the view:
if(kendo.data.transports['webapi']){return 'webapi';} else{throw new Error(...
if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error(...
But that doesn't seem important since network traffik generated by both configurations is the same. Was it done for potential future needs, or did I miss something?

Grid

answered on 05 Dec 2014

1 answer

195 views

Hierarchy - problem with parent ID

How can I get the parent ID when I trying to add new subelement? See attachment.

Sub-grid code template looks like below:

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ZakresViewModel>()

.Name("podzakresy#=IdZakres#")

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

.ToolBar(toolbar =>

{

toolbar.Create().Text("<span class=\"fa fa-plus\"></span> " + SettingsStrings.DodajNowyPodzakres).HtmlAttributes(new { @class = "btn btn-warning", idZakresNadrzedny = "#=IdZakres#" });

})

.Columns(columns =>

{

columns.Bound(c => c.Numer).Width(80).Title(SharedStrings.Numer);

columns.Bound(c => c.Nazwa).Title(SharedStrings.Nazwa);

columns.Command(command => command.Edit().UpdateText(SharedStrings.Zapisz).CancelText(SharedStrings.Anuluj).Text(SharedStrings.Edytuj)).Width(100);

columns.Command(command => command.Destroy().Text(SharedStrings.Usun)).Width(100);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => { model.Id(p => p.IdZakres); })

.Read(read => read.Action("GridPodzakresy_Read", "Settings", new { IdZakresNadrzedny = "#=IdZakres#" }))

.Create(create => create.Action("GridPodzakresy_PopupCreate", "Settings", new { IdZakresNadrzedny = "#=IdZakres#" }))

.Update(update => update.Action("GridZakresy_PopupUpdate", "Settings"))

.Destroy(delete => delete.Action("GridZakresy_PopupDestroy", "Settings"))

)

.Pageable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.Sortable()

.ToClientTemplate()

)

</script>

Main grid code looks like below:

@(Html.Kendo().Grid<ZakresViewModel>()

.Name("grid-zakresy")

.HtmlAttributes(new { style = "height:100%; cursor:default" })

.ClientDetailTemplateId("template")

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

.ToolBar(toolbar => toolbar.Create().Text("<span class=\"fa fa-plus\"></span> " + SettingsStrings.DodajNowyZakres).HtmlAttributes(new { @class = "btn btn-primary" }))

.Columns(columns =>

{

columns.Bound(c => c.IdKontrakt).Visible(false).Filterable(false);

columns.Bound(c => c.IdZakres).Visible(false).Filterable(false);

columns.Bound(c => c.IdZakresNadrzedny).Visible(false).Filterable(false);

columns.Bound(c => c.Numer).Width(80).Title(SharedStrings.Numer);

columns.Bound(c => c.Nazwa).Title(SharedStrings.Nazwa);

columns.Command(command => command.Edit().UpdateText(SharedStrings.Zapisz).CancelText(SharedStrings.Anuluj).Text(SharedStrings.Edytuj)).Width(100);

columns.Command(command => command.Destroy().Text(SharedStrings.Usun)).Width(100);

})

.Pageable(pageable => pageable.Refresh(true).ButtonCount(3))

.Sortable(s => { s.AllowUnsort(true); s.SortMode(GridSortMode.MultipleColumn); })

.Scrollable(scr => { scr.Height("100%"); scr.Enabled(false); })

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => { model.Id(p => p.IdZakres); })

.Read(read => read.Action("GridZakresy_Read", "Settings", new { IdKontrakt = Model.IdKontrakt }))

.Create(create => create.Action("GridZakresy_PopupCreate", "Settings"))

.Update(update => update.Action("GridZakresy_PopupUpdate", "Settings"))

.Destroy(delete => delete.Action("GridZakresy_PopupDestroy", "Settings"))

)

Action in controller when I trying to create new element. At this action I need parent ID.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult GridPodzakresy_PopupCreate([DataSourceRequest] DataSourceRequest request, ZakresViewModel zakres)

{

if (zakres != null && ModelState.IsValid)

{

//some code

}

return Json(new[] { zakres }.ToDataSourceResult(request, ModelState));

}

Thanks in advance

Grid

answered on 05 Dec 2014

1 answer

146 views

Missing server-side values

I'm fairly new to MVC and the Kendo MVC extensions, and I must be missing something fairly basic here.

I have a page with a strongly types model, which uses a Kendo Dropdown List, and two date pickers. When the form is submitted, I do not get the selected values from server-side.

Here's my code:

Model:

public class ExportData

{

public DateTime startDate { get; set; }

public DateTime endDate { get; set; }

public string exportType { get; set; }

}

Chtml:

@using Microsoft.AspNet.Identity

@using Kendo.Mvc.UI

@model InsulinCalculator.Models.ExportData

@using (Html.BeginForm("Export", "Home", FormMethod.Post))

{

<div class="form-group">

<label class="col-md-2 control-label" for="dtpStartDate" style="white-space:nowrap;">Start Date:</label>

<div class="col-md-3">

<div class="input-group">

@(Html.Kendo()

.DatePickerFor(model => model.startDate)

.Name("dtpStartDate")

.Format("MM/dd/yyyy")

.HtmlAttributes(new { style = "width:180px" })

)

</div>

<div class="form-group">

<label class="col-md-2 control-label" for="dtpEndDate" style="white-space:nowrap;">End Date:</label>

<div class="col-md-3">

<div class="input-group">

@(Html.Kendo()

.DatePickerFor(model => model.endDate)

.Name("dtpEndDate")

.Format("MM/dd/yyyy")

.HtmlAttributes(new { style = "width:180px" })

)

</div>

<div class="form-group">

<label class="col-md-2 control-label" for="exportType" style="white-space:nowrap;">Format:</label>

<div class="col-md-3">

@(Html.Kendo()

.DropDownListFor(model => model.exportType)

.Name("exportType")

.HtmlAttributes(new { style = "width:180px" })

.BindTo(new List<string>()

{

"Microsoft Excel (XLSX)",

"Microsoft Word (DOCX)",

"Adobe Acrobat (PDF)"

})

)

</div>

<div class="form-group">

<div class="col-sm-4">

<input type="submit" value="Export Data" class="btn btn-sm bg-purple2 pull-right">

</div>

}

Server-Side:

[Authorize]

[HttpPost]

public ActionResult Export(ExportData oData)

{

Response.Write(oData.startDate + " " + oData.endDate + " " + oData.exportType);

return View();

}

The model comes into the Export method correctly, but the only value that's populated is the exportType (which has a default selection), the two date pickers are completely empty.

I'd like to preserve the selections after the form submit in the pickers / dropdown, and, of course, have the data available to me on the server. Like I said, I seem to be missing something basic, but can't figure out what! Any help is appreciated.

Regards,
Alex

DatePicker

answered on 05 Dec 2014

1 answer

198 views

Is kendo.web.js required for mvc controls ?

I want to know if i can eliminate loading of kendo.web.js for my mvc project.
I am facing performance issues and eliminating unnecessary scripts from bundle, so i want to know whether kendo.web.js is required for mvc or not ?

General Discussions

answered on 04 Dec 2014

8 answers

318 views

Asynchronous File Upload

HI, it is my first time attempting to use the asynchronous file upload method. Normally, I would use the synchronous method for smaller files. But now, I am dealing with video files, which can sometimes be bigger in size, so I want to use the asynchronous method so the user can see the progress (better user experience). I have attached my screenshots for reference.

I also am wondering, is it possible for me to use the ProgressBar in an synchronous file upload? My objective is to use Telerik 100% for my website, so as far as possible, I do not want to rely on any other external script that is not Telerik.

Upload

answered on 04 Dec 2014

1 answer

162 views

Is there an option to export all rows in a grid to PDF

I have a grid with too many rows to fit on the screen. When exporting to Excel, only those rows visible on the screen are exported to the PDF page. With exporting to Excel, I can set excel.allPages = true to save all rows to an Excel file. Is there a way to do so for exporting to PDF?

Thanks.

Grid

answered on 04 Dec 2014

8 answers

328 views

Custom ComboBox column editor for ajax grid

Hello,

I'm trying to accomplish the following: I need an ajax enabled grid (declared with wrappers); the entities of the grid (let's say of type DocumentData) have a reference to another entity (that would be Country) .

Now, when in view mode, the grid should display the Description of the Country: this I accomplish by using the ClientTemplate of the BoundColumn.

When in edit mode, the grid should display a combobox; this combobox must be bound to the action of a controller: this gives us also filtering.

Filtering Country and saving DocumentData with the new selected data works perfect.

The problem appears when we try to edit again: when switching the row to edit mode, the combox does not display the text (the Description property of the Country), but the Id; even so, if we delete the number in the combox, the filtering works again, and also the updating.

Below the code :

@{

Html.Kendo()

.Grid<Teamnet.eViza.Model.Entities.App.DocumentData>()

.Name("gridDocumentData")

.Columns(columns =>

{

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

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

columns.Bound(c => c.IssuedCountry)

.ClientTemplate("#=(IssuedCountry == null) ? '' : IssuedCountry.roDescription #")

.EditorTemplateName("NomLookup");

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

})

.DataSource(dataSource =>

{

dataSource.Ajax()

.CrudWithQueryAndDefaultCommands(

new Teamnet.eViza.Business.Queries.AllEntitiesOfTypeName(typeof(Teamnet.eViza.Model.Entities.App.DocumentData)),

"DocumentData")

.AutomaticRefreshed();

dataSource.Ajax()

.Model(model => model.Id(a => a.Id));

dataSource.Ajax().PageSize(10);

})

.ToolBar(toolbar => toolbar.Create())

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

.AutoBind(true)

.Pageable()

.Filterable()

.Sortable()

.Render();

}

And, the editor template:

@model Teamnet.eViza.Model.Entities.BaseNom

@(Html.Kendo().ComboBoxFor(a => a)

.DataTextField("roDescription")

.DataValueField("Id")

.Filter(FilterType.StartsWith)

.HighlightFirst(true)

.MinLength(1)

.DataSource(dataSource =>

dataSource.Read(read =>

read.Action("Read", "NomComboBox", new { nomType = Teamnet.eViza.WebCommon.Utils.TypeUtils.FullNameWithAssembly(ViewData.ModelMetadata.ModelType) })

).ServerFiltering(true))

.SelectedIndex(0)

)

Attached you can find some pictures of the grid in view mode and edit mode.

Do you have any idea why this might happen ?

Thank you,
Bogdan

Grid

answered on 04 Dec 2014

7 answers

146 views

Demo Project for TreeList 2014.3.1119

Where can I get the demo project source code to look into ?
I was looking for this demo: http://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding.

Also we are also looking for binding the Treelist to dataTable object, which I think should be straight forward like the TreeView, correct ?

TreeList

answered on 04 Dec 2014

2 answers

180 views

Editor template doesn't work in child Kendo Hierarchy Grid

Dear all,

I am confused why my editor template doesn't work in the child grid then I used ("\\#=EditorTemplateName\\#") but it still didn't work . But if I use the editor template in the parent grid, it works. Do anyone here could help me?

Regards,

Rudy

Grid

answered on 04 Dec 2014