Hi,
I'm migrating an very old kendo's version to the latest and i want to check all my code for make it pretty.
In grid, we need to have some editable fields and other readonly fields. But readonly's fields are computed with the editable.
For example, i have a product's grid with quantity, unit price and total. Unit price and Total, must be readonly, but the user can change quantity. Total is automatically calculated by unit price multiple quantity.
Actually, in our code, iclose cell when enter on edit mode if it's Unit price and quantity. But i seeing in the manual, i can use de Model editable flag. But when i use it, i can't change Total value using "set" method.
https://fiddle.jshell.net/muadhib/c1qLvax2/2/
Any body know how to do that in the prettiest way ?
Thx
12 Answers, 1 is accepted
Rank 2
If you mark a field as editable: false, .set() will not work as it only works if editable: true.
Doing Model.Field = X directly *does* work to update the model value but this does not trigger the Grid to update the cell contents because .set() was not used.
So, what I do is bind the Grid's save event and in the handler set the value of the model directly THEN update the text of the Grid cell manually.
https://fiddle.jshell.net/e3dkh253/1/
Rank 2
Using .set("Total") will not work as Total is editable: false. This prevents edits from working.
You can set model.Total directly but this will not trigger the grid's cell contents to update as .set() was not used.
So, what I do is bind to the Grid's save event, update the model.Field directly THEN find the related cell and update the text manually.
Look at https://fiddle.jshell.net/e3dkh253/1/. I took your sample and added the save handler.
Rank 2
Rank 1
Hi,
Thx Stephen for your reply.
I think it's not the prettiest way to do that, i prefer automatically close cell in onEdit event when it's needed and set editable to true for all fields.
Because, in your case, it's works, but without field format. What happen with a date or using globalization ? It's not a native action, we need to call specific template, or i'm wrong ?
Is there no way to do that in simple way ? There are only workaround ?
Thx.
Rank 2
There are pros and cons to any of these "unintended use" scenarios and workarounds.
i.e. Closing the cell on the "edit" event interferes/interrupts keyboard navigation. I do that as well but usually only for cells that are conditionally editable(sometimes editable, sometimes not).
To format the field, you can use kendo.toString() when you set the text. I simply didn't format in the example because your original had no formatting.
Rank 1
Hi Stephen,
You're right.
I'm just surprised because my need seems not particular. I don't understand why it's so complicated to implement that. All solutions i've found are workarounds.
Perhaps i missed a simple solution.
Thx
The recommended approach to prevent editing of a field is to disable editing in the model configuration. A possible alternative is to use a custom column editor that only displays the data field value instead of a form element.
Documentation for the Kendo UI Grid columns editor is available at:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
For your convenience, please find the updated example:
http://dojo.telerik.com/aqene/2
Kind Regards,
Alex
Telerik
Rank 2
Alex,
That works great for cells that are always not-editable(while still allowing .set() to be used) and I will definitely start using it.
Now, I don't want to derail the thread, but...
I often have the situation where a cell is conditionally editable (depending on other model properties or rules) so I have to use the technique of hiding the editor in the edit event(which has its own set of issues).
Can you see a way to enhance your solution so that the readOnly() method does what it currently does if the cell is not-editable BUT otherwise shows the default, built-in editor for the cell(so I don't have to always implement a custom editor for data that the grid already handles otherwise)?
What I would really like is a "beforeEdit" event that you can e.preventDefault() in so that the grid won't show the editor but everything else(i.e. keyboard navigation) still works.
Rank 1
Hello,
The best solution is to distort the editor's column option for transform edit template to an non editable template. It's a solution, but i think it's not the beautifulest way. (I know I'm very annoying :D).
It will be very useful to add a editable option or a conditional editable option directly in the grid (as Stephen's proposition). Is there in the product backlog ?
Regards
Rank 2
This User Voice item http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/2602548-more-grid-events includes a request for a beforeEdit event(among others).
Go vote for it!
Rank 1
Hi,
Ok, it seam I have another problem with Alex's Solution...
In my grid, I have the selectable option to "Multiple, Row" and the readonly editor for my readonly fields. The behavior work but I have found a dysfunction with the focused cell.
1 - Click on a cell : it's passing to focused state
2 - Click to an other cell : the previous cell lose focused state but the target cell don't get the focused state (anyway cell have focused and immediately lose focus).
You can test it here : http://dojo.telerik.com/@muadhib/UcIBI
What do you think about it ?
Regards
Hello Christian,
Thank you for the comments regarding the lost focus.
I have another suggestion for a different approach that uses the Kendo UI Grid edit event instead.
Below are the steps to achieve the desired read-only cells functionally in a navigatable Kendo UI Grid with cell editing mode:
1.) Attach a handler to the edit event in the Kendo UI Grid configuration
2.) Get the grid's instance
3.) Get the the current cell
4.) Check if it is a custom read-only field
5.) Close the read-only cells with closeCell() method if needed:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-closeCell
6.) Set the current cell to the instance obtained in point 3. using the current method:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-current
7.) Since the Grid is navigatable the focus should be set to it's table element in the end.
Please see the suggested approach in action at:
http://dojo.telerik.com/AsOYa
Kind
Alex
Telerik