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 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
Lyubo
Thanks!
You're welcome :)
This is exactly what I needed. Thanks for the example Lyubomir. To expand on this, how does one handle controls other than input boxes? For instance, I figured that I would create a partial .cshtml file with the template and populate the drop down lists that I will have in the template and the value would be assigned when the template opens. Being that the default template handles this by use of the datasource on the column setting. Apparently, this will not be the case with a custom template. I'll see how far I can get with this and perhaps set up an example for users that are curious as to how to accomplish this.
Thanks again!
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.
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 :)