how to open a JSP page in popup editor using kendo

Question

I am using Kendo-UI with JSP-wrapper (<kendo:grid>) . I have two JSP pages Employee.jsp & EmployeeDetails.jsp.the sample code for employeeDetails.jsp is given on Kendo Grid using JSP wrapper EmployeeDetails has a grid with editable_mode =popup.which is working fine.But since in Employee.jsp we have a lots of data so the popup window is very large and hard to maintain.

the output what i wanted is the popup should comes in two row with custom style sheet instead of default one row and Keno Style-sheet.

the similar functionality is achieved in this fiddle but he is using html/js , not jsp wrapper.and other problem is that he is writing the entire html code of popup in the same html page which i don't want.

[EDIT:] I find an entry point to proceed further using kendo:grid-editable.the sample code may be

<kendo:grid>
    ..............
    ..............
    <kendo:grid-editable mode="popup">
        <kendo:grid-editable-template>
            "<h1>Deepak</h1>"
        </kendo:grid-editable-template>
    </kendo:grid-editable>
    </kendo:grid>

but another problem still remains that we need to provide all html code between

 <kendo:grid-editable-template>"....."</kendo:grid-editable-template>

can anyone help me.

Answer 1

I did the same for the time being and its working for me of course.

     .................
        .................
            <kendo:grid>
                ..............
                ..............
                <kendo:grid-editable mode="popup">
                    <kendo:grid-editable-template>
                        +"<label for='FirstName'>First Name*:</label></td><td><input type='text' class='k-textbox' name='firstName' id='FirstName' required='required' /></td>"
                                +"<td> <label for='LastName'>Last Name*:</label></td><td><input type='text' class='k-textbox' name='lastName' id='LastName' required='required' /></td></tr>"
                                +"<tr><td><label for='EmpId'>Emp ID*:</label></td><td><input type='text' class='k-textbox' name='empid' id='id' required='required' /></td>"
                                  + "........................."
                                  + "........................."

                    </kendo:grid-editable-template>
                </kendo:grid-editable>
                </kendo:grid>
.....................................................
..................................................... 

You need to keep two point in your mind

1. The code between <kendo:grid-editable-template> </kendo:grid-editable-template> is treated as a single String so replace all of your " " in custom popup code with ' ' .for example use <input type='text'...> instead of <input type="text"....>.
2. To bind the value of grid data and popup data the name attribute should be same in both places.