Questions on UI for ASP.NET MVC Forum

2 answers

250 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

560 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

192 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

172 views

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

306 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

5 answers

430 views

Grid Toolbar functioality outside grid

Hi
i am using telerik for one of my project where i use custom button placed ouside grid for saving the whole grid data. (c#.net)
Now i am working on MVC Razor i see in kendo with toolbar,
can we have the same tool bar functionality outside grid meaning ,
can i use one button (save) where i can take all grid datas and do the same process how toolbar does(iterate)
and save .

I know batch process does individual grid save , i need to send some 4 grid to controller and save

I have one requirement of this type

Please let me know whether above requirement possible or not

Senthil

Grid

answered on 16 May 2013

1 answer

183 views

Grid Cell DropDownList, Currency Textbox and DatePicker

Hello,

I am trying to implement the edit, delete and save functionality in the grid. I am facing couple of issues during the development.
I have to use the drop down list to display the multiple values in one of the column. I have read few posts in this forum and I checked with examples which has been downloaded from this site. Still, I could not make it work.
While editing, I have to display the datepicker in the date of birth column, how can I add the datepicker control inside the grid.
The same way I need to give more flexibility to the use to increase / decrease the number values. When I edit the record, always I get the textbox for all the columns.

I have attached my project. Please go through and let me know what I am missing to make it work successfully.

Thanks!

Grid

answered on 16 May 2013

1 answer

321 views

Grid with Dynamic Editing Modes

I have a grid with two columns: OrganizationId and OrganizationName.

The users are able to create/edit new Organizations. when an user clicks in the Create toolbar button both properties should be editable.
The thing is, when the grid is rendered it probably has some records, so if the user tries to edit one of those, he/she is going to be able to edit the OrganizationName, but the OrganizationId has be a label.
This last behavior doesn't apply if the user tries to edit a new record (a record added with the create button functionality in this render time).

At the end it should be like
if it's old record -> edit mode = label + textbox
if it's new record -> create/edit mode = textbbox + textbox

Right now I have my custom kendo wrapper that reads the object properties, dynamically builds the grid columns and returns a GridBuilder. It look like this:

01.public static CustomGridFor<TProperty> KendoGrid<TModel, TProperty>(

02. Expression<Func<TModel, IEnumerable<TProperty>>> expression,

03. string defaultProperty,

04. string createAction,

05. string readAction,

06. string updateAction,

07. string controller,

08. string errorHandler) where TProperty : class

09.{

10. var dataSource = expression.Compile().Invoke(htmlHelper.ViewData.Model);

11. var gridColumnSettings = GridBuilderExtensions.CreateGridColumnSettings<TProperty>() as List<GridColumnSettings>;

12. if (gridColumnSettings != null)

13. {

14. gridColumnSettings.Add(new GridCommandColumnSettings { Commands = { new GridEditActionCommand(), }, });

15. }

16.

17. var gridBuilder = new this.Grid(dataSource)

18. .Name("GridName")

19. .Columns(c => c.LoadSettings(gridColumnSettings))

20. .DataSource(source => source

21. .Ajax()

22. .PageSize(50)

23. .Model(model => model.Id(defaultProperty))

24. .Destroy(d => d.Action(destroyAction, controller))

25. .Read(r => r.Action(readAction, controller))

26. .Update(u => u.Action(updateAction, controller))

27. .Batch(true)

28. .Events(e => e.Error(errorHandler)))

29. .ToolBar(a => a.Create().Text("New"))

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

31.

32. return gridBuilder;

33.}

I made some research about the grid behavior and found the Grid / Editing custom editor, this example has a ClientTemplate and Editable as false, something like this is what I want for the OrganizationId edit mode in the in old records and for the new ones edition I can use the Inline Editing.

01....

02.columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);

03....

04..Model(model =>

05.{

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

07. model.Field(p => p.ProductID).Editable(false);

08.})

09....

Another question that I have, is there any way to set the DataSource Model property dynamically?

1....

2..DataSource(source => source.Ajax()

3. .Model(model =>

4. {

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

6. model.Field(p => p.ProductID).Editable(false);

7. })

8....

I mean, do something like the columns loading where we can build the columns list with its name, behavior, ... and then set it.

1..Columns(c => c.LoadSettings(new IEnumerable<GridColumnSettings>()))

thanks in advance,
-julio

Grid

answered on 16 May 2013

6 answers

426 views

GridColumnSettings issues.

Hi,

I’m working with a Kendo Grid using MVC4 with Razor’s syntax.

I need to be able to customize column’s order and displaying option in order to save user’s preference.

To achieve that, I tried to use a tab of GridColumnSettings and load it in the View using the LoadSettings method of the columns property.

I have a few issues with that:

- Even if the column order can be set dynamically with this method, I don’t understand how to use ClientTemplate or Template attribute of the GridColumnSettings object.

- By using this loading system I have two Gird's options who don’t work anymore: line and column are not selectable and the groupable option seems to not work too.

Thanks for your help.

Grid