如何使用Kendo UI在弹出编辑器中打开JSP页面 [英] how to open a JSP page in popup editor using kendo UI

问题描述

我正在将 Kendo-UI与JSP包装器(<kendo:grid>)结合使用.我有两个JSP页面Employee.jsp& EmployeeDetails.jsp.employeeDetails.jsp的示例代码在使用JSP包装器的Kendo Grid上给出. EmployeeDetails有一个带有editable_mode = popup.的网格，它工作正常.但是由于在Employee.jsp中，我们有很多数据，因此弹出窗口非常大且难以维护.

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.

我想要的输出是弹出窗口，应该出现在具有自定义样式表的两行中，而不是默认的一行和Keno样式表中.

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.

在此小提琴中可以实现类似的功能，但他使用的是 html/js ，而不是jsp wrapper.另一个问题是，他在我不希望的同一html页面中编写了弹出窗口的整个html代码.

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.

，我找到了一个进入点，可以使用 kendo:grid-editable .示例代码可能是

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>

但仍然存在另一个问题，我们需要在两者之间提供所有html代码.

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

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

任何人都可以帮助我.

推荐答案

我暂时做了同样的事情，当然对我也有用.

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>
.....................................................
..................................................... 

您需要牢记两点

1. <kendo:grid-editable-template> </kendo:grid-editable-template>之间的代码被视为单个字符串，因此将自定义弹出式代码中的所有" 替换为''.例如，使用<input type='text'...>而不是<input type="text"....>.
2. 要绑定网格数据和弹出数据的值，两个地方的name属性应该相同.

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.

这篇关于如何使用Kendo UI在弹出编辑器中打开JSP页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！