Editor in grid custom edit popup

[chris]

is it possible to use the editor functionality to allow edit of a field in a custom grid popup,  the popup is displaying extra fields in my record.  It was possible in MVC telerik ext. 

regards

chris

[Vladimir Iliev]

Hi Chris,



To enable KendoUI Editor functionality in the Grid Poupup editing mode you should use the Grid editor template. For your convenience I have created example (please find attached) how to implement this functionality in your project .

 
Kind Regards,
Vladimir Iliev
the Telerik team

[chris]

Thank you for the example.  I have run into another issue whilst using the edit template.  When i added error formatting to a numeric field the error message appears under the input field below:


code as follows:

 <div class="k-edit-label">
                            <label for="ProductItem_PrdPrice" class="required">Price</label>
                        </div>
        
                        <input name="Price" type="number" data-bind="value:ProductItem_PrdPrice"    required data-max-msg="Enter value between 1 and 10000.00" /><span class="k-invalid-msg" data-for="ProductItem_PrdPrice"></span>  
                        <div class="k-edit-label">
                                <label for="ProductItem_Position"  >Position</label>
                        </div>    
                               <input name="Position" type="number"   data-bind="value:ProductItem_Position" data-role="numerictextbox"  /> 

--------
   $(e.container).find("input[name='Price']").kendoNumericTextBox({ format: 'c2' , min: 0, max: 10000.00,});


Also how to i format to show a £ (pound) sign

Any Ideas, bug or code issue?  probably the later :-)

regards

chris

[Vladimir Iliev]

Hi Chris,


You can show the tooltip by increasing the CSS property Z-order of the error message. Please look at the example below:

<style type="text/css">
    .k-invalid-msg {
        z-index: 11000 !important;
    }
</style>

Also about changing the currency sign of the NumericTextBox you can read the Kendo Globalization Overview article and check the Globalization demo.

Kind Regards,
Vladimir Iliev
the Telerik team

[chris]

Hi Vladimir

Thanks for the reply, i added that style as an inline style and it fixed the issue.

   <input name="Price" type="number" data-bind="value:ProductItem_PrdPrice"  style="z-index:100100 !important"  required data-max-msg="Enter value between 1 and 10000.00" /><span class="k-invalid-msg" data-for="ProductItem_PrdPrice"></span> 

The only issue is that the icon is being cut short at the bottom, but otherwise it fixes the issue.  Will this be changed in the final code as an update, or will it need to be overidden in the code?



kind regards

chris

[Vladimir Iliev]

Hi Chris, 


I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Please provide the following details – hopefully they will help us pinpoint the exact reason for this behavior:

• What is the exact browser’s version that you are using? 
• What styles you have applied to the error message? 
• Could you provide us with run-able project where the issue is reproduced? 

Also please note that applying these styles to the error message is required in this case because you are using custom template for the Pop-up window. 

Kind regards,
Vladimir Iliev
the Telerik team