Questions on UI for ASP.NET MVC Forum

3 answers

189 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

169 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

297 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

422 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

179 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

316 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

420 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

answered on 16 May 2013

2 answers

846 views

Adding a new row at the bottom of grid

How to add a new row at the bottom of the grid instead of the first row?

Grid

answered on 15 May 2013

1 answer

739 views

[Solved] ClientDetailTemplate: 'Invalid template' when using kendo.toString() in ClientTemplate Column

Dear KendoUI Team!
I hope you can help me. I got the following problem:
when using kendo.toString to format a number.

The following line inside the ClientDetailTemplate for a grid Column leads to an 'invalid template' error:
(BAD:)
columns.Bound(o => o.Price).Title(Strings.di_Price).ClientTemplate("#= kendo.toString(Price, \"n2\") #");
or
columns.Bound(o => o.Price).Title(Strings.di_Price).ClientTemplate("#= kendo.toString(Price, 'n2') #");

while this is OK:
(GOOD:)
columns.Bound(o => o.Price).Title(Strings.di_Price).ClientTemplate("#= kendo.toString(Price) #");

Here is the line in the model

[DataType("Number")]
public decimal Price { get; set; }

But I want to format the column. In the main grid, I can use .toString() like described. But in the ClientDetailTemplate it fails.
What can I do to format the output in ClientDetailTemplate?

brgds
Malcolm Howlett

Grid

answered on 15 May 2013

1 answer

69 views

Firebug causes grid cell elements to disappear when editing

Run the examples app in FF, pull up any grid example. Start firebug. Click edit button - POOF - grd elements disappear.
error shows up in firebug - TypeError: ot.jQuery(...).handler is not a function - kendo.web.min.js (line 9)

Any advice - I would like to use firebug to debug my apps!

Grid

answered on 15 May 2013