Questions on UI for ASP.NET MVC Forum

1 answer

237 views

Specs

Kendo: 2012.3.1114
Net: 4.5
MVC: 4.0

Problem
I am binding my grid using a DataTable as the Model and need to have aggregate values. I have to use the datatable as I have a lot of data that is being sent over from the web service. If wrapped as XML it was over 55 MB for 21 columns and 14,400 rows so we converted the SQL DataTable to CSV and then sent the string over. That resulted in a file around 5MB.

The data that I a getting has no model as there can easily be 200+ columns depending on the query so making a data model is sadly out of the question.

If I use the snippet below as my base (taken from the Kendo UI Code Library) there seems to be no way to set up the aggregate functions

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

.Name("Grid")

.Columns(columns => {

foreach (System.Data.DataColumn column in Model.Columns)

{

columns.Bound(column.DataType, column.ColumnName);

}

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Read", "Home"))

)

Back in the days of the Telerik MVC controls I could set up the aggregate function you could setup the aggregate while adding the bound column but in the Kendo UI wrapper that has been moved down to be inside of the DataSource.

Telerik Grid:

columns.Bound("ColumnName").Aggregate(aggregates => aggregates.Count().Min().Max())

If I try and set up the agregate down in the DataSource I get a lovely exception "'count' is undefined" which is a bit vague.

if (column.ColumnName == "ProductID")

{

columns

.Bound(column.DataType, column.ColumnName)

.ClientFooterTemplate("Count: #=count#");

}

...

.Aggregates(aggregates =>

{

aggregates.Add(a => "ProductID").Count();

})

Is there any way to get around the aggregate problem?

Grid

answered on 29 Jan 2013

1 answer

85 views

IE8 : Grid Popup Add not working for Text and DateTime input in IE8

Hi,

In Grid MVC Server Wrapper for Kendo UI, popup save values are not binding to grid for input text box. Same is happening for Date time selector, it works okay if a Date is selected but doesn't work consistently if someone manually types in a Date

Please see attached file for visual description

This only happens on IE8

Please suggest a solution

Thanks,

Taha

Grid

answered on 29 Jan 2013

1 answer

1.2K+ views

Numeric Textbox in Grid

I've got a grid that I'm creating using the MVC wrapper. I have fields defined as numeric but when I edit the fields they show a large textbox (not sure why they are so large) and never a numeric box. I have found that when I add a client template that is a numeric text box the box shows up but doesn't appear with proper styling. When I edit and cancel the box suddenly shows proper formatting. I've looked at the HTML document and it seems that the wrapper objects are not being added. I'm not sure what I'm doing wrong.

Here is my MVC view code:

@(Html.Kendo().Grid<eLuminate.Radar.Web.Provider.Model.Procedures.Price>().Name("prices").Columns(columns =>

{

columns.Bound(c => c.Name).Width(250);

columns.Bound(c => c.RelatedProviderName).Title(Model.IsFacility ? "Professional" : "Facility").Width(150);

columns.Bound(c => c.High).Format("{0:C0}").Groupable(false).Filterable(false).Width(75).Hidden();

columns.Bound(c => c.Low).Format("{0:C0}").Groupable(false).Filterable(false).Width(75).Hidden();

columns.Bound(c => c.Average).Format("{0:C0}").Groupable(false).Filterable(false).Width(75);

columns.Bound(c => c.MyPrice).Format("{0:C0}").Filterable(false).Width(125)

.ClientTemplate(Html.Kendo().NumericTextBox().Name("mp_#=ID#").Min(0).HtmlAttributes(new { value = "#=MyPrice#", style = "width: 100px;" }).ToClientTemplate().ToHtmlString());

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create())

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

.Filterable()

.ColumnMenu()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.Events(events => events.Error("error_handler"))

.Model(m =>

{

m.Id(p => p.ID);

m.Field(p => p.Name).Editable(false);

m.Field(p => p.RelatedProviderName).Editable(false);

m.Field(p => p.High).Editable(false);

m.Field(p => p.Low).Editable(false);

m.Field(p => p.Average).Editable(false);

})

.Update(update => update.Action("UpdatePrice", "Procedures", new { id = Model.ID }))

.Read(read => read.Action("ReadPrice", "Procedures", new { id = Model.ID }))

.Destroy(destroy => destroy.Action("DeletePrice", "Procedures", new { id = Model.ID }))

.Create(create => create.Action("AddPrice", "Procedures", new { id = Model.ID }))

)

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

.Selectable()

.ClientDetailTemplateId("analytics")

.Groupable()

.HtmlAttributes(new { style = "width: 800px;" }))

Grid

answered on 29 Jan 2013

2 answers

256 views

[Solved] Initial value of list not bound

I've got several dropdown lists in an editor template, for use with a grids pop-up edit window.

They are displayed fine, and if a value other than the default one is selected, data is returned to the controller.

However, if the user leaves the default values as presented, null values are returned to the controller.

The definition is:

@(Html.Kendo().DropDownListFor(c=>c.Site)

.Name("Site")

.DataTextField("SiteDescription")

.DataValueField("Site")

.DataSource(source=>source

.Read(read=>read.Action("GetSiteLookUpList","ManualData"))))

@Html.ValidationMessageFor(c => c.Site )

Do I need to set anything else so the default value is posted back?

DropDownList

answered on 29 Jan 2013

1 answer

72 views

[Solved] Initialisation from table containing page X

Is it possible to initialise grid from table that only contains one page of datasource and use remote datasource for another pages?

Ie. there will be HTML table containing page 5 and I want to generate kendo grid from this table and need to tell kendo that its page 5 and to load another pages to use datasource.

Grid

answered on 29 Jan 2013

4 answers

614 views

[Solved] DataBound event not being recognized

Hi,

I have a straight forward implementation of cascading comboxes that doesn't seem to recognize the DataBound event. I have downloaded the latest keno js files, but nothing seems to work. When referencing the events I can see these actions available: Change, Close, Open and Select.

Here is the code:

@(Html.Kendo().ComboBox()

.Name("classes")

.HighlightFirst(true)

.Filter("contains")

.Placeholder("Select Class...")

.HtmlAttributes(new { style = "width: 300px;" })

.Suggest(true)

.DataTextField("Name")

.DataValueField("Id")

.DataSource(source => source.Read(read => read.Action("GetClassList", "RCS"))).AutoBind(true))

@(Html.Kendo().ComboBox()

.Name("vendorsforClass")

.CascadeFrom("classes")

.AutoBind(false)

.Value("Select Vendor...")

.HtmlAttributes(new { style = "width: 300px;" })

.DataTextField("Name")

.DataValueField("Id")

.Events(e => { e.DataBound("vendorForClassChangeEvent")})

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetVendorListByClass", "RCS").Data("filterProducts");

}).ServerFiltering(true);

}))

<script type="text/javascript">

function vendorForClassChangeEvent() {

alert('here');

var combobox = $("#vendorsforClass").data("kendoComboBox");

combobox.open();

}

function filterProducts() {

return {

classes: $("#classes").val()

};

}

Any help or thoughts would be appreciated.

Thank you,
Tad

ComboBox

answered on 28 Jan 2013

2 answers

232 views

[Solved] Virtual scrolling with grids inside tabstrip

I have a tabstrip set up with multiple grids on a page - one grid per tab. For each grid i have virtual scrolling set up. The grid on the first tab works properly, but if I go to any of the subsequent tabs the scroll handle is not present on the scrollbar. If I edit a cell or sort or filter the grid, then the scroll handle shows up and all is good. It's just in the initial view for grids that aren't on the initial active tab. Any ideas if it's something I'm doing wrong or if it might be a bug with the code?

I'm using IE9 as my browser. If you want a sample to duplicate it on, you could probably throw the virtualization grid demo into a tabstrip and should be able to see this behavior.

Thanks for your help!

Regards,
Brian

Grid

answered on 28 Jan 2013

1 answer

95 views

Cascade dropdownlist in edit mode of grid sends old value on the cascaded list

Hi,

I have a grid with 2 cascade dropdownlist. When I am in the edit mode of the grid using a popup, and i change the value of the parent dropdownlist, the second dropdownlist is repopulated correctly. But if the user doesn't choose anything from the second dropdownlist and just submits. The old value of the second dropdownlist is sent to the controller in the bound model. Although this seems correct by design since the user didn't actually change the value of the second dropdownlist but for data integration this is incorrect.

What I want to be able to do is change the value of the second dropdownlist when the first one changes into a default value of zero for example or null, so that it would trigger the validation error of the dropdownlist.

Best regards,
Sameh

Grid

answered on 28 Jan 2013

1 answer

454 views

Loading data on grid row select

Hi

I have a grid with a detail template that includes a tabstrip with a grid. This works fine but when I select a row on the grid in the detail template I want it to load data based on that row in the grid in the second tab.

This is the code for the details template

@(Html.Kendo().TabStrip()

.Name("TabStrip_#=ReqId#")

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Exposure Scenarios").Content(@<text>

@(Html.Kendo().Grid<Sypol.Matcon.Infrastructure.Models.ExpScen>()

.Name("Orders_#=ReqId#")

.Columns(columns =>

{

columns.Bound(o => o.ExpId).Width(101);

columns.Bound(o => o.Quantity).Width(140);

columns.Bound(o => o.Freq).Width(200);

columns.Bound(o => o.Number);

columns.Bound(o => o.ContCode);

columns.Bound(o => o.SubCont);

//columns.ForeignKey(o => o.EXPID, (IEnumerable)ViewData["activities"], "EXPID", "METHOD");

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("HierarchyBinding_Orders", "InTray", new { reqID = "#=ReqId#" }))

)

.AutoBind(true)

.ToClientTemplate())

</text>

);

items.Add().Text("Details").Content(

"<div class='employee-details'>" +

"<ul>" +

"<li><label>Code:</label>#= ExpId#</li>" +

"</ul>" +

"</div>"

);

})

.ToClientTemplate())

</script>

I basically want to fill the 'Details' tab with data from the selected row on the grid. At the moment I can only manage to add data from the Parent grid. Is it possible to do this or would I have to create another details template to get this information?

Thanks

TabStrip

answered on 28 Jan 2013

6 answers

282 views

Horizontal menus not working after update

Today I updated to 2012.3.1315 and the menu's work differently. I have a horizontal menu and the menus drop down fine, but sub-menus rather than flying out to the right (or left if collision is detected) just pop-over the existing menu. Here is a screen cast of it:

http://screencast.com/t/ItUsyEGtB

Not good. Is there a new option I need to set. While I am using KendoUI MVC complete I am not using the wrappers for the menu... I just use the client side API.

BOb

Menu

answered on 28 Jan 2013