Questions on UI for ASP.NET MVC Forum

14 answers

663 views

I'm having trouble selecting the entire cell when editing a grid in InLine mode. I want the entire cell selected to make entering a new value easier.

I tried adding the onEdit event. But the onEdit event fires when the Edit button is clicked.

For grids that are batch edit, I've been able to have the onEdit event fire javascript to select the entire cell. This is how I'm doing it for a grid in batch mode. I assume it will be similar, but I'm struggling with it. Thanks for your help.

function onEdit(e) {

var inputName = e.container.find('input').attr("name");

var myInput = e.container.find('input[name="' + inputName + '"]');

myInput.select();

}

Grid

answered on 16 Nov 2016

1 answer

11.2K+ views

How do I know when grid is fully loaded and displayed?

i'm using

grid.dataSource.transport.options.read.url = "addr here";

grid.dataSource.read();

to reload the grid and was wondering how do i know when it's done reloading and is fully displayed?
There does not seem to be an event for it ?
Is there a work around?

Thanks in advance!

Grid

answered on 16 Nov 2016

1 answer

221 views

Upload Validation not working

Hi,

I have an upload control that the validation is not working on. I am setting it to restrict to .jpg only and 2mb but the save action is called no matter what I upload to it.

@(Html.Kendo().Upload()

.Events(e => e.Success("onParent1UploadSuccess"))

.Async(a => a

.AutoUpload(true)

.Save("SaveParent1", "HistoryForm", new { AdmissionPK = Model.AdmissionPK })

)

.ShowFileList(false)

.Multiple(false)

.Name("Parent1Upload")

.Validation(v => v

.AllowedExtensions(new string[] { ".jpg" })

.MaxFileSize(2097152)

)

.Messages(m => m.Select("Select File..."))

)

How do I get the validation to actually work?

Thanks.

Upload

answered on 16 Nov 2016

1 answer

349 views

Decimal separator InCell editing

I have some prices to display and edit in a Kendo UI Grid.

Prices ned to be shown (and edited) in nl-NL format. Prices are in double format.

The grid show it like: € 12,34. With a comma as separator. This is the correct format.

The I click on a cell to edit the price the edit cell display 12.34

- no currency symbol, which is not the main issue but would be great if this is also possible)

- displays with a point as decimal separator. When I change the value to 12.35 (with the same point separator as the edit box shows) it is stored as 1235.

- I need to edit the point as well and make it 12,35 (with the comma as separator). This behaviour is right btw, because we always edit with the comma as separator.

But the question is:

Why is the number displayed with a point as separator in the first place when I click on a cell. I need it there to display with the comma as a separator.

My code looks like the following:

ViewModel

[DisplayFormat(DataFormatString = "{0:C}", ApplyFormatInEditMode = true)]

[Display(Name = "Price")]

public double? price { get; set; }

.cshtml

columns.Bound(c => c.price).Filterable(false).Width(100);

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

.Name("grid").AutoBind(false)

.Columns(columns =>

{

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

...

columns.Bound(c => c.price).Filterable(false).Width(100);

...

})

...

.Editable(e =>

{

e.Mode(GridEditMode.InCell);

e.DisplayDeleteConfirmation(false);

})

...

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(12)

.Model(model => model.Id(c => c.Id))

.Read(read => read.Action("Read", "MaterialByClass").Data("getClassname"))

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.code).Editable(false);

...

}

)

.Update("Update", "MaterialByClass")

.Destroy("Delete", "MaterialByClass")

)

@section scripts

{

@Scripts.Render("~/bundles/jquery-cookie")

<script type="text/javascript">

$(document).ready(function () {

kendo.culture("nl-NL");

...

});

</script>

}

Web.Config

<system.web>

...

<globalization culture="nl-NL" uiCulture="nl" enableClientBasedCulture="true" />

...

</system.web>

Grid

answered on 16 Nov 2016

8 answers

749 views

Bootstrap Form Layout is not working

Hi,

I have the Problem that my form layout (Bootstrap) is not working in Kendo MVC Window but everywhere else...
(the Content is loaded with Ajax as an PartialView)

see attached Pictures:

popup1.jpg and popup2.jpg is in Kendo window and doesn't work
popup3.jpg and popup4.jpg in normal page and it works

I have set the following in my CSS:

*, :before, :after

{

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */

.container,

.container-fluid,

.row,

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,

.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,

.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,

.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,

.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,

.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,

.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,

.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,

.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,

.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,

.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,

.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12

{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Window

answered on 15 Nov 2016

1 answer

105 views

TreeList Export to Excel

Hi,

I am using a TreeList with "Load-on-Demand" approach due to large number of record (>5000). The tree is first loaded with the parent node and expanded accordingly. However, my problem is that only one record will get exported to Excel .

If I change to "Load-All" approach, exporting to Excel is fine if there is less than 2000 record. Once the record size goes over, the TreeList will fail to load.

Here is my Load-on-Demand code;

public JsonResult Read_AssemblyTreeList([DataSourceRequest] DataSourceRequest request, int? id)
{
var result = GetAssemblyPartList().ToTreeDataSourceResult(request,
e => e.AssemblyPartListID,
e => e.ParentSequence,
e => id.HasValue ? e.ParentSequence == id : e.ParentSequence == null,
e => e.ToAssemblyPartListVM());

return Json(result, JsonRequestBehavior.AllowGet);
}

Here is my Load-All code;

public JsonResult Read_AllAssemblyTreeList([DataSourceRequest] DataSourceRequest request)
{
var result = GetAssemblyPartList().ToTreeDataSourceResult(request,
e => e.AssemblyPartListID,
e => e.ParentSequence,
e => e.ToAssemblyPartListVM()
);
return Json(result, JsonRequestBehavior.AllowGet);
}

Any help is much appreciated.

Thanks

Karen

TreeList

answered on 15 Nov 2016

3 answers

345 views

HTML editor becomes readonly within Tabstrip

Hi,

I have one HTML editor, it becomes readonly when it is within Tabstrip. I have performed another experiment, just HTML editor within DIV without Tabstrip, everything is work as per normal.

I have made a comparison between them and found out it seem contenteditable="true" is missing in the body when it is placed within Tabstrip, may i know why and any to fix this? Comparison and implementation details are as below. Thanks.

HTML editor within Tabstrip

<html>

<head></head>

<body></body>

</html>

HTML editor outside Tabstrip

<html>

<head><meta charset="utf-8"><style

>html,body{padding:0;margin:0;height:100%;min-height:100%;}body{font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:1px .2em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{table-layout:fixed;width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table p{margin:0;padding:0;}k\:script{display:none;}</

style><script

>(function(d,c){d[c]('header'),d[c]('article'),d[c]('nav'),d[c]('section'),d[c]('footer');})(document, 'createElement');</

script></head>

<body autocorrect="off" contenteditable="true"></body>

</html>

Code

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div>

<% Html.Kendo().TabStrip()

.Name("tabstrip")

.Animation(animation =>

animation.Open(effect =>

effect.Fade(FadeDirection.In)))

.Items(tabstrip =>

{

tabstrip.Add().Text("Main")

.Selected(true)

.Content(() =>

{ %>

<%--This editor is not editable--%>

<div class="row-fluid">

<div class="span12">

<label><%: Html.DisplayNameFor(model => model.Description) %>:</label>

<%:

Html.Kendo().EditorFor(model => model.Description)

.Name("Description")

.Encode(false)

.Tools(tools => tools.Clear()

.Bold()

.FontColor().BackColor()

.InsertUnorderedList().InsertOrderedList()

.Outdent().Indent())

%>

<%: Html.ValidationMessageFor(model => model.Description)%>

</div>

<% });

})

.Render();

%>

<%--This editor is work as normal--%>

<label class="info-title"><%: Html.DisplayNameFor(model => model.Description) %>:</label>

<%:

Html.Kendo().EditorFor(model => model.Description)

.Name("Description")

.Encode(false)

.Tools(tools => tools.Clear()

.Bold()

.FontColor().BackColor()

.InsertUnorderedList().InsertOrderedList()

.Outdent().Indent())

%>

</div>

</asp:Content>

Editor

answered on 15 Nov 2016

1 answer

470 views

Passing filter to Ajax-Bound Grid manually

Hi,

Currently I'm facing some problems while passing customn filters via js in an ajax bounded grid.

The Grid is defined identically to this:

01.@(Html.Kendo().Grid<ViewModel>()

02. .Name("Grid")

03. .Columns(columns =>

04. {

05. columns.Bound(m => m.Name)

06. .Filterable(false)

07. .Width(150)

08. .Title("Name")

09. })

10. .Pageable(page => page

11. .Refresh(true)

12. .PageSizes(true)

13. )

14. .Sortable()

15. .Scrollable(s => s.Enabled(true).Height("100%"))

16. .DataSource(dataSource => dataSource

17. .Ajax()

18. .PageSize(10)

19. .Read(read => read.Action("Action", "Controller", new { Area = "Area" })

20. )

21. )

Aftzer the Data is loaded, I want to manually pass a filter from an external function like:

1.var x = $("#Grid").data("kendoGrid");

2.x.dataSource.filter({logic: "and", filter: {field: "Name", operator: "eq", value:"John"} });

The defined action of the grid is fired but the POST-Request catched via Dev-Tools doesn't contain the filter (filter ="").

The goal is to transport a costum filter during the paging and sorting. (Using Kendos Server-Side-Filtering isn't an option because

of architecture-issues)

How can i include the filter in the request or is there any other way to achieve the described goal?

Thanks.

Regards,

Matthias

Grid

answered on 15 Nov 2016

1 answer

282 views

Multiselect not showing initial value

Hi all.

I have a multiselect widget with a client side added item. Selectin this item as default selection doesn't work. This is the widget definition:

@(Html.Kendo().MultiSelect().Name(componentName: "orderTypeSelector")

.DataSource(ds => ds.Read((read => read.Route(OrderTypeControllerRoute.GetReadList, new RouteValueDictionary { { "culture", UICulture.ToLower() } }))))

.Events(e => { e.DataBound(handler: "orderTypeDataBound"); e.Select(handler: "orderTypeSelect"); })

.DataValueField(nameof(OrderTypeViewModel.Id))

.DataTextField(nameof(OrderTypeViewModel.Label))

.Value(new[] {new OrderTypeViewModel { Id = 0, Label = "Alle", BackgroundColor= "rgba(0, 0, 0, 1)", MasterSystemId="*" } })

.Deferred()

)

And these are the javascript event handlers:

// order type multiselect events

function orderTypeDataBound(e) {

var ds = this.dataSource;

if (ds.at(0).@nameof(OrderTypeViewModel.Id) !== 0) {

ds.insert(0, {

@nameof(OrderTypeViewModel.Id): 0,

@nameof(OrderTypeViewModel.Label): "Alle"

});

}

function orderTypeSelect (e) {

var dataItemValue = this.dataSource.view()[e.item.index()].value;

var values = this.value();

if (dataItemValue !== "Alle" && contains(dataItemValue, values)) {

return;

}

if (dataItemValue === "Alle") {

values = [];

} else if (values.indexOf("Alle") !== -1) {

values = $.grep(values, function(value) {

return value !== "Alle";

});

}

values.push(dataItemValue);

this.value(values);

this.trigger("change"); //notify others for the updated values

e.preventDefault();

}

What am I missing here?

Kind regards

Bernd

MultiSelect

answered on 15 Nov 2016

2 answers

309 views

Subgrid is not loading the data

Hi All,

I am using Kendo MVC subgrid with client template, and initially its working fine but since few days back subgrid is not loading any data.

Here is my code for Grid. In my case when expanding sub grid its loading column but not the data and also dont seen any event for data load.

<h3 class="nvs">Search Results</h3>

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

.Name("SalesGrid")

.Columns(columns =>

{

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='master'/>").Width(30);

columns.Bound(e => e.Nbr).Title("Nbr").Width(160);

columns.Bound(e => e.Name).Title("Name");

columns.Bound(e => e.Name1).Title("Name1");

columns.Bound(e => e.JobTYpe).Title("JobType");

})

.Sortable()

.Scrollable()

.ClientDetailTemplateId("template")

.DataSource(ds => ds

.Ajax()

.PageSize(10)

.Read(r => r.Action("Action", "Controller").Data("jsview.GetSearchCriterion"))

)

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

.Pageable(p => p

.Numeric(true)

.PageSizes(new[] { 10, 20, 50 })

.PreviousNext(true)

)

<div>

<script id="template" type="text/kendo-tmpl">

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

.Name("grid_#=Nbr#") // template expression, to be evaluated in the master context

.Columns(columns =>

{

columns.Bound(o => o.OrderNbr).Title("Order Number").HeaderHtmlAttributes(new { style = "white-space:normal" });

columns.Bound(o => o.Date).Title("Date").Format("{0:MM/dd/yyyy}").HeaderHtmlAttributes(new { style = "white-space:normal" });

columns.Bound(o => o.Type).Title("Type").HeaderHtmlAttributes(new { style = "white-space:normal" });

columns.Bound(o => o.Type1).Title("Type1").Width(110);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(read => read.Action("Action1", "Controller", new { Nbr = "#=Nbr#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

</div>

Grid

answered on 14 Nov 2016