Questions on UI for ASP.NET MVC Forum

4 answers

396 views

Loading Donut chart via DataSource from Object/Model

No errors but the chart is not showing. The model has two "series" that are IEnumerable of objects that have properties for category, value and color. The model is filled properly and if I don't try to use Ajax via DataSource / action and just load the object and set the Series it works fine. Meaning I load an object <FlowsInOutChartData> inout in the top of a Razor page and then set the series via .Series(series => ... series.Donut(inout.InFlows) .Name("In Flows") etc. chart works fine. Want to load via Ajax so the page comes back immediately (the chart takes a few seconds to load due to database calculation delay).

I think the problem is in the series func<>

series.Donut(d => d.InFlows, null)
.Name("In Flows");

But not sure what I'm doing wrong.

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

.Name("chart")

.ChartArea(chartArea => chartArea

.Background("transparent"))

.Title(title => title

.Text("Cash Flows")

.Position(ChartTitlePosition.Bottom)

)

.Legend(legend => legend

.Visible(false)

)

.SeriesDefaults(series =>

series.Donut().StartAngle(150)

)

.DataSource(dataSource => dataSource

.Read(read => read.Action("CashInOutChartData", "PracticeAnalytics")) //Specify the action method and controller names.

)

.Series(series =>

{

series.Donut(d => d.InFlows, null)

.Name("In Flows");

})

.Series(series =>

{

series.Donut(d => d.OutFlows, null)

.Name("Out Flows");

})

)

Controller:

public ActionResult CashInOutChartData()

{

var data = new WAPDBBusiness.Charts.CashFlowsInOutChart().GetFirmAnalyticsFlowsByQuarter(loginInfo.FirmID, 1, loginInfo.FirmID, true);

return Json(data, JsonRequestBehavior.AllowGet);

}

Model:

public class FlowsInOutChartData

{

public IEnumerable<FlowInOutChartItem> InFlows { get; set; }

public IEnumerable<FlowInOutChartItem> OutFlows { get; set; }

}

public class FlowInOutChartItem

{

public int? myYear { get; set; }

public int? myQtr { get; set; }

public decimal Total { get; set; }

public decimal PercentOfTotal { get; set; }

/// <summary>

/// Used by Telerik Donut Chart

/// </summary>

public string category

{

get

{

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

}

/// <summary>

/// Used by Telerik Donut Chart

/// </summary>

public decimal value

{

get

{

return PercentOfTotal;

}

/// <summary>

/// Used by Telerik Donut Chart

/// </summary>

public string color { get; set; }

}

Chart

answered on 27 Feb 2020

1 answer

568 views

Customize specific tooltips

I need to customize only some tooltips not all the tooltips. Can this be done? (For instance change the background color of some tooltips)

I tried to add HtmlAttributes but they are ignored.

I tried to use a div for the content but the telerik is adding a padding to the tooltip content and instead of having an uniform background color I get a big border and a background in a different color.

I also tried to set a negativ margin to my div but the padding is done not to the parent but the parent of the parent of the content

I do not want to modify all the tooltips (Setting the padding to 0 it would mean that I have to add all the other tooltips in a div where I set padding back).

ToolTip

answered on 26 Feb 2020

1 answer

145 views

C#.NET MVC Scheduler can read records from database but not showing them on Scheduler!?

Hallo everyone,

I'm trying to connect my Test_DataBase To the Scheduler so i did everything what Vladimir IIiev in the Clip did

https://www.telerik.com/forums/simple-working-example-of-scheduler-fetching-information-from-sql#_2OZsTOj7EaZuGz0GQ0UhQ

but this is an old version of telerik

So actually i can't do anything READING CREATING UPDATING AND DELETING ! No CRUD operation working completely right for me

so can you please show me in a new clip if it is possible ..

OR A NEW BASIC EXAMPLE FOR A C#.NET MVC SCHEDULER CONNECTION WITH A DATABASE READING CREATING UPDATING AND DELETING

i need to know if i should buy this tool or not !

Scheduler

answered on 26 Feb 2020

9 answers

479 views

simple working example of scheduler fetching information from sql

Hello

I'm a total beginner with Telerik and I'm having problems binding the scheduler to at database for showing events. Is there somebody who knows of a step-by-step tutorial for making that connection or could tell me step-by-step how I should do it (preferably with a working example).

BR
Jonas

Scheduler

answered on 25 Feb 2020

18 answers

2.1K+ views

Kendo UI grid with filter row

Hello,

I'm using the new feature of the filter row (.Filterable(ftb => ftb.Mode(GridFilterMode.Row))) in my MVC kendo UI grids. It works just as I wished. But I have two problems with it.

1. How can I disable the autocomplete feature of the filters?
2. How can i make the filter smaller or let them autofit to the column width. I have a grid with more then 10 small columns and with the activated filter row the columns width is enlarged to fit the filter and so the grid doesn't fit any more on one screen.

Grid

answered on 24 Feb 2020

1 answer

90 views

clicking first time (placing cursor ) on Search Panel input text causes postback

Hi,

I have added a Search Panel for the grid. But when I click on the input text, it causes the postback. I haven't entered anything yet and merely placing cursor causes the postback. Here is the snippet.

Appreciated your help!

@(Html.Kendo().Grid<AAMVA.Website.OnlineMemberDirectory.Models.MemberViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Name).Width("12%").ClientTemplate("<span class='content'>#=Name#</span>").Filterable(false);

columns.Bound(p => p.Organization).ClientTemplate("<span class='content'>#=Organization#</span>").Filterable(false);

columns.Bound(p => p.EmailAddress).Width("19%").ClientTemplate("<span class='content'>#=EmailAddress#</span>").Filterable(false);

})

.Filterable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable()

.Scrollable()

.ToolBar(t => t.Search())

.HtmlAttributes(new { style = "height:700px;" })

.NoRecords("No Members to display")

.DataSource(dataSource => dataSource

.Ajax()

//.ServerOperation(false) // Paging, sorting, filtering, and grouping will be done client-side.

.PageSize(10)

.Read(read => read.Action("People", "Search"))

)

.Events(e => e

.DataBound("onDataBound")

)

function onDataBound() {

var filter = this.dataSource.filter();

var highlightedItems = $('.highlighted');

highlightedItems.each(function () {

var span = this;

var text = span.textContent;

span.parentNode.replaceChild(document.createTextNode(text), span);

});

if (filter && filter.filters.length) {

var values = [];

iterateFilters(filter, values);

highlight(values)

}

function iterateFilters(expression, collection) {

if (expression.filters) {

$.each(expression.filters, function (_, filter) {

iterateFilters(filter, collection);

if (filter.value) {

collection.push(filter.value)

}

});

}

function highlight(values) {

$('#grid td .content').each(function () {

var originalValue = $(this).text();

var lowerValue = originalValue.toLocaleLowerCase();

// values = values.map(x => x.toLocaleLowerCase());

values = values.map(function (x) { return x.toLocaleLowerCase(); });

var flag = false;

var newValues = [];

values.forEach(function (x) {

//if (lowerValue.includes(x)) {

if(lowerValue.indexOf(x) > -1) {

flag = true;

newValues.push(x)

}

})

newValues;

if (flag) {

//var indexes = newValues.map(x => lowerValue.indexOf(x));

var indexes = newValues.map(function (x) { return lowerValue.indexOf(x); });

//var lengths = newValues.map(x => x.length);

var lengths = newValues.map(function (x) { return x.length; });

var substring = "(";

indexes.forEach(function (x, i) {

substring += originalValue.substring(x, x + lengths[i]);

if (i != lengths.length - 1) {

substring += "|";

}

});

substring += ")"

var re = new RegExp(substring, 'g');

var newValue = $(this).text().replace(re, function (x) {

return "<span class='highlighted'>" + x + "</span>"

});

$(this).html(newValue)

}

})

}

Grid

answered on 21 Feb 2020

1 answer

2.3K+ views

Datepicker not showing the calendar

Hi,

I have the following code using datepicker for a Datetime filed but it is not showing the date icon to show the dropdown of calendar. It just shows the text box.

FYI. I am using datepicker and it works fine. Also, I am using Timepicker which works fine.

Is there any reason why it shows the calendar pop up in one screen and not in other.

<div class="form-group col-md-6 row rowSmall text-right ">
                    @Html.LabelFor(model => model.XStartDate, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8 text-left">
                        @*@(Html.Kendo().DatePickerFor(model => model.XStartDate).Value(DateTime.Today).HtmlAttributes(new { style = "width: 150px", title = "datepicker" }))*@
                        @(Html.Kendo().DatePickerFor(model => model.HearingStartDate).HtmlAttributes(new { style = "width: 200px", title = "datepicker" }))
                    </div>

Thanks

DateInput

answered on 20 Feb 2020

1 answer

270 views

Button Badge z-index problem

I have some buttons on a page, which when required, show badges containing a number. The code is:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

This is fine, however I have a bootstrap 3 drop-down menu at the top of the page, and when it is shown, the button badge appears over the menu, not hidden by it.

How can I stop this happening?

Button

answered on 19 Feb 2020

8 answers

607 views

Dropdown Cascade with Adding a New row

The grids I'm working on have quite a bit going on so I have tried to cut the details down to just what seems to pertain to this query.

For these grids, which are in InLine mode, there is a dropdown cascade setup so when a location is chosen the state gets set as well though can still be changed.

This is working well for all of the rows which are already in the grid to be updated.

However it is not triggering for a new row before it is submitted into the datasource.

The cascade works off of the onchange event; found this way through the forums here.

Here is one of the grid definitions:

@(Html.Kendo().Grid<NexusPWI.ViewModels.Wizard.OfficerPayrollReportingViewModel>()

.Name("OfficerGrid")

.Columns(c =>

{

c.Command(command => { command.Edit(); }).Width(120).Title("Update");

c.Bound(vm => vm.FirstName).Width(120);

c.Bound(vm => vm.LastName).Width(120);

c.Bound(vm => vm.Title).Width(120);

c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(200).Hidden(Model.Locations_ColumnInitHidden); //Display UIHint in Dropdown through LocationsList ClientTemplate with just the LocationNumber value behind

c.Bound(vm => vm.State).HtmlAttributes(new { @class = "locationLinkedState" }).Width(180).ClientFooterTemplate("Total");

c.Command(command => { command.Edit(); }).Width(120);

c.Command(command => { command.Destroy(); }).Width(40);

c.Template(@<text></text>);//Blank Column to handle Scrollable variable width so headers do not skew

})

.Scrollable(s => s.Enabled(true).Height("auto"))//Scrollable to control column widths

.ToolBar(toolbar =>

{

toolbar.Template("<div class='col-lg-8'>" +

@Html.Raw(@Model.OfficerPayrollHeader) +

"</div>" +

"<div class='col-lg-3'>" +

"<a class='pull-right k-button k-button-icontext k-grid-add' href='/Wizard/OfficerPayrollRead?OfficerGrid-mode=insert'><span class='k-icon k-add'></span>Add Row</a>"

+

"</div>");

})

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

.CreateAt(GridInsertRowPosition.Bottom)

)

.Navigatable()

.Pageable()

.Events(events => events.Edit("gEdit('OfficerGrid')")

.Remove("gRemove('OfficerGrid')")

.DataBound("gDataBoundOfficer")

.Cancel("gCancel('OfficerGrid')")

)

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("officerGrid_error") // Handle the "error" event

.RequestEnd("Grid_RequestEnd")

.RequestStart("dRequestStart")//Hooked up for event sequencing and debugging

.Change("Grid_Delete")

.Sync("dSync('OfficerGrid')")

)

.Model(model => {

model.Id(vm => vm.PolicyHolderPayroll_OfficerGridId);

})

)

.PageSize(1000)

.Create("OfficerPayrollCreate", "Wizard")

.Read("OfficerPayrollRead", "Wizard")

.Update("OfficerPayrollUpdate", "Wizard")

.Destroy("OfficerPayrollDestroy", "Wizard")

))

The Javascript Event:

function triggerDropChange(e) {

var dropKey = e.innerText.replace("select", "");

var locationCode = dropKey.split(":")

var currentRowIndex = $(e).closest("tr").index();

var digOutToGrid = e.parentElement;

var digOutToGrid2 = digOutToGrid.parentElement;

var digOutToGrid3 = digOutToGrid2.parentElement;

var digOutToGrid4 = digOutToGrid3.parentElement;

var GridLevel = digOutToGrid4.parentElement;

var grid = $("#" + GridLevel.id.toString()).data().kendoGrid;

var dataItem = grid.dataItem("tr:eq(" + (currentRowIndex + 1) + ")"); //Row

var locationValueList = {};

@foreach(EntityLocationsViewModel entry in (System.Collections.IEnumerable)ViewData["LocationsList"])

{//Make Value LookUp Listing

<text>locationValueList["@entry.LocationNumber"] = "@entry.State";</text>

}

@if (Model.DisplayEntities)

{

<text>

var inVal = dataItem.LocationNumber.trim();

var changeTo = locationValueList[inVal];

</text>

}

else

{

<text>var changeTo = locationValueList[locationCode[0].trim()];</text>

}

dataItem.set("State", changeTo);

var nod = 2;

}

Is there any way to have this cascade applied to the dropdown in the new row before it is submitted?

Also is there is a way to have this new row have some default values (such as dropdown values pre-selected) before "entered" and sent to the controller to be inserted?

Grid

answered on 18 Feb 2020

4 answers

268 views

Auto-start player with sound when opened web link

Is have exist any solutions autoplay with sound while opening web link with video? Now if we try to play video with sound video will be stopped. If we open without sound video will play good.

MediaPlayer

answered on 17 Feb 2020