Use a grid in Dialog mode with template ( From svelte component )
In short, the structure of the component would be:
+page.svelte --> Grid component
GridDetails.svelte --> Grid custom template
Tab1.svelte --> Tab1 detail
Tab2.svelte --> Tab2 detail
Hi Manuel,
Thanks for your valuable patience.
We are facing the problem with rendering the Svelte component in the Grid’s DialogTemplate feature when using a component reference defined in the editSettings.template property instead of the built-in option like ID of a script element or string template. We are treating this issue as a high priority, and further details will be communicated soon.
However, as per your last update, we have rendered the Tab component as a dialog template using the SvelteKit application with a standard JavaScript template.
Please review the code example below and the attached sample for more information
|
+page.svelte grid = new Grid({ columns: columns, dataSource: data, allowPaging: true, pageSettings: { pageSize: 5 }, toolbar: ['Add', 'Edit', 'Delete'], editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: '#dialogtemplate' }, actionComplete: (args) => { if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { var tabObj = new ej.navigations.Tab({ showCloseButton: false, selecting: (e) => {if(e.isSwiped) {e.cancel = true;} if(e.selectingIndex === 1) {e.cancel = !validate(1)}}, items: [ { header: { 'text': 'Details' }, content: '#tab1' }, { header: { 'text': 'Verify' }, content: '#tab2' }, ] }); tabObj.appendTo('#edittab');
new ej.dropdowns.DropDownList({value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always', dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry'));
new ej.buttons.CheckBox({ label: 'Verified', checked: args.rowData.Verified }, args.form.elements.namedItem('Verified')); // Set initail Focus if (args.requestType === 'beginEdit') { (args.form.elements.namedItem('CustomerName')).focus(); }
document.getElementById('next').onclick = () => { moveNext(); }
function validate(tab) { let valid = true; [].slice.call(document.getElementById('tab' + tab).querySelectorAll('[name]')).forEach(element => { element.form.ej2_instances[0].validate(element.name); if (element.getAttribute('aria-invalid') === 'true'){ valid = false; } }); if (!valid) { return false; } return true; } function moveNext() { if (validate(1)) { tabObj.select(1); } }
document.getElementById('submit').onclick = () => { if (validate(2)) { grid.endEdit(); } } } } }); grid.appendTo("#grid");
<main> <h1>Svelte Application!</h1> <div id="grid"></div> <script id="dialogtemplate" type="text/x-template"> <div> <div id="edittab"></div> <div id="tab1"> <div class="form-row" > <div class="form-group col-md-6"> <div class="e-float-input e-control-wrapper"> <input id="OrderID" name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${/if} ${if(isAdd)} '' ${else} disabled ${/if} /> <span class="e-float-line"></span> <label class="e-float-text e-label-top" for="OrderID">Order ID</label> </div> </div> </div> <div class="form-row" > <div class="form-group col-md-6"> <div class="e-float-input e-control-wrapper"> <input id="CustomerName" name="CustomerName" type="text" value=${if(isAdd)} '' ${else} ${CustomerName} ${/if} /> <span class="e-float-line"></span> <label class="e-float-text e-label-top" for="CustomerName">Customer ID</label> </div> </div> </div> <button id='next' class='e-info e-btn' style="float: right" type='button'> next</button> </div>
<div id="tab2" style='display: none'> <div class="form-row" > <div class="form-group col-md-6"> <input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${/if} /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <input type="checkbox" name="Verified" id="Verified" ${if(isAdd)} '' ${else} checked ${/if} /> </div> </div> <button id='submit' class='e-info e-btn' style="float: right" type='button'> submit</button> </div> </div> </script> </main> |
Screenshot:
Regards
Aishwarya
Attachment: SveltekitApplication_de9c1cf4.zip
Dear Aishwarya Rameshbabu,
This solution you provide is not what I need.
I'd rather wait for the solution to integrate a slim component like the dialog template.
I only need to change the following block of code for sveltekit component , Like this :
