Questions on UI for ASP.NET MVC Forum

1 answer

128 views

Grid datasource rebind on treeview onSelect

Hi,
Currently I have a treeview control and a grid control.
I added a onSelect javascript, when treeview is selected, the grid control will be re-bind.
but I don't know how to pass the parameter to Grid control.

function onSelect(e)
{
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.read()
}

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

public ActionResult GetGridData(string treeviewItem, [DataSourceRequest]DataSourceRequest request)
{
}
Can you advise how should I pass the parameter to Grid so the grid can call to controller to return data?

Grid

answered on 20 May 2013

2 answers

129 views

Kendo with SSL

I have a site that is http but the lock only shows on pages where I am not using kendo controls. This happens in IE9 and IE10, not sure about previous verisons of IE. Images attached showing my url is https and the lock is not showing. Any ideas?

General Discussions

answered on 20 May 2013

5 answers

563 views

Calculated Cells

Hi,

I have a simple grid with Quantity, Unit Price and Total columns and a few others. The grid is set as GridEditMode.InLine. When I click on the Edit button of a row I can change the Quantity value. Once changed, when I click on the Update button I'd like the Total column to reflect the changes: Total = Qty * UPrice.

Here's the grid:

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

.Name("FabricGrid")

.Columns(columns =>

{

columns.Bound(p => p.Fabric);

columns.Bound(p => p.Pattern);

columns.Bound(p => p.Description);

columns.Bound(p => p.UPrice);

columns.Bound(p => p.Qty).Width(150);

columns.Bound(p => p.Total);

columns.Command(command => command.Edit()).Width(110);

columns.Command(command => command.Destroy()).Width(110);

})

.Scrollable()

.Sortable()

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

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(p => p.ProductId))

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

.Update(update => update.Action("Product_Update", "ShoppingCart"))

.Destroy(destroy => destroy.Action("Product_Delete", "ShoppingCart"))

)

I tried to update the ModelState but the display doesn't change.

Thanks for your help.

Grid

answered on 20 May 2013

1 answer

307 views

Handle Edit/Delete in MVC Action

Hi there,

I am using the KendoUI grid control on two MVC views where the user needs the ability to edit the data on each grid. The proposed solution is to redirect to an "Edit" and "Delete" view if the user clicks on the "Edit" or "Delete" buttons.

I currently have this working for one of the grids, but the second grid only allows me to edit the data inline. The definition of the grids are identical (apart from the columns, model, and actions).

How can I disable the inline editing of the second grid so that it redirects to an MVC view instead?

This code works as expected and redirects to the "Edit" and "Delete" views.

<%:Html.Kendo().Grid(Model)

.Name("players")

.Columns(columns =>

{

columns.Bound(p => p.FullName);

columns.Bound(p => p.MobilePhone);

columns.Bound(p => p.EmailAddress);

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.PlayerId))

.Read(read => read.Action("Edit", "Player"))

.Update(update => update.Action("Edit", "Player"))

.Destroy(update => update.Action("Delete", "Player")))

%>

This code DOES NOT work as expected and performs an in-line edit

<%:Html.Kendo().Grid(Model)

    .Name("articles")

    .Columns(columns =>

    {

        columns.Bound(a => a.Date);

        columns.Bound(a => a.Title);

        columns.Command(command =>

        {

            command.Edit();

            command.Destroy();

        }).Width(200);

    })

    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(20)

        .Model(model => model.Id(a => a.ArticleId))

        .Read(read => read.Action("Edit", "Article"))

        .Update(update => update.Action("Edit", "Article"))

        .Destroy(destroy => destroy.Action("Delete", "Article")))

%>

Grid

answered on 19 May 2013

1 answer

118 views

Bind bulletchart to datatable

I'm relatively new to MVC and Kendo controls, so please bear with me.
I have a datatable with one row and five values (columns). How can I bind this datatable to the mmHg bulletchart in the dataviz chart demo?
My HomeController.cs looks like this. How would my complete index.schtml look like?

namespace RfPrMvcKendo.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

DataTable table = new DataTable();

table.Columns.AddRange(new DataColumn[] {

new DataColumn("Counter1", typeof(int)),

new DataColumn("Counter2", typeof(int)),

new DataColumn("Counter3", typeof(int)),

new DataColumn("Counter4", typeof(int)),

new DataColumn("Counter5", typeof(int)) });

table.Rows.Add(10, 25, 31, 45, 80);

return View(table);

}

Thanks for the help.

General Discussions

answered on 18 May 2013

2 answers

201 views

Editable Hierarchy Grid not working

I'm trying to build an editable hierarchy grid but as soon as I add the Editable method, I get a System.InvalidOperationException.

The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Apparantly it's failing somewhere within the Kendo.Mvc.UI.HTML.GridEditorForCellBuilder.AppendEditorFor method:

The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Source Error:

Line 53:

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

Line 55: @(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostViewModel>()

Line 56: .Name("grid_#=ID#")

Line 57: .Columns(columns =>

Source File: c:\Data\Source\Work\2\Wilco\Toolbox\Main\Toolbox.Web\Views\RebateAverageCosts\Index.cshtml Line: 55

Stack Trace:

[InvalidOperationException: The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.]

System.Web.Mvc.ViewDataDictionary`1.SetModel(Object value) +584415

System.Web.Mvc.ViewDataDictionary..ctor(ViewDataDictionary dictionary) +371

System.Web.Mvc.WebViewPage`1.SetViewData(ViewDataDictionary viewData) +48

System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) +98

System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) +115

System.Web.Mvc.Html.TemplateHelpers.ExecuteTemplate(HtmlHelper html, ViewDataDictionary viewData, String templateName, DataBoundControlMode mode, GetViewNamesDelegate getViewNames, GetDefaultActionsDelegate getDefaultActions) +579

System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData, ExecuteTemplateDelegate executeTemplate) +1002

System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData) +66

System.Web.Mvc.Html.TemplateHelpers.TemplateFor(HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData, TemplateHelperDelegate templateHelper) +117

System.Web.Mvc.Html.TemplateHelpers.TemplateFor(HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData) +104

System.Web.Mvc.Html.EditorExtensions.EditorFor(HtmlHelper`1 html, Expression`1 expression, Object additionalViewData) +62

Kendo.Mvc.UI.Html.GridEditorForCellBuilder`2.AppendEditorFor(HtmlHelper`1 htmlHelper, IHtmlNode container) +62

Kendo.Mvc.UI.Html.GridEditorForCellBuilder`2.AppendEditor(IHtmlNode container, HtmlHelper`1 htmlHelper) +52

.... snip .....

My parent grid looks like this:

@(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostItemViewModel>()

.Name("grid")

.DataSource(dataSource => dataSource // Configure the grid data source

.Ajax() // Specify that ajax binding is used

//.Batch(true) // Enable batch updates

.Model(model =>

{

model.Id(item => item.ID); // Specify the property which is the unique identifier of the model

model.Field(item => item.ID).Editable(false); // Make the property not editable

})

.Read(read => read.Action("RebateAverageCostItems_Read", "RebateAverageCosts")) // Set the action method which will return the data in JSON format

)

.Columns(columns =>

{

columns.Bound(c => c.ID).Width(10);

columns.Bound(c => c.ItemNo).Width(100);

columns.Bound(c => c.ProductDescription).Width(200);

columns.Bound(c => c.ProductGroup).Width(100);

columns.Bound(c => c.PackSize).Width(100);

columns.Bound(c => c.Supplier).Width(100);

columns.Bound(c => c.PriceUOM).Width(100);

})

//.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode

.Pageable() // Enable paging

.Sortable() // Enable sorting

.Filterable() // Endable filtering

.ClientDetailTemplateId("template")

.Events(events => events.DataBound("dataBound"))

)

Next my child grid looks like this:

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

@(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostViewModel>()

.Name("grid_#=ID#")

.Columns(columns =>

{

columns.Bound(c => c.ID).Width(10);

columns.Bound(c => c.BeginDate);

columns.Bound(c => c.EndDate);

columns.Bound(c => c.NetCostAfterRebate);

})

.DataSource(dataSource => dataSource

.Ajax() // Specify that ajax binding is used

.Batch(true) // Enable batch updates

.Model(model =>

{

model.Id(item => item.ID); // Specify the property which is the unique identifier of the model

model.Field(item => item.ID).Editable(false); // Make the property not editable

})

.Read(read => read.Action("RebateAverageCosts_Read", "RebateAverageCosts", new { rebateAverageCostItemId = "#=ID#" }))

)

// Note if I comment out this line, it works in read only mode....

.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode

.Pageable() // Enable paging

.Sortable() // Enable sorting

.ToClientTemplate()

)

</script>

I'm not sure where to begin to troubleshoot.

Grid

answered on 17 May 2013

3 answers

513 views

Add/Edit/Delete button

Hi,

I am using this command for add, edit and delete in Kendo Grid

columns.Command(command => { command.Edit(); command.Destroy();
.ToolBar(toolbar => toolbar.Create())

I knew I can change the button text by using
.Text("something")
.UpdateText("something")
.CancelText("something")

My question is how to remove the button text from them.

I have tried
.Text("")
.UpdateText("")
.CancelText("")

But it won't work.

Please help!

Grid

answered on 17 May 2013

3 answers

157 views

Batch Grid - Tabbing into grid from outside input does not kick first selected cell into edit mode

I have a batch grid that is part of a larger form. Kendo UI version is: 2013.1.319

What I would like to accomplish is when I hit tab in the last form field before the grid, have it select the first column in the first row of the grid and kick that cell into edit mode.

Currently, when I do this the grid selects the cell (It gets highlighted), but it does not transition the cell into edit mode. If I hit tab once more, then the next column is selected AND the cell is kicked into edit mode.

This issue is present in the Batch Editing Demo on the Kendo UI site here.

Steps to recreate:

Click "Cancel Changes" so that that button has the focus.
Hit tab. Here you'll see a dotted line surround the k-content area.
Hit tab again. The cell with Product Name of "Chai" will be selected, but it's editor template will not appear
If you hit tab once more, the next column is selected (Unit Price: $18.00). In this case you'll see the numeric textbox kick in and the cell is in edit mode.

I've done some digging myself on my side by logging the grid's Edit event, and I can verify that the event is not being fired when the first cell is highlighted, but it is being fired when that last tab occurs (when the second column becomes a text field).

Does there happen to be a simple way of resolving this issue that I'm overlooking?

Thanks.

Grid

answered on 17 May 2013

2 answers

139 views

Editor: How to enable Tabulator inside the editor textbox

Hello,

I use the Editor control in my MVC application. I need to support the Tabulator key inside the Editor textbox.
When I press the Tabulator key, the Editor control looses the focues. But I need the support of the Tabulator key inside the Editor textbox.

Is there any "hack" or workaround to perform this action in the Editor textbox?

Greets

Editor

answered on 17 May 2013

2 answers

274 views

Display Edit/Delete button based on record column

Hi,

If I want to display edit and delete button for the record which CanEdit column is true, can you suggest how to do that?

columns.Bound(p => p.CanEdit).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

Thanks
Dan

Grid

answered on 17 May 2013