Questions on UI for ASP.NET MVC Forum

1 answer

358 views

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

777 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

107 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

358 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

475 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

287 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

322 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

1 answer

77 views

How can I show DropDownList as the default column type in GridView initial loading for all rows ?

Hi,
I'd like to know how can I show DropDownList as the default control type for specific column in GridView control on its initial loading instead of showing the default label in each row for specific column.
I'm using in-cell edit mode and I followed your demos to show DropDownList for specific column by using ClientTemplate and ForeignKey Column Type ..Its working good, However, I'd like to show this DropDownList always for this columns in all rows in GridView initial loading not only when focus on the related cell.

MyView:

@(Html.Kendo().Grid<GIWebDemoApp.Models.ViewModels.ProductCategoryViewModel>()<br> .Name("grid"

)<br>    .Columns(columns =><br>    {<br>        columns.Bound(p => p.ProductName);<br>        columns.Bound(p => p.Category).ClientTemplate(

"#=Category.CategoryName#"

).Width(160);<br>        columns.Bound(p => p.UnitPrice).Width(120);<br>        columns.Command(command => command.Destroy()).Width(90);<br>    })<br>    .ToolBar(toolBar =><br>        {<br>            toolBar.Create();<br>            toolBar.Save();<br>        })<br>    .Editable(editable => editable.Mode(GridEditMode.InCell))<br>    .Pageable()<br>    .Sortable()<br>    .Scrollable()<br>    .HtmlAttributes(

new { style = "height:430px;" })<br> .DataSource(dataSource => dataSource<br> .Ajax()<br> .Batch(true)<br> .ServerOperation(false)<br> .Events(events => events.Error("error_handler"

))<br>        .Model(model =><br>        {<br>            model.Id(p => p.ProductID);<br>            model.Field(p => p.ProductID).Editable(

false);<br> })<br> .PageSize(20)<br> .Read(read => read.Action("GetAllProductsAndRelatedCategories", "Product"))<br> .Create(create => create.Action("AddProductsAndRelatedCategories", "Product"))<br> .Update(update => update.Action("UpdateProductsAndRelatedCategories", "Product"))<br> .Destroy(destroy => destroy.Action("RemoveProductsAndRelatedCategories", "Product"))<br> )<br>)

-----------------------------------------------

<p>public

ActionResult Manage()        </p><p>{            </p><p>PopulateCategories();  </p><p>

return View(); </p><p>}</p>

private void PopulateCategories()<br> {<br> var dataContext = new

NORTHWNDEntities();<br>            var categories = dataContext.Categories<br>                        .Select(c =>

new

CategoryViewModel<br>                        {<br>                            CategoryID = c.CategoryID,<br>                            CategoryName = c.CategoryName<br>                        })<br>                        .OrderBy(e => e.CategoryName);<br><br>            ViewData[

"categories"] = categories;<br> <br> }

Grid

answered on 14 Nov 2016

3 answers

84 views

Move shapes with the keyboard?

Hi! Is there a way to move the shapes in the diagram with the arrow keys? Or I'd need to do it myself capturing key events and moving the selected shapes?

Diagram

answered on 14 Nov 2016

1 answer

955 views

DropDownListFor SelectedIndex

I'm working with Kendo UI on an MVC application. We have a grid and when the user opens the row for editing we have a dropDownList that holds company names. I'm trying to get the DDL to default to the company name that's pertinent to the row.

Here's the column code:

columns.Bound(e => e.company_business_name).Width(220).Title("Company")

.EditorTemplateName("CompanyName");

and here's the editorTemplate code:

@model string

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

.DataTextField("Text")

.DataValueField("Value")</p><p>

.BindTo((System.Collections.IEnumerable)ViewData["Companies"])

)

and the method that fills the DDL:

private void PopulateCompanies()

{

var companyList = new List<SelectListItem>();

if (!string.IsNullOrEmpty(Session["Companies"] as string))

{

companyList = (List<SelectListItem>)Session["Companies"];

}

else

{

companyList = new DataAccess().GetCompanies(CurrentSettings.getUser().userId);

CacheCompanies(companyList);

}

ViewData["Companies"] = companyList;

}

The dropDownList is populating, and displays when I click edit, but the selected value is blank. How can I set it to the value that was in the grid when it was in display mode?

DropDownList

answered on 11 Nov 2016