Questions on UI for ASP.NET MVC Forum

1 answer

523 views

Hi, I've got a problem with clientTemplate on my grid. I'm not fetching data from server. When I try to switch to Template, it throws an exception. This is my code :

@(Html.Kendo().Grid<PRR405.ViewModels.BatchViewModel>(Model.LotsOuverts)
.Name("LotsOuvert")
.Columns(columns =>
{
columns.Bound(p => p.Post_date).Title(PRR405.Resources.OpenLot.OpenLot.DateDOuverture).Format("{0: yyyy/MM/dd}").Width(150).Filterable(f => f.UI("DatePickerFormated"));
columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).ClientTemplate(@"<a href='/ResumeLot/ResumeLot?btchNum=#: Btch_num #'>#: Btch_num #</a>").Width(170);
columns.Bound(p => p.Comp_num).Title(PRR405.Resources.OpenLot.OpenLot.Assureur).Width(110);
columns.Bound(p => p.Br_cd).Title(PRR405.Resources.OpenLot.OpenLot.SuccursaleLabel).Width(120);
columns.Bound(p => p.Batch_cd).Title(PRR405.Resources.OpenLot.OpenLot.CodeDeLot).Width(120);
columns.Bound(p => p.Entry_Date_Formated).Title(PRR405.Resources.OpenLot.OpenLot.DateInscription).Width(160);
columns.Bound(p => p.Batch_type_Name).Title(PRR405.Resources.OpenLot.OpenLot.TypeDeLot).Width(140);
//columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).ClientTemplate(string.Format(@"<a href='/OpenLot/PrintLot?btchNum=#: Btch_num #'>{0}</a>", PRR405.Resources.OpenLot.OpenLot.Imprimer)).Filterable(false);
})
.Scrollable(s => s.Height("100%"))
.HtmlAttributes(new { style = "max-height: 333px; margin-bottom:20px;" })
.Sortable()
.Scrollable()
.Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().IsEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_EstEgaleA).IsNotEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_NestPasEgaleA))))
.Resizable(resize => resize.Columns(true))

Thank you for your help

Grid

answered on 03 Oct 2019

2 answers

456 views

Splitter with partial views in panes doesn't display correctly

I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right. Each pane gets its contents from a partial view. The left pane should contain a text box, button and a TreeView. The right pane is a map. If I try to load the partial view in the left pane, the page does not display correctly. If I only have a simple string in the left pane content, the page (and map) work. Please advise.

Index.cshtml:

@(Html.Kendo().Splitter()

.Name("splitter")

.Orientation(SplitterOrientation.Horizontal)

.Panes(hPanes =>

{

hPanes.Add()

.HtmlAttributes(new { id = "left-pane" })

.Size("25%")

.Scrollable(false)

.Collapsible(true)

.Content(Html.Partial("_TreeView").ToHtmlString());

//.Content("<h1>TEST</h1>");

hPanes.Add()

.HtmlAttributes(new { id = "right-pane" })

.Size("75%")

.Scrollable(false)

.Collapsible(false)

.Content(Html.Partial("_MapView").ToHtmlString());

})

)

<style>

#splitter {

height: 100vh;

/*width: 100vw;*/

padding: 0;

margin: 0;

}

#left-pane {

color: #000;

background-color: #ccc;

}

#right-pane {

color: #000;

background-color: #aaa;

}

</style>

<script>

</script>

_TreeView.cshtml:

@{

Html.Kendo().TextBox()

.Name("searchTextBox");

Html.Kendo().Button()

.Name("SearchTrigger")

.Content("Search");

}

_MapView.cshtml:

@(Html.Kendo().Map()

.Name("map")

.Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)

.Zoom(14)

.Layers(layers =>

{

layers.Add()

.Type(MapLayerType.Bing)

.ImagerySet(MapLayersImagerySet.AerialWithLabels)

.Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");

//.Type(MapLayerType.Tile)

//.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")

//.Subdomains("a", "b", "c");

})

.Markers(markers =>

{

markers.Add()

.HtmlAttributes(new {id = "bicMarker" })

.Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)

.Shape(MapMarkersShape.PinTarget)

.Tooltip(tooltip => tooltip.Content("BIC"));

})

)

<style>

#map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

Splitter

answered on 02 Oct 2019

3 answers

894 views

SetOptions and Toolbar

Hello guys,

I need this functionality (https://demos.telerik.com/kendo-ui/grid/persist-state) but there are some problems.

I want to clarify one thing:
- You have a grid (you may check your own link - https://demos.telerik.com/aspnet-mvc/grid/editing-popup)
- In console I write:

var grid = $(".k-grid").data("kendoGrid");

grid.setOptions(grid.getOptions())"

and suddenly the toolbar breaks down.

I've checked a javascript version (https://demos.telerik.com/kendo-ui/grid/editing-popup) and everything is fine over there.

Let's check how "grid.options.toolbar" looks like:
JS:

{name: "create"}{name: "save"}{name: "cancel"}

MVC:

{ command: { { name: null, buttonType: "ImageAndText", text: "create"}, ...

So, it seems as "grid.options.toolbar" is useless when we talk about "MVC Wrappers".

The most important part - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
Yes, I see this note "When using the Grid MVC wrapper, any server templates will not be retrieved by the getOptions", but what can be counted as a "server template" talking about "toolbar"? If I use Kendo MVC, then everything or only when I use this one ".ToolBar(s => s.Template("<a random template>"))"?

So should I use what's described in this link?
https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml

Thank you for your time and sorry, probably I'm not the first who's asked it
Have a nice day

Grid

answered on 01 Oct 2019

8 answers

383 views

Theme builder import bootstrap

Hi,

I saw in the documentation:

If you have customized the colors of Bootstrap before using it, and need Kendo UI to match the newly chosen colors, you will need to customize Kendo UI's bootstrap theme through the Kendo UI ThemeBuilder.

But I wasn't lucky trying this.

I use Cyborg in my site an I want KendoUI to use the same colors / fonts.

When I copy the ...min.css to the ThemeBuilder nothing happens.

So how can I import such a theme?

Manfred

General Discussions

answered on 30 Sep 2019

1 answer

687 views

Excel export limited number of rows

Hi,

due to large amount of data in the grid, excel export does not work (>50.000 records). Is there a way to achieve this? Using

.AllPages(false)

only exports a number of records equal to the page size. I would like to be able to let's say export 200 records per .xls file.

Is there possible to use smth similar to https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/excelexport

Is there a way to achieve this and can you maybe share an small example?

Thanks a lot,

rina

Grid

answered on 30 Sep 2019

1 answer

386 views

Labels/Tick size for Bar Chart

I have a bar chart where the x axis is a dollar amount. Depending on the situation, this can be hundreds of dollars or millions of dollars and anywhere in between. In my example data it is in the millions and the x-axis is over crowded. (see attached image) In the case of thousands of dollars, the axis is not crowded. I have tried setting MajorTicks and MajorUnit with no success. So first is there a way to fix my example data so values are readable on the x-axis, and second, is there a way to dynamically adjust this based on the values plotted (from hundreds to millions).

Chart Code:

@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowInOutChartItem>()

.Name("chartFlows2")

.Title(title => title

.Text("Cash Flows")

.Position(ChartTitlePosition.Top)

)

.Legend(legend => legend

.Visible(false)

)

.SeriesDefaults(sd => sd.Bar().Stack(true))

.DataSource(dataSource => dataSource

.Group(g => g.Add(item => item.InOutField))

.Read(read => read.Action("CashInOutChartData", "PracticeAnalytics"))

)

.Series(series =>

{

series.Bar( "Total", "color", "category")

.Name("Flows");

})

.CategoryAxis(axis => axis

.Categories(model => model.category))

// .AxisDefaults(ad => ad.MajorTicks(mt => mt.Size(1000)))

//.ValueAxis(va => va.Numeric().MajorTicks(mt => mt.Size(1000000)))

//.ValueAxis(axis => axis

// .Numeric().MajorUnit(1000))

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # (#= series.name #): #= dataItem.TotalFormatted #"))

)

Model:

public class FlowInOutChartItem

{

public int? myYear { get; set; }

public int? myQtr { get; set; }

public decimal Total { get; set; }

public string TotalFormatted

{

get

{

return string.Format("{0:C0}", Total);

}

public decimal PercentOfTotal { get; set; }

public string category

{

get

{

return "Q" + myQtr.ToString() + " " + myYear.ToString();

}

public decimal value

{

get

{

return PercentOfTotal;

}

public string color { get; set; }

public string InOutField { get; set; }

}

Data:

[

{

myYear: 2019,

myQtr: 2,

Total: 58417603.24,

TotalFormatted: "$58,417,603",

PercentOfTotal: 33.86,

category: "Q2 2019",

value: 33.86,

color: "#0e5a7e",

InOutField: "In"

},

{

myYear: 2019,

myQtr: 1,

Total: 44370421.48,

TotalFormatted: "$44,370,421",

PercentOfTotal: 25.71,

category: "Q1 2019",

value: 25.71,

color: "#166f99",

InOutField: "In"

},

{

myYear: 2018,

myQtr: 4,

Total: 47372210.75,

TotalFormatted: "$47,372,211",

PercentOfTotal: 27.45,

category: "Q4 2018",

value: 27.45,

color: "#2185b4",

InOutField: "In"

},

{

myYear: 2018,

myQtr: 3,

Total: 22390062.02,

TotalFormatted: "$22,390,062",

PercentOfTotal: 12.98,

category: "Q3 2018",

value: 12.98,

color: "#319fd2",

InOutField: "In"

},

{

myYear: 2019,

myQtr: 2,

Total: -31987802.56,

TotalFormatted: "($31,987,803)",

PercentOfTotal: 36.82,

category: "Q2 2019",

value: 36.82,

color: "#f70404",

InOutField: "Out"

},

{

myYear: 2019,

myQtr: 1,

Total: -29400196.53,

TotalFormatted: "($29,400,197)",

PercentOfTotal: 33.84,

category: "Q1 2019",

value: 33.84,

color: "#cc0404",

InOutField: "Out"

},

{

myYear: 2018,

myQtr: 4,

Total: -20853907.18,

TotalFormatted: "($20,853,907)",

PercentOfTotal: 24,

category: "Q4 2018",

value: 24,

color: "#a80303",

InOutField: "Out"

},

{

myYear: 2018,

myQtr: 3,

Total: -4637187.52,

TotalFormatted: "($4,637,188)",

PercentOfTotal: 5.34,

category: "Q3 2018",

value: 5.34,

color: "#840202",

InOutField: "Out"

}

]

Chart

answered on 27 Sep 2019

1 answer

2.4K+ views

Clear validation messages client side

Hi,

I have a form in a modal window with server-side validation. "Name" field is a required input as defined by my model.

@using (Html.BeginForm("chnage", "Home", FormMethod.Post, new { id = "changeform" }))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary("", new { @class = "text-danger" })

<div class="modal fade-scale" id="changemodal" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header text-center">

<h4 class="modal-title w-100">Change</h4>

</div>

<div class="modal-body" id="modalFormBody">

<div class="container">

<div class="row">

<label class="col-sm-2 col-form-label">Name</label>

<div class="col-6">

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @style = "width:50px" } })

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="row">

<label class="col-sm-2 col-form-label">Info</label>

<div class="col-6">

@Html.EditorFor(model => model.Info, new { htmlAttributes = new { @class = "form-control", @style = "width:50px" } })

@Html.ValidationMessageFor(model => model.Info)

</div>

<div class="modal-footer justify-content-center">

<button type="submit" id="submit" name="submit" value="submit" class="btn k-primary k-button">Switch</button>

<button type="submit" id="clearBtn" name="submit" value="clear" class="btn k-button" onclick="this.form.reset();">Clear</button>

<button type="submit" id="closeBtn" name="submit" value="close" class="btn k-button" data-dismiss="modal">Close</button>

</div>

}

I need to be able to clear the validation messages on for eg. modal window close or a clear button.

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" id="Name_validationMessage" role="alert" data-valmsg-for="Name" data-for="Name"><span class="k-icon k-i-warning"> </span> Name is required</span>

How can I get the error messages cleared out?

Thanks a lot

General Discussions

answered on 24 Sep 2019

4 answers

101 views

Editor rendered different after `Convert to Telerik application`.

Hi There,

In our original ASP.NET MVC 5 application, the following editor (in the code box below) was a dropdown control with three states: `Not set`, `true` and `false`.

After converting the VStudio solution into a Telerik application we got the two states checkbox in the attached image. Why?

Thanks,

Alberto

<div class="form-group">

@Html.LabelFor(m => m.validated, new { @class = "col-md-2 control-label" })

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

@Html.EditorFor(model => model.validated, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.validated)

</div>

General Discussions

answered on 20 Sep 2019

8 answers

8.5K+ views

Nuget package restore error on build server

so I've followed the instructions here:

https://docs.telerik.com/devtools/aspnet-ajax/installation/installing-the-telerik-controls-from-nuget-package

I've added my credentials in clear text. (note we check in a nuget.config with the solution(needed for other sources and solution configuration)

locally everything works.

on the build server we get these errors pulling from telerik source:

:45 Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Westwind.Utilities'&semVerLevel=2.0.0'. 09:47:45 The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

the build server is using a command line nuget restore command to restore these files

Installer and VS Extensions

answered on 19 Sep 2019

4 answers

159 views

Tooltip Template background not wide enough

Pie chart with a tooltip that uses a template. The tooltip has a backgound color that is not wide enough to cover all the text in the label. See attached image.

It doesn't appear there is a width property that I could increase. Suggestions?

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))

Chart

answered on 17 Sep 2019