How can I customize the styles, and templates for the popup window when I am adding/editing a new record into the grid.
Let me elaborate more, based on the online sample here: http://ko.infragistics.com/products/jquery/sample/grid/row-edit-template
Instead of only changing the appearance of the td and tr tags like this:
<style type="text/css"> .tableBackGround { background-color: #FF7283; } .labelBackGround { background-color: #FFE96D; } </style> <script id="rowEditDialogRowTemplate1" type="text/x-jquery-tmpl"> <tr class="tableBackGround"> <td class="labelBackGround"> ${headerText} </td> <td data-key='${dataKey}'> <input /> </td> </tr> </script>Is it possible to change the template completely? Like say if I want to write my own template from scratch yet maintaining all other functionality.
Hello ,
You can find class associated with the element as well as associated CSS classes, using Internet Explorer Developer Toolbar or Firebug for rowedittemplate. Refer to our API document from the link below:
https://www.igniteui.com/help/api/2019.1/ui.iggridupdating
On the above link, click on the “THEMING” tab. You will find classes like .ui-dialog-title, ui-dialog-titlebar.
I hope this helps.
Hi,
Yes, it's possible to completely change the look of the popup editor template. You can do that with your own popup by using the RET events.
Step 1 - attach to the rowEditDialogOpening event and cancel it.
rowEditDialogOpening: function(event, ui) {
var tr = ui.dialogElement.data().tr; //a reference to the TR element of the table being edited
var pk_id = tr.data().id; // a reference to the PK id
var recordObj = ui.owner.grid.findRecordByKey(pk_id);
// pass the recordObj to your custom dialog and render it
return false;},
This will stop the default template from opening and on this place you can open your own popup. You will also obtain the PK id of the record being edited and after that you will have an object with all values for that record (headers and values)
Step 2 - render your custom popup and edit the fields
Step 3 - press close your custom object and update the grid using the API function. Here is an example:
$('#grid').igGridUpdating('updateRow', 1, { 'Name': 'Alex' }); // 1 is your PK_ID and the next object is a name/value collection
I hope this helps you.
Regards
Lyubo
Would it be too much to ask for a sample mvc application with a grid containing 3-4 properties that illustrates what you just explained?
It'll make grasping the whole concept a lot easier :)
hi again :),
Since this is pure UI functionality, there is no need for MVC sample. I've made a HTML sample and I'm attaching it.
I've made it according my guidelines and I've put a lot of comments.
I hope that helps you.
regards
Thanks!
You're welcome :)
Hi SIG,
After the fix, I still had issues with the custom popup, so I decided to use Kendo UI Web's Grid instead. It's much more manageable.
SP
sirplaya
I am trying to do a similar thing with a custom dialog. Can you post what you did as a sample?
Thank you for the clarification :)
Hi Lyubo,
Actually, I was just thanking you on the example you provided. I really didn't have a question other than I would have liked to see a few more fields in the example other than one input textbox. I created a custom row edit template based on your example and it came out great! So, now, I have a new method on custom templating thanks to you :)
hi again :)
"To expand on this, how does one handle controls other than input boxes?" - I'm not sure that I'm understanding correctly your question.
Could you be more specific? Since the implementation is fully customized, it's up to the developer how to handle non input boxes controls.
At the end, all you need to have is a javascript object with all values and call the igGrid updating feature with it.