Questions on UI for ASP.NET MVC Forum

4 answers

790 views

typescript duplicate identifier build errors after updating to VS 2015 update 3

hi,

i updated my VS 2015 with update 3 and now i cannot build my project that uses Kendo MVC Grid, v2015.1.429.340.

i am getting a huge number of errors like these:

KendoUIMVC\typescript\kendo.all.d.ts(245,9): error TS2300: Build:Duplicate identifier 'paramName'.
KendoUIMVC\typescript\kendo.all.d.ts(246,9): error TS2300: Build:Duplicate identifier 'useWithBlock'.
KendoUIMVC\typescript\kendo.all.d.ts(249,11): error TS2300: Build:Duplicate identifier 'Class'.
KendoUIMVC\typescript\kendo.all.d.ts(254,11): error TS2300: Build:Duplicate identifier 'Observable'....

how do i fix this?

thanks.

Grid

answered on 15 Jul 2016

1 answer

105 views

Filter Column - non sequential

I am trying to set the filer option for columns A to G and also column Q but cannot seem to get any syntax to work.

The below works for setting the filter option for columns A to G but when I try to also include Q I get an error or only column Q is filtered

.Filter(filter =>
{
filter.Ref("A1:G7000").Columns(columns => { });
})

Error

.Filter(filter =>

{
filter.Ref("A1:G7000;Q1:Q7000").Columns(columns => { });
})

Error
.Filter(filter =>
{
filter.Ref("A1:G7000,Q1:Q7000").Columns(columns => { });
})

Only Column Q is filterable

.Filter(filter =>
{
filter.Ref("A1:G7000).Columns(columns => { });
filter.Ref("Q1:Q7000").Columns(columns => { });

})

Any help on the syntax would be appreciated

Jeff

Spreadsheet

answered on 15 Jul 2016

9 answers

422 views

Grid Updates and Setup

I was hoping this project would just disappear, but unfortunately it has not. And I'm beating my head against a wall to get this thing figured out.

I'm building a CSV file uploader, which upon upload it opens the CSV file and parses out the column headers. It then presents this in a grid with an additional column that contains a dropdown. It's to be used for custom CSV imports. Once the grid is displayed, the user would go down each row, mapping a column to a property.

The grid is being loaded via one of the ViewModel properties.

@using FileUploader_Mapper.Models

@model CSVColumnsViewModel

@{

ViewBag.Title = "Result";

}

<style>

.k-grid td {

line-height: 2em;

padding: 0 0 0 1em;

}

</style>

<h2>Result</h2>

<p></p>

@(Html.Label("lblMisc", "Columns from CSV File: " + Model.CSVFile))<br/>

@(Html.Kendo().Grid(Model.Columns)

.Name("csvGrid")

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

.TableHtmlAttributes(new { @class = "table-condensed" })

.Columns(col =>

{

col.Bound(c => c.ColumnNumber).Width(25).Title("Col #");

col.Bound(c => c.ColumnName).Width(400).Title("Column Name");

col.ForeignKey(c => c.MappedTo, Model.MappingProperties, "Id", "Name").Title("Mapped To");

})

// .Pageable()

.DataSource(ds => ds

.Ajax()

// .PageSize(20)

// .ServerOperation(false)

.Model(m =>

{

m.Id(c => c.ColumnNumber);

m.Field(c => c.ColumnName).Editable(false);

m.Field(c => c.MappedTo).DefaultValue(0);

})

.Update("SaveCSVDefinition", "Home")

)

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

)

You'll notice I have an Update method specified, but the method in the controller never gets called. Am I correct in assuming the Update will only work if there is also a Read and Create? I do not want to use AJAX to read the data to populate the grid, it's already right there in the view model, which is exactly what I want. But I also want to get the mapped columns as well, but I never get anything.

Oh, and here's the controller code for now... Even though it doesn;t really do much. Yet.

[HttpPost]

[ActionName("SaveCSVDefinition")]

public ActionResult SaveCSVDefinition([DataSourceRequest]DataSourceRequest request, CSVColumn csvColumn)

{

return Json("saving", JsonRequestBehavior.AllowGet);

}

So how do I get these updates to post to the controller? Ideally, I'd much rather save the whole thing at once, and even had a button with a click, but I couldn;t figure out how to get the model back out of the grid in order to post it via AJAX.

Grid

answered on 15 Jul 2016

1 answer

157 views

CDN: Determining Latest Version

If I'm using the CDN, and it's an older project I want to update to the latest version, how do I know what that latest version is? For example, I'm using

<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

But VS2015 prompted methat Telerik had an update... I was knee deep in stuff and didn;t really pay attention to the version number... So where would I find the latest version number so I can change my CDN url respectively?

General Discussions

answered on 15 Jul 2016

1 answer

467 views

Is it possible merged cell on kendo grid ASPnet MVC

Hello Team,

we are facing issue where we want to merge cell on kendo grid, Is it possible or supported by kendo?

I attached the sample grid.

Tq Team

Grid

answered on 15 Jul 2016

13 answers

439 views

ASP.NET Core 1.0 RTM is Out

<UPDATE from 14 Jul 2016>
Official support for ASP.NET Core 1.0 RTM is available in the R2 2016 SP2 release of UI for ASP.NET MVC. The Official ASP.NET Core 1.0 Support Now in UI for ASP.NET MVC blog post provides details on how to download the package via nuget, what the new assembly names are and some useful links to get you started.
</UPDATE

<UPDATE from 30 Jun 2016>
The LIB is out and you can download it from your Telerik.com accounts as shown in this screenshot. The nuget installation is placed inside this folder: telerik.ui.for.aspnetmvc.hotfix.2016.2.630.commercial.7z\wrappers\aspnetmvc\Binaries\Mvc6.

You can also download a preview NuGet package for testing purposes from https://www.nuget.org/packages/Kendo.Mvc/2016.2.630-Preview.

The official release scheduled for mid-July is cooking and will incorporate all critical bug fixes reported by you - our valuable community!
</UPDATE>

Hi guys,

I'm eager to inform you that we are going to release soon a latest internal build for UI for ASP.NET MVC especially built against the new ASP.NET Core 1.0 RTM. I am going to inform you here once the LIB is out.

We will be glad to receive any fast feedback and bug reports, the best of which will try to incorporate in the official R2 2016 SP2 release of UI for ASP.NET MVC planned for mid-July.

You can find more information along with known problems in the following resources:
The New .NET Core 1.0 Is Here,
Kendo.Mvc 2016.2.617 throws TypeLoadException in Asp.Net Core 1.0 RTM.

Best regards,
Rumen Jekov
DevTools Product Manager

General Discussions

answered on 14 Jul 2016

8 answers

2.7K+ views

TabStrip set selected index

Hi

I've got the following TabStrip which loads partial views in each tab. The partial views have previous and next buttons which navigate to the relevant tab. I determine the tab that needs to be selected in the controller. How do I set the selected tab index?

I tried multiple options but none work.

I am new to Kendo so any help will be appreciated.

Thanks.

------------------------------------------------------------------

<div id="tabs">
<hr />
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Scrollable(false)
.Items(tabstrip =>
{
tabstrip.Add().Text("Step 1").LoadContentFrom("_Step1", "ManageFbo").Selected(true);
tabstrip.Add().Text("Step 2").LoadContentFrom("_Step2", "ManageFbo");
tabstrip.Add().Text("Step 3").LoadContentFrom("_Step3", "ManageFbo");
})
)
</div>

TabStrip

answered on 14 Jul 2016

12 answers

435 views

4 icons/Images in 3rd level depth of tree

I have a treeview that has text in 3 levels and on the third level/depth I want to show 4 clickable icons infront of said text, which link to a controler action that fetches an image with a certain id. that is all 4 icons/images have links with different id's

What is the simplest way to do this ?

Regards,

Emil

TreeView

answered on 14 Jul 2016

14 answers

1.0K+ views

Update a read-only column with value while editing

Hi!

I've setup a pure client side grid that does non-batch CRUD on a local array. There is a dropdown cascading involved. After selecting Terminal, the list of Services is filtered. The data that is received for this list by ajax contains the fee of that service. I want that fee value to be taken an update the current new/edit row's fee cell in grid after the selection. Here is what I have so far:

The Grid and supporting functionality:

var terminals = [];

var services = [];

var kendoDataSource = new kendo.data.DataSource({

data: createRandomData(),

pageSize: 5,

schema: {

model: {

id: "ParkingServiceId",

fields: {

ParkingServiceId: { type: 'number', editable: false },

TerminalId: { type: 'number', validation: { required: true } },

ServiceId: { type: 'number', validation: { required: true } },

ParkingCardNumber: { type: 'string' },

ParkingCardIssueDate: { type: 'date', validation: { required: true } },

ParkingCardExpiryDate: { type: 'date', validation: { required: true } },

ParkingCardGroup: { type: 'string' },

ServiceFee: { type: 'number', validation: { min: 0, required: true } }

}

});

var gridMain = $("#serviceDetailsGrid").kendoGrid({

dataSource: kendoDataSource,

pageable: false,

sortable: false,

toolbar: ["create"],

columns:

[

{ field: "ParkingServiceId", width: 90, title: "Id", hidden: true },

{ field: "TerminalId", width: 130, title: "Terminal", template: getTerminalTitle, editor: terminalDropDownEditor },

{ field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor },

{ field: "ParkingCardNumber", width: 100, title: "Card #" },

{ field: "ParkingCardIssueDate", width: 112, title: "Issued On", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate, 'dd-MMM-yyyy'), 'MM/dd/yyyy') #" },

{ field: "ParkingCardExpiryDate", width: 112, title: "Expiry", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'MM/dd/yyyy') #" },

{ field: "ServiceFee", editable: false, width: 100, title: "Fee" },

{ command: ["edit", "destroy"], title: " ", width: "200px" }

],

editable: "inline",

cancel: function (e) { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); }

}).data("kendoGrid");

function createRandomData() {

var data = [];

data.push({

ParkingServiceId: 1,

TerminalId: 0,

ServiceId: 54,

ParkingCardNumber: 'CARD113',

ParkingCardIssueDate: parseDateMonthStyle('01-May-16'),

ParkingCardExpiryDate: parseDateMonthStyle('01-May-17'),

ParkingCardGroup: 'SomeText1',

ServiceFee: 940

});

data.push({

ParkingServiceId: 2,

TerminalId: 1,

ServiceId: 164,

ParkingCardNumber: 'CARD114',

ParkingCardIssueDate: parseDateMonthStyle('01-May-16'),

ParkingCardExpiryDate: parseDateMonthStyle('01-Nov-16'),

ParkingCardGroup: 'SomeText2',

ServiceFee: 470

});

data.push({

ParkingServiceId: 3,

TerminalId: 2,

ServiceId: 1554,

ParkingCardNumber: 'CARD115',

ParkingCardIssueDate: parseDateMonthStyle('01-May-16'),

ParkingCardExpiryDate: parseDateMonthStyle('01-Aug-16'),

ParkingCardGroup: 'SomeText3',

ServiceFee: 235

});

return data;

}

function getTerminalOffline() {

return terminals;

}

function setTerminalOffline(setter) {

console.log("Terminals from cache: " + setter.length);

terminals = setter;

}

function getServiceOffline() {

return services;

}

function setServiceOffline(setter) {

console.log("Services from cache: " + setter.length);

services = setter;

}

function filterServices(filter) {

var temp = [];

$.each(getServiceOffline(), function () {

if ($(this).text.indexOf(filter) > 0) { temp.push($(this)); }

});

return temp;

}

function getTerminalTitle(container, options) {

var terminalId = container.TerminalId;

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

if (getTerminalOffline()[i].TerminalId === terminalId) {

return getTerminalOffline()[i].TerminalName;

}

return 'N/A (' + getTerminalOffline().length + ")";

}

function getServiceTitle(container, options) {

var serviceId = container.ServiceId;

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

if (getServiceOffline()[i].Code === serviceId) {

return getServiceOffline()[i].NameEnglish;

}

return 'N/A (' + getServiceOffline().length + ")";

}

function refreshGrid() {

gridMain.dataSource.read();

gridMain.refresh();

}

$(function () {

$.post("/Ajax/GetTerminalsCache")

.done(function (response) {

if (response.length > 0) {

setTerminalOffline(response);

$.post("/Ajax/GetAllServicesCache")

.done(function (response) {

if (response.length > 0) {

setServiceOffline(response);

refreshGrid();

}

})

.fail(function (err) {

console.log(err);

});

}

})

.fail(function (err) {

console.log(err);

});

The OnChange events:

function terminalDropDown_OnChange() {

var companyId = $("#CompanyId").val();

var terminalId = $("input[id^='terminalsDropDownList']").data("kendoDropDownList").value();

var serviceDdl = $("input[id^='servicesDropDownList']").data("kendoDropDownList");

serviceDdl.value("");

$.post("/Ajax/GetTerminalServices", { companyId: companyId, terminalId: terminalId })

.done(function (response) {

if (response.length > 0) {

serviceDdl.setDataSource(response);

}

})

.fail(function (err) {

console.log(err);

});

}

function serviceDropDown_OnChange(a) {

var serviceDropDown = $("input[id^='servicesDropDownList']").data("kendoDropDownList");

var extract = serviceDropDown.dataItem(serviceDropDown.select());

// I have the fee at extract.Fee

}

The above code for terminals updates the services and I'm able to extract Fee from the dataItem of service. Now I want to update the grid current row which can be the first row in case of new record or current edit row. Once I have the the row, I need to access it's dataItem and update the ServiceFee column.

Issues/questions:

(How to) Even after setting the ServiceFee column of the grid to be not editable, it still is editable
(How to) After going through a lot of questions, all ways to access the current/selected/editing row of grid have failed for me. I'm not able to get the row I want and calling dataItem on what I get results in undefined
Once #2 is solved, is it simple enough to set the grid's current row's dataItem's ServiceFee to Fee?

Grid

answered on 13 Jul 2016

1 answer

296 views

Dynamic Grid Creation from Whatever Query Model(Result)

I have created view in ASP.NET MVC Application containing kendo MVC dropdown and Kendo MVC Grid. Dropdown is filtering Grid. Base on query I get different number of columns(some of them are similar). I want to bind these columns dynamically to Grid. I am using View Model for view.

Please suggest what is better way to implement.

Following demo explains similar to what I want to achieve except not using user defined View Model( instead using System.Datatable as Model )

Using_DataTable

I want to do similar to following but using Kendo MVC html Helper instead of Kendo UI widgets.

https://mycodepad.wordpress.com/2014/12/01/asp-net-mvc-5-with-razor-kendo-ui-dynamic-grid-creation-columns-ordering-grouping-and-paging/

Found following approach.

Dynamic_Grid_Creation

Thanks

Grid