Questions on UI for ASP.NET MVC Forum

1 answer

151 views

Getting generated query from Kendo UI Grid MVC

Hello,

Is there a way to get the generated query from the Kendo UI Grid? I would like to get this query that has anything the user selected such as sorting, grouping, filtering, ordering, etc.

What I'm trying to do is have a business layer do validation first to see if the query can be performed. Then if it passes with the search criteria let the query that was generated by the grid perform the search.

I'm using Entity framework so it would be nice if there is a way to get the query or linq generated without trying to scrape the DataSourceRequest object.

Thank you,

Daniel

Grid

answered on 21 May 2013

6 answers

834 views

Binding to Model, then cascade

Hi,

I have a scenario, where I have two drop-downs that I want to cascade. This is working to an extent, but when I want to expand the functionality to bind intially to a model list, then select a value on page load, I can't think of a way to make this happen.

These are the two drop-downs:

Html.Kendo().DropDownListFor(c => c.SelectedGroup)

.BindTo(Model.Groups)

.Value(Model.SelectedGroup.Value.ToString())

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

.Render();

And

@(Html.Kendo().DropDownListFor(t => t.AuthorisedByExtraID)
                        .DataTextField("Name")
                        .DataValueField("ExtraUserID")
                        .DataSource(source =>
                            source.Read(read => read.Action("SearchAutocompleteEmployees", "Search")
                                                        .Data("onAutoCompleteAdditional")
                                                        .Type(HttpVerbs.Post))
                                    .ServerFiltering(true))
                              .HtmlAttributes(new { style = "width: 250px" })
                              .Enable(false)
                              .AutoBind(true)
                              .BindTo(Model.GroupEmployees)
                              .Value(Model.AuthorisedByExtraID.HasValue ? Model.AuthorisedByExtraID.Value.ToString() : "0")
                      .CascadeFrom("SelectedGroup")
    )

How can I enable the second drop-down to bind to Model.AuthorisedByExtraID when it exists, then when group changes, 
to load the contents via ajax? 

Thanks,
Gabor

DropDownList

answered on 21 May 2013

1 answer

123 views

IE 8 Rendering

We have a standard Kendo UI for ASP.Net project that was upgraded to 2013.1.514. After the upgrade, the DropDownList objects now display a text "sel" under the down arrow when run under IE 8. Under Chrome, no problem. Using Visual Studio 2010.

Screenshot enclosed as well as sample project.

DropDownList

answered on 21 May 2013

1 answer

159 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

153 views

[Solved] 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

605 views

[Solved] 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

338 views

[Solved] 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

151 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

243 views

[Solved] 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

549 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