Questions on UI for ASP.NET MVC Forum

2 answers

212 views

Custom cell editor on spreadsheet when using MVC wrappers

Hi,

I'm using the Telerik spreadsheet with the MVC wrappers and am trying to add a custom cell editor, (actually an auto complete) but similar to the custom color editor shown in the third example on the Kendo UI demos https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors. However this example is missing from the MVC demos https://demos.telerik.com/aspnet-mvc/spreadsheet/custom-editors and there is no Editor method on the SpreadsheetSheetRowCellBuilder object.

This example https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-open-autocomplete-editor-on-cell-click suggests a way that I could use the Select event to achieve the editor in a popup but I would like to add it in cell.

I realize this won't be available out of the box with the MVC wrappers, but would be very grateful if you could suggest how I might create a workaround for it.

Regards

Michael

Spreadsheet

answered on 02 Oct 2018

1 answer

9.3K+ views

DropdownList MVC - Set Default Value at Runtime

I have a Kendo DropdownList as follows:

@(Html.Kendo().DropDownListFor(m => m)
.Name("DealerBoothDropDown")
.DataTextField("DropDownText")
.DataValueField("BoothDetailRowId")
.OptionLabel("Select Dealer and Booth...")
.AutoBind(false)
.Filter("contains")
.HtmlAttributes(new { style = "width:500px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDealersBoothsForDropDown", "DealerAccounting");
})
.ServerFiltering(true); // Let's do server side filtering
})
.Events(e => {
e.Select("onSelect");
})
)
</div>

When the page loads, I would like to execute some JS that sets a default value in the Dropdown. Can you show me how I might do this.

DropDownList

answered on 02 Oct 2018

1 answer

233 views

2018.3.911 Material Theme Customisation

Hello,

I have a project with the latest version of Kendo UI ASP.NET MVC.

In my bundle config i am loading the 2 .css files

kendo.common-material.min.css

kendo.material.min.css

Everything runsand looks as expected with the blue material theme. I want to be able to override the accent/primary color in the theme.

I've tried downloading and using the npm package @progress/kendo-theme-material, overriding the scss variables and recompiling the .css.

when i add this file into the bundle config it completely messes up the controls, padding, margin, spacing and the actual look of the controls is wrong.

How do i customise the material theme?

Cheers

Mike

General Discussions

answered on 01 Oct 2018

3 answers

163 views

Post Treelist even if there is no modification

Hello,

I have a view with a treelist in batch / cell editing. When I use the update method to post my treelist I also send additional datas.

But if I have no modifications on my treelist, I can't post modifications on additional datas.

Is there a way to enable the update post even if there is no modifications on treelist ?

This is my view:

@Html.HiddenFor(x => x.Id)

@(Html.HiddenFor(m => m.UserCreation, new { Value = User.Identity.Name.Split('\\')[1] }))

<div class="synchroDiv">

<div>

@Html.LabelFor(m => m.Nom)

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

</div>

@Html.ValidationMessageFor(x => x.Nom)

</div>

<div class="synchroDiv">

<div>

@Html.LabelFor(m => m.PctMargeDefaut)

@(Html.Kendo().NumericTextBoxFor(m => m.PctMargeDefaut)

.Culture("fr-FR")

.Min(0)

.Max(15)

.Step(0.5))

</div>

@Html.ValidationMessageFor(x => x.PctMargeDefaut)

</div>

<div class="synchroDiv">

<div>

<input checked="@Model.EnableCategories" style="width: 0;" type="checkbox" class="switch switch-lg" id="chkCategories" onchange="changeCategoriesVisibility();">

<label for="chkCategories">Personnaliser les marges des catégories Web</label>

</div>

<div id="categories">

@(Html.Kendo().TreeList(Model.Categories)

.Name("profilMargeTreelist")

.Toolbar(toolbar =>

{

toolbar.Save().Text("Enregistrer");

toolbar.Cancel().Text("Annuler");

})

.HtmlAttributes(new { style = "height:100%" })

.Columns(columns =>

{

columns.Add().Field(e => e.Libelle);

columns.Add().Field(e => e.Code);

columns.Add().Field(e => e.PctMarge).Template("# if ( PctMarge === null ) {# #=''# #} else {# #= PctMarge # %#} #");

})

.Editable(e => e.Mode(TreeListEditMode.InCell).Move(false))

.DataSource(dataSource => dataSource

.Batch(true)

.Update(update => update.Action("UpdateMargeProfil", "ProfilMarge").Data("addData"))

.Model(m =>

{

m.Id(f => f.Code);

m.ParentId(f => f.CodeParent).Editable(false);

m.Field(f => f.Code).Editable(false);

m.Field(f => f.Libelle).Editable(false);

m.Field(f => f.PctMarge);

m.Expanded(false);

})

).Height(800))

</div>

Thank you in advance, I hope everything is clear.

Julien

TreeList

answered on 01 Oct 2018

3 answers

546 views

Editor Minimum

My editor seems to be ignoring the minimum on height.

<div class="col-6">
<label>Notes:</label>
@(Html.Kendo().Editor()
.Name("RMIComment")
.HtmlAttributes(new { style = "height:80px" })
.Resizable(resizable => resizable.Content(true).Min(80))
.Tools(tools => tools.Clear())
)
</div>
<br />

It appears to always draw on the screen around 200px. I want it smaller.

Thanks

Lee

Editor

answered on 01 Oct 2018

1 answer

153 views

Grid MVC Destroy with FK and EF code first approach help

Hi there,

I got 2 EF Code first tables

public class ActionGES

{

public int ActionGESID { get; set; }

[MaxLength(250)]

public string TitreAL { get; set; }

[Required]

public string Description { get; set; }

//FK

public ICollection<IndicateurAction> Indicateurs { get; set; }

}

public class IndicateurAction

{

public int IndicateurActionID { get; set; }

[Required]

public int Indicateur { get; set; }

[Required]

public int Annee { get; set; }

public bool ApprouveEA { get; set; }

//FK Key

public int ActionGESId { get; set; }

[ScriptIgnore]

public ActionGES ActionGES { get; set; }

}

work good with LINQ with .include

My question is: it is normal that when I call Destroy on my grid, I ActionGES object are created in the controller action with FK Indicateurs collection count = 1 but with en [0] item = null...

My Controller action

//POST: Actions_Destroy

[Authorize]

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Actions_Destroy([DataSourceRequest] DataSourceRequest request, ActionGES act)

{

if (act != null && ModelState.IsValid)

{

this.actionService.DeleteAction(act);

}

return Json(new[] { act }.ToDataSourceResult(request, ModelState));

}

The "act" variable contain a Indicator with a null item. Look the picture.

Grid

answered on 01 Oct 2018

4 answers

1.2K+ views

[Solved] How I add DropDownList in a custom template for popup editing?

Hi, I work with the sample GridCustomPopupTemplate but in the sample you do not show how to add an dropdownList for an ForeignKey column. In Inline mode editing all work good. But how to do it in an custom popup template?

My template for now:

@model PortailGES.Models.ActionGES

<div class="editor-label">

@Html.LabelFor(model => model.SecteurId, "Secteur")

</div>

<div class="editor-field">

@Html.Kendo().DropDownListFor(m => m.SecteurId)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Titre)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Titre)

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

</div>

The DropDownListis empty. I see that in the ViewData.Values[0].Items I got the source items for Secteur but how to make the link with the DropDownList DataSource?

Thanks

Grid

answered on 01 Oct 2018

4 answers

1.7K+ views

[Solved] Need help in how to add textbox and button in toolbar using Custom

Wondering is there a way I can add textbox and a button so on click of a button reads textbox value and calls javascript?

Right now I am showing two buttons using following code:

.ColumnMenu(i => i.Columns(false))
.ToolBar(toolbar => Model.ConfigureToolbar(toolbar, toolbar2 =>
{
if (Model.CanCreate && Model.SourceId > 0)
{
var caption = string.Format("Copy Items From Source ({0} {1})", OrderHelper.GetEntityLabel(Model.SourceIsQuote),
Model.SourceId);
var show = new OrderItemGridCopyFromSourceLaunchInfo
{
StateKey = Model.StateKey,
Title = caption
};
Model.CopySourceInfoTo(show);
toolbar2.Custom().Text(caption + "...").Url(string.Format("javascript: order.showItemGridCopyFromSourceForm({0});", JsonConvert.SerializeObject(show)));
}
}))

public static void ConfigureToolbar<T>(this IDialogStartInfo info, GridToolBarCommandFactory<T> toolbar,
Action<GridToolBarCommandFactory<T>> additional) where T : class
{
if (info.CanCreate)
{
toolbar.Custom()
.Text(string.Format("Add {0}", info.Subject))
.HtmlAttributes(new {href = string.Format("javascript:{0}();", info.AddDialogFunction)});
}
if (additional != null)
{
additional(toolbar);
}
}

Grid

answered on 01 Oct 2018

3 answers

422 views

[Solved] Selecting Multiple records in grid with checkboxes Issue

I have a Kendo Grid in an MVC view. I've enabled paging, and added a check box to select the records. Everything seems to work, however when I select all items on 1 page, for some reason, all items get selected across all pages instead of just on the 1 page. If I select all items only on 1 page - all items in all subsequent pages should not be checked. Any ideas?

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

.Name("Grid")

.Columns(columns => {

columns.Select().Width(50);

columns.Bound(r => r.Id).Hidden();

columns.Bound(r => r.SomeNumber).Title("Number").Filterable(f => f.Cell(cell => cell.ShowOperators(false))).ClientTemplate("#= SomeNumber# # if(!Viewed) { # <

span id='unread-#= Id #' class='badge new-results'>New</span> # } #");

columns.Bound(r => r.Name).Title("Person").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.DateOfBirth).Title("Date of Birth")

.ClientTemplate("#= DateOfBirthAsString#")

.Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.CompanyName).Hidden();

columns.Bound(r => r.SomeOtherName).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.DisplayName).Title("Place").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.EntryDateAsString).Title("Collection Date").Filterable(false);

columns.Bound(r => r.ReportGuid).Hidden(true);

})

.ToolBar(t => t.Template(@<text><label>Search By Entry Date Range:</label> <div class="row"> <div class="col-md-3">@(Html.Kendo().DatePicker().Name("startSearch").HtmlAttributes(new { PlaceHolder = "Start Date..." }))</div> <div class="col-md-3">@(Html.Kendo().DatePicker().Name("endSearch").HtmlAttributes(new { PlaceHolder = "End Date..." }))</div> <div class="col-md-1"><button class="k-button" type="button" onclick="filterGrid()" style="width: 100%">Search</button></div> <div class="col-md-1"><button class="k-button" type="button" onclick="resetFilter()" style="width: 100%">Reset</button></div> <div class="col-md-1"><button class="k-button" type="button" onclick="downloadFiles()" style="width: 100%">Download</button></div> </div></text>))

.Pageable(p => p.PageSizes(new int[] { 10, 25, 50, 100 }))

.Sortable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row)

.Operators(o => o

.ForString(str => str.Clear()

.Contains("Contains")

)

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("EntryDate").Descending())

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

.PageSize(10)

)

.PersistSelection()

)

Grid

answered on 28 Sep 2018

5 answers

1.6K+ views

Kendo Grid MVC Time field filter with TimePicker control

I am displaying a Time field with datatype DateTime. I am displaying only time part at UI by using Data Format String "{0:hh:mm:ss tt}")

(eg. field value:02:00:00 AM).

I want to apply filter on this field but by default filter option provides DatePicker control to select date but I want only TimePicker control to be display in filter?

I don't want display DatePicker control because its not display in grid row.

Please let me know if there are any demo for this scenario.

Grid

answered on 28 Sep 2018