Questions on UI for ASP.NET MVC Forum

4 answers

138 views

Hi,
is there a way to use a Kendo Grid with polymorphic items and Popup editing?

I'd like to define a base class BaseViewModel with some common properties and subclasses FirstViewModel and SecondViewModel with more specific properties. The Grid is bound to BaseViewModel, but in the Popup Editor I'd like to edit the subclasses. The controller produces an IEnumerable containing FirstViewModels and SecondViewModels.

I have defined EditorTemplates for FirstViewModel and SecondViewModel but the Model which is passed to when editing is always of type BaseViewModel.
Any suggestions?

Kind regards,
Thomas

Grid

answered on 20 Oct 2015

2 answers

117 views

Export To Excel With Local Data

I have a grid control which is bound to the model I have passed it in the view (local data):

HireReport.cshml

@model ReportingPortalWeb.Models.HireReportViewModel

@(Html.Kendo().Grid(Model.StockReport)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.SohQty).Title("Quantity").Visible(Model.StockReport.Sum(t => t.SohQty) > 0);

...

I want to add the export to excel function but this seems limited to remote data

.ToolBar(tools => tools.Excel())

...

Is there no way to bind this to the local model data?

Grid

answered on 20 Oct 2015

1 answer

124 views

Drill through on Bar Chart

I would like to implement a drill through type action on a bar charts series.

Here is what i have so far:

@(Html.Kendo().Chart<BetaSMTRApp.Business.PrivateReportCardCumulativeInvestments>()

.Name("ChartInvestmentCumulations_" + item.FUND_INT.ToString())

//.Title("Cumulative Investments")

.Legend(legend => legend

.Position(ChartLegendPosition.Top)

)

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetCumulativeInvestments", "PrivateReportCard", new { fundInt = item.FUND_INT }))

)

.Series(series =>

{

series.Column(model => model.Commitments).Name("Commitments").Color("Red");

series.Column(model => model.Distributions).Name("Distributions").Color("Green");

series.Column(model => model.Draw_Down).Name("DrawDowns").Color("Yellow");

series.Column(model => model.Fees).Name("Fees").Color("Brown");

})

.CategoryAxis(axis => axis

.Categories(model => model.YearCategory)

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels

.Format("${0}")

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("#= series.name #: #= value #")

)

.Events (events=>events.SeriesClick("onSeriesClick"))

)

Javascript/JQuery


function onSeriesClick(e) {
    $("#window").data("kendoWindow").open();
    $("#undo").hide();
};

Kendo Window


@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@<text>
        <div class="armchair">
            <img src="@Url.Content("~/content/web/window/armchair-402.png")"
                 alt="Artek Alvar Aalto - Armchair 402" />
            Artek Alvar Aalto - Armchair 402
        </div>
 
        <p>
            Alvar Aalto is one of the greatest names in modern architecture and design.
            Glassblowers at the iittala factory still meticulously handcraft the legendary
            vases that are variations on one theme, fluid organic shapes that let the end user
            ecide the use. Interpretations of the shape in new colors and materials add to the
            growing Alvar Aalto Collection that remains true to his original design.
        </p>
 
        <p>
            Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
            was noted for his humanistic approach to modernism. He studied architecture at the
            Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
            Aino Marsio.
        </p>
 
        <p>
            Alvar Aalto was one of the first and most influential architects of the Scandinavian
            modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
            Major architectural works include the Finlandia Hall in Helsinki, Finland,
            and the campus of Helsinki University of Technology.
        </p>
 
        <p>
            Source:
            <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a>
        </p>
    </text>)
    .Draggable()
    .Resizable()
    .Visible(false)
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
)

Oh and yes i know that the window is displaying static text... i will eventually be putting in a Grid to display the detail records (and question #2 relates to it)

Here are my 2 issues/questions:

1. The window does pop up when i click on a series. However the page behind it goes white and only the contents of the window appear. Is there a way to allow the calling web page still appear (and not go blank).

2. In the javascript call to open the window is it possible to pass the contents of e to it (e contains parameter values that i want to use in the pop up window).

Thanks,

Corey

Chart

answered on 20 Oct 2015

1 answer

424 views

Hide Column Based On Remote Data

I have a kendo grid that gets data remotely (because I use the export to excel functionality). The column headers are bound to my model which is passed as empty before the data source request gets the populated one.

@model ReportingPortalWeb.Models.HireReportViewModel

@(Html.Kendo().Grid<StockReport>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.SohQty).Title("Quantity");
columns.Bound(p => p.StockName);
...
columns.Bound(p => p.SiteAddress3);
columns.Bound(p => p.PostCode);
})
.ToolBar(tools => tools.Excel())
.Groupable()
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("CustomReport_Data", "Reports"))
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CustomReport_Data", "Reports").Data("GetData")))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new {style = "height:550px;"})
)

Before having to use the excel export I passed the data when the gird was created and I could hide a column easily by doing something like

columns.Bound(p => p.PrCode).Visible(Model.StockReport.Count(t => t.PrCode.Any()) > 0);

now that I am remotely fetching the data instead, is there a data on load event that I can use to hide the columns in my report that don't have any data in them?

Grid

answered on 20 Oct 2015

2 answers

190 views

Kendo grid, batch editing and notification box

Hello,

I have seen examples of confirmation boxes applied to inline / cell editing.

How can I display a confirmation ("saved successfully" or "not saved successfully" using something like notification widget if the grid batch editing mode is used?

The Save command is calling the controller action for Save and returns a JSON request as a response. But I don't know yet to get the additional notifaction displayed.

Yours

Stephan

Grid

answered on 19 Oct 2015

4 answers

399 views

Dynamic Tooltip with links in particular Grid column

Hi,

I want to display customised tooltip on hover in one of the column in grid.
My requirement is:
I have Person's grid where I am displaying first name, last name, birth date details. There is an another column say "Go To". When user mousehover on that particular column's cells, I want to display tooltip template. In which there will be few links (addresses, emails, phones etc.) with person id.
Based on the person's Id the link in tooltip should be constructed, So clicking on it navigates to person details.

How to do this? I have searched on net but couldn't find exact or nearer example.
Need help.

Thanks,
Nirav

Grid

answered on 19 Oct 2015

1 answer

192 views

How to view xlsx file in the Spreadheet Control?

Hello Telerik Team,

Let's assume there is a xlsx file and I want to load this file to Spreadheet control.

Controller code:

var workbook = Workbook.Load(path);
var workbookJson = workbook.ToJson();

var model = new ExcelViewerViewModel()
{
Name = "Test",
Sheets = JsonConvert.DeserializeObject<IEnumerable<SpreadsheetSheet>>(workbookJson), <--- the problem to deserialize sheets
};

return PartialView("~/Views/Shared/_ExcelViewer.cshtml", model);

The View code:

@(Html.Kendo().Spreadsheet()
.Name("excelViewer")
.Toolbar(false)
.BindTo(Model.Sheets))

So the question is how to get IEnumerable<SpreadsheetSheet>> type from workbook?

Thank You

Spreadsheet

answered on 19 Oct 2015

1 answer

61 views

Trial 2015.3.930 only partially installed

Hello,

I noticed today that the status of my trial application is only 'partially installed'. I upgraded it to a newer version during my trail period.

When I choose to repair the installation, the status remain. (please refer to attached a screenshot from my Telerik Control Panel).

Question - can I safely remove the product, then re-install without losing work ?

Thanks,

Mike James

Application

answered on 19 Oct 2015

1 answer

88 views

Grid Inline Editing Resources issue

Hello everyone,

I’m struggling with something really annoying.
In my ASP.NET MVC project I have plenty of Kendo Grids in inline editing mode with French resources activated.
Everything works just fine, except when I deploy my project online. The “add new record”, “edit” and “delete” were supposed to be in French but they are in English.
However, if I start adding or even editing one line, the “update” and “cancel” buttons are well translated in French.
I assume that this is something else for two reasons: everything just works fine running in local and almost all French resources are well visible in grid.
So, can anyone advise me or help me with this, please?

Thank you so much in advance,
Best regards,

Grid

answered on 19 Oct 2015

1 answer

196 views

MVC Grid filtering with a column has null values not working

I am trying to apply the filter for a column that has null values in the database. When I try to filter the column by some value, it throws following error. Please suggest the solution to handle columns those have null values in the database

An exception of type 'System.NullReferenceException' occurred in System.Core.dll but was not handled in user code

Additional information: Object reference not set to an instance of an object

Grid

answered on 19 Oct 2015