Here's the scenario, I have a grid (i'm using MVC wrapper to create it, but the problem is on the client so this forum should be ok...), the grid is setup for editing in popup mode. On the databound event, I have some script that alters the buttons to use my own icons rather than the default and it removes any text in the buttons as well.
This is made necessary since there is no way to customize the button's html.
Here's the script that runs on the databound event:
The above script works great, it displays exactly like i want it to. The details button is a custom button, while the edit and delete are the default output of the MVC wrapper for those commands. The problem starts when I complete an edit, rather when i click the "Update" or "Cancel" button on the popup. For some reason, the buttons switch back to thier original state with the original icons and text.
I've tried binding to the click events of the update and cancel, but the change is occuring after that event. I've tried binding to the DOMNodeInserted/DOMNodeRemoved events but I cannot seem to get those events to bind or fire consistently across all browsers or all situations.
Any ideas on how to prevent the buttons from changing back to thier original state? Any help would be appreciated.
This is made necessary since there is no way to customize the button's html.
Here's the script that runs on the databound event:
function updateGridButtons() { $(".k-grid-Details") .each(function () { styleGridButton(this, "View Details", "e-icon-viewDetails"); }); $(".k-grid-edit") .each(function () { styleGridButton(this, "Edit", "e-icon-customEdit"); }); $(".k-grid-delete") .each(function () { styleGridButton(this, "Delete", "e-icon-customDelete"); });}function styleGridButton(button, title, icon) { $(button) .removeClass("k-button-icontext") .addClass("k-button-icon") .attr("title", title) .html("<span class=\"k-icon " + icon + "\"></span>");}I've tried binding to the click events of the update and cancel, but the change is occuring after that event. I've tried binding to the DOMNodeInserted/DOMNodeRemoved events but I cannot seem to get those events to bind or fire consistently across all browsers or all situations.
Any ideas on how to prevent the buttons from changing back to thier original state? Any help would be appreciated.
2 Answers, 1 is accepted
0
Accepted
Hello Michael,
The Grid will re-create the whole TR for that item (there might be changes that you made to the item and they should be visible) and thus the buttons are re-created.
What I can suggest you is , instead of using the built-in edit button to create a template column, style it as you want and attach a click handler (or better use delegate event , add custom class and use it as delegate filter) which uses the editRow method of the Grid.
This way once you close the popup editor the column will be re-created using the template.
Kind Regards,
Petur Subev
the Telerik team
The Grid will re-create the whole TR for that item (there might be changes that you made to the item and they should be visible) and thus the buttons are re-created.
What I can suggest you is , instead of using the built-in edit button to create a template column, style it as you want and attach a click handler (or better use delegate event , add custom class and use it as delegate filter) which uses the editRow method of the Grid.
This way once you close the popup editor the column will be re-created using the template.
Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
Rank 1
answered on 25 Apr 2013, 04:36 PM
Petur,
Thank you for your answer. Fortunately for me however, it turned out to be a little easier than you suggested. Based on your answer, I did create a template column with my customized buttons, but I only had to wire up a delegate for my custom "details" button. I discovered that simply applying the k-grid-edit and k-grid-delete classes to my customized "edit" and "delete" buttons will wire up the click events for edit and delete automatically.
Mike
Thank you for your answer. Fortunately for me however, it turned out to be a little easier than you suggested. Based on your answer, I did create a template column with my customized buttons, but I only had to wire up a delegate for my custom "details" button. I discovered that simply applying the k-grid-edit and k-grid-delete classes to my customized "edit" and "delete" buttons will wire up the click events for edit and delete automatically.
Mike