Questions on UI for ASP.NET MVC Forum

1 answer

357 views

I have a grid that shows a detailed list of items. Below that, I show a number of pie charts that show the breakdown of the list category totals, so the grid and the charts use different data sources/ queries since i need grouped totals for the charts.

However, when filtering the grid, I would like to be able to get and apply the same filters to my pie chart data sources. This way they will show the correct totals based on the filtered grid.

What is the best way to apply the same filters from the grid on to the pie charts on the grid filter event?

Filter

answered on 15 Sep 2020

1 answer

507 views

How to add a Column to Agenda View ?

Hello,

I am trying to add another Column to Agenda View, where the Type of each Event will be shown.

So additional to the Date, Time and Names of Events i need to show Type or State or . . . . maybe end up adding more than one Column :-)

I searched for days but I found nothing. !

So I'll be thankful if i get any Help ..

Thanks in advance.

Blackout

Scheduler

answered on 11 Sep 2020

2 answers

57 views

Telerik sass default theme renders the dot overlap with the label

I use Telerik Kendo.UI for ASP.NET MVC.

Here is my view to render the radio button.

<div class="col-xs-2"></div>

Here is the css that I include,

<div class="col-xs-8">

<div class="row text-center">

<div class="col-xs-12">

<h1>KENDO UI FORM</h1>

</div>

<div class="row">

<div class="col-xs-12">

<form class="k-form">

<fieldset>

<div class="form-field">

@(Html.Kendo().RadioButton().Name("engine1").Checked(true).HtmlAttributes(new { @name = "engine" }).Label("1.4 Petrol, 92kW"))

</div>

<div class="form-field">

@(Html.Kendo().RadioButton().Name("engine2").HtmlAttributes(new { @name = "engine" }).Label("1.8 Petrol, 118kW"))

</div>

</fieldset>

</form>

</div>

<div class="col-xs-2"></div>

Here is the css that I include,

1.<link rel="stylesheet" href="@Url.Content("~/content/kendo/2019.3.1023/kendo.bootstrap.min.css")" />

2.<link rel="stylesheet" href="@Url.Content("~/content/kendo/2019.3.1023/kendo.common-bootstrap.min.css")" />

3.<link rel="stylesheet" href="@Url.Content("~/css/telerik-default-theme.css")"

I attached the result in the attachment.

Is there any additional css to make this works?

Thank you.

RadioButton

answered on 09 Sep 2020

11 answers

1.5K+ views

Kendo Grid Custom Editable

Hi Team,

I have requirement for custom editable feature there i need to pass a value to editalbe function . So is there any way to pass parameter to Javascript function . i know this function will take dataitem as default parameter instead i want to pass viewbag value along with Dataitem to javascript editable function.

Hope you understand my problem its very urgent for me , please take a look and help me. waiting for your response.

.Editable("IsEditable('#= ViewBag.Month01 #')");

by using this i get only posted value but not Dataitem.

Below is my code:

c.Bound(p => p.EditYear).Title("Currency").Visible(false).Locked(false).Width(150);
c.Bound(p => p.month01FD).Title((string)ViewBag.Month01).Width(colWidthFD).ClientGroupFooterTemplate("#=sum#").ClientFooterTemplate("#=sum#").HtmlAttributes(new { @class = "telerik-edit-cell-inline"}).Editable("IsEditable");

i want Dataitem for EditYear and ViewBag.Month01 needed in javascript.

Editable("IsEditable"); by using this we will get Dataitem , but not the header of the grid. The header of the column will be in ViewBag .

Theser are dynamic headers , like this multiple columns will be there based on the header and model for EditYear will determine is this column is editible or not.

Thanks & Regards,
SP

Grid

answered on 09 Sep 2020

1 answer

6.3K+ views

Ajax Grid and ServerOperation(false)

Hi,

I have tested the differences between setting ServerOperation(true) and ServerOperation(false)...

if I set it to false no progress spinner is displayed during request the of the data - why?
if I set false it is not enough to use $("#grid").data("kendoGrid").dataSource.page(1) to refresh the data - I have to set:

$("#grid").data("kendoGrid").dataSource.read();

$("#grid").data("kendoGrid").dataSource.page(1);

this is because of the Client side paging?

Are there other differences between this modes which I have to consider?
(I didn't find detailed information about ServerOperation(true/false)) and it's consequences)

robert

Grid

answered on 09 Sep 2020

1 answer

1.0K+ views

Full width with floating labels

I started to use the new floating labels but I notice that the controls , otherwise with full width, are now resized to default. Here is my code:

<div class="form-group">

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

@(Html.Kendo().TextBoxFor(m => m.ContactPersonName)

.HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })

.Label(l => l.Content("Name *").Floating(true)))

</div>

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

@(Html.Kendo().TextBoxFor(m => m.Mobile)

.HtmlAttributes(new { @class = "form-control numeric phone", style = "width: 100%;" })

.Label(l => l.Content("Mobile # *").Floating(true)))

</div>

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

@(Html.Kendo().TextBoxFor(m => m.Email)

.HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })

.Label(l => l.Content("Email *").Floating(true)))

</div>

<div class="form-group">

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

@(Html.Kendo().TextBoxFor(m => m.TRN)

.HtmlAttributes(new { @class = "form-control", maxlength = "15", style = "width: 100%;" })

.Label(l => l.Content("Tax Registration # *").Floating(true)))

</div>

<div class="form-group">

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

@(Html.Kendo().TextBoxFor(m => m.SponsorName)

.HtmlAttributes(new { @class = "form-control", maxlength = "100", style = "width: 100%;" })

.Label(l => l.Content("Sponsor Name *").Floating(true)))

</div>

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

@(Html.Kendo().TextBoxFor(m => m.TradeLicenseNo)

.HtmlAttributes(new { @class = "form-control numeric", maxlength = "20", style = "width: 100%;" })

.Label(l => l.Content("Trade License # *").Floating(true)))

</div>

I need these input controls to appear sized and blocked (100% width) within their bootstrap cell.

TextBox

answered on 08 Sep 2020

1 answer

69 views

Localisation Support in client-side data-* attributes

Hello All, I am actually usingl ocalization for displaying texts in Window title,

In the .resx file i have a text like PopUpAjouter_Titre: Saisie d'une écriture .

In .cshtml file i am using this syntax to display the value

@(Html.Kendo().ToolBar().Name("ToolBar").Resizable(false)
.Items(items =>
{
items.Add().Type(CommandType.Button).Id("btnRefresh").SpriteCssClass("k-i-reload").ShowIcon(ShowIn.Both).HtmlAttributes(new { @title = Web.Resources.Views.TView.Action_Refresh, @class = "k-button-rond-ext" });
items.Add().Type(CommandType.Separator).HtmlAttributes(new { @style = "border-color: rgba(0,0,0,0.08);" });
items.Add().Type(CommandType.Button).Id("btnAjouter").SpriteCssClass("k-i-add").ShowIcon(ShowIn.Both).HtmlAttributes(new { @title = Web.Resources.Views.TView.Action_CreationEcritures, @class = "k-button-rond-ext",
data_titre = Web.Resources.Views.TView.PopUpAjouter_Titre)
});

}))

when this page is rendered in the chrome browser the html tag is displayed like below

<a role="button" href="" tabindex="0" title="Création" class="k-button-rond-ext k-button k-button-icon" data-titre="Saisie d#39;une écriture" id="btnAjouter" data-uid="52af038a-512d-4456-bc78-1cd9cfe83fdd" data-overflow="auto" aria-disabled="false"><span class="k-sprite k-icon k-i-add"></span></a>

and the actual text is not displaye the singlequote or apostrophe is displayed as '

But when i display the same value in a Paragraph like,<p>@Web.Resources.Views.TView.PopUpAjouter_Titre</p>

it is displayed like this in the chrome browser, <p>Saisie d'une écriture de trésorerie</p>

If anyone has encountered this issue, please help me.

Regards,

NAIDU Geetha

Toolbar

answered on 07 Sep 2020

1 answer

63 views

Page no not showing in Pagination in lower resolution

hi all

i have grid with data and pagination in bottom .in higher resolutin screens , all page no is showing . in lower reolution only first page no is showng ( refer screen shot )

is it anyway to show all page no in pagination details?

Grid

answered on 07 Sep 2020

5 answers

809 views

Save/Load - Custom Toolbar Disappears

I have an MVC Grid, with a custom toolbar. On that custom toolbar is a button to Save the grid options, which it does via localStorage. A second button loads the grid options from localStoage and applies them to the grid. Everything works except when I load the settings, my custom toolbar disappears. It doesn't just hide the toolbar, it's completely gone.

The grid code:

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

.Name("EIWOGrid")

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

.Columns(cols =>

{

cols.Bound(c => c.EmpId);

cols.Bound(c => c.LastName);

cols.Bound(c => c.FirstName);

cols.Bound(c => c.MiddleInitial);

cols.Bound(c => c.SSN);

cols.Bound(c => c.CaseNumber);

cols.Bound(c => c.OrderNumber);

cols.Bound(c => c.Amount).Format("{0:c}").HtmlAttributes(new { style = "text-align: right;"});

cols.Bound(c => c.Authority);

cols.Bound(c => c.FIPSCode);

cols.Bound(c => c.EIWOType);

cols.Bound(c => c.EIWODocument)

.Title("Document")

.ClientTemplate("<a href=\"" + @Url.Action("GetEIWODocument", "EIWO") + "?fileName=#:EIWODocument#\" target=\"_blank\">Document</a>");

cols.ForeignKey(c => c.EIWOAction, (IEnumerable) ViewData["GarnishmentCodes"], "CodeID", "CodeDesc");

cols.Command(c => c.Edit());

})

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("EIWOStatus"))

.Resizable(r => r.Columns(true))

.Scrollable(s => s.Height("auto"))

.Sortable()

.Pageable(p => p

.PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })

.ButtonCount(10))

.Filterable(f => f.Enabled(true))

.Events(ev =>ev.DataBound("gridBound"))

.AutoBind(true)

.DataSource(ds => ds

.Ajax()

.PageSize(25)

.ServerOperation(true)

.Model(m =>

{

m.Id(d => d.PseudoPrimaryKey);

m.Field(d => d.EmpId);

m.Field(d => d.LastName);

m.Field(d => d.FirstName);

m.Field(d => d.MiddleInitial);

m.Field(d => d.SSN);

m.Field(d => d.CaseNumber);

m.Field(d => d.OrderNumber);

m.Field(d => d.Amount);

m.Field(d => d.Authority);

m.Field(d => d.FIPSCode);

m.Field(d => d.EIWOType);

m.Field(d => d.EIWODocument);

m.Field(d => d.EIWOAction);

m.Field(d => d.DocketNumber);

})

.Read(r => r.Action("GetUnprocessedEIWOs", "EIWO"))

.Update(u => u.Action("UpdateEIWO", "EIWO"))

.Events(e => e.RequestEnd("refreshGrid"))

)

.ToolBar(tb =>

{

tb.Custom().Name("gridFilterReset").Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });

tb.Custom().Name("gridSave").Text("Save Settings").HtmlAttributes(new { id = "gridSave", style = "float:left;" });

tb.Custom().Name("gridLoad").Text("Load Settings").HtmlAttributes(new { id = "gridLoad", style = "float:left;" });

})

.ColumnMenu()

.Groupable()

)

And the javascript is:

$("#gridSave").click(function (e) {

e.preventDefault();

localStorage["kendo-EIWO-options"] = kendo.stringify($("#EIWOGrid").data("kendoGrid").getOptions());

});

$("#gridLoad").click(function (e) {

e.preventDefault();

var options = localStorage["kendo-EIWO-options"];

if(options) {

$("#EIWOGrid").data("kendoGrid").setOptions(JSON.parse(options));

}

});

I've also attached the grid settings themselves, copied out of localStorage and saved as a JSON file.

Any suggestions or help on keeping the toolbar from disappearing?

Grid

answered on 04 Sep 2020

1 answer

619 views

Show Confirm before Closing window

Hi,

Unfortunately, the simplest seeming tasks are made hard by Kendo.

I just have to show a "kendoConfirm" box before my Kendo Window closes.

I have written my code in the Close event of the Kendo Window. The confirm box shows but the window has already closed since the code execution does not stop when kendoConfirm box shows.

Is there any way to achieve this simple functionality?

Window

answered on 04 Sep 2020