To center the grid model-field

[Jong Woo]

############### remote-data.jsp ###########################

<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:url value="/web/grid/remote-data/read" var="transportReadUrl" />

<kendo:grid name="grid" pageable="true" height="430px" sortable="true" filterable="true" groupable="true">
<kendo:grid-scrollable/>
<kendo:grid-columns>
<kendo:grid-column title="Order ID" field="orderId" width="100px" filterable="false" />
<kendo:grid-column title="Freight" field="freight" width="100px" />
<kendo:grid-column title="Order Date" field="orderDate" format="{0:MM/dd/yyyy}" width="140px"/>
<kendo:grid-column title="Ship Name" field="shipName" />
<kendo:grid-column title="Ship City" field="shipCity" width="150px" />
</kendo:grid-columns>
<kendo:dataSource pageSize="20" serverPaging="true" serverSorting="true" serverFiltering="true" serverGrouping="true">
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="${transportReadUrl}" type="POST" contentType="application/json"/>
<kendo:dataSource-transport-parameterMap>
function(options){return JSON.stringify(options);}
</kendo:dataSource-transport-parameterMap>
</kendo:dataSource-transport>
<kendo:dataSource-schema data="data" total="total" groups="data">
<kendo:dataSource-schema-model>
<kendo:dataSource-schema-model-fields>
<kendo:dataSource-schema-model-field name="orderId" type="number" />
<kendo:dataSource-schema-model-field name="freight" type="number" />
<kendo:dataSource-schema-model-field name="orderDate" type="date" />
<kendo:dataSource-schema-model-field name="shipName" type="string" />
<kendo:dataSource-schema-model-field name="shipCity" type="string" />
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:grid>

<kendo:dataSource-schema-model-field Name="freight" type="number" /> on this part of the text, but how do you centered? In other words, freight field only "text-align: center;" I want to give the effect.

[Dimo]

Hi Jong Woo,

You have two options:

1. Use HTML attributes to apply styles to the Freight column:

http://docs.kendoui.com/api/wrappers/jsp/grid/column#configuration attributes-attributes

or

2. Use a column template with arbitrary HTML markup and styling:

http://docs.kendoui.com/api/wrappers/jsp/grid/column#template

Of course, the first option is a lot simpler and thus recommended.

Regards,
Dimo
Telerik

[Jong Woo]

Thank you Dimo^^

A few more questions. Look to run the attached file will be easy to understand.

1. "Order ID" and the title instead of a check box, select the check box and select the entire release the details and I want to be released.

2. "Select Send" button is clicked test_data.jsp Order ID value of the selected parameter I want.

3. "Alert Ship Address" Click on the image data at the time of shipAddress wdkang, wdkang1 want the alert to.(javascript:alert('wdkang');)

4. "Order ID" and "Alert Ship Address" in the title I want to remove the sort and search functions.

But the process is really important to me deulyira ask the hard part, but modify the contents of an attachment, jundamyeon really appreciate it.

Please ask. I'll love KendoUI forever

[Dimo]

Hello Jong Woo,

It is extremely difficult to understand what you are saying. This may cause delays and message roundtrips.

Also, in cases when the new question(s) is not related to the original thread topic, it is better to open a new thread.

1) In order to include a checkbox in a header cell, you can use a column headerTemplate. The chckbox behavior depends on your preferences - you can attach a change handler and toggle the state of all other checboxes using standard DOM operations.

http://docs.kendoui.com/api/web/grid#configuration-columns.headerTemplate
http://docs.kendoui.com/api/wrappers/jsp/grid/column#headerTemplate

2) In case you want to retrieve the Order ID of the checked Grid rows, do the following

a) use standard DOM operations to retirieve all checkboxes
b) from each checkbox retrieve its parent row
c) use the Grid's dataItem method to retrieve the row model

http://docs.kendoui.com/api/web/grid#methods-dataItem

d) use the row model's get method to retrieve the OrderID value

http://docs.kendoui.com/api/framework/model#methods-get

3) I don't understand this question, please try to explain again

4) Sorting and filtering can be disabled per column

http://docs.kendoui.com/api/web/grid#configuration-columns.sortable
http://docs.kendoui.com/api/web/grid#configuration-columns.filterable

http://docs.kendoui.com/api/wrappers/jsp/grid/column#sortable
http://docs.kendoui.com/api/wrappers/jsp/grid/column#filterable


Regards,
Dimo
Telerik

[Jong Woo]

Hi Dimo

I do not speak English, so a translator to use. Conversation difficulties. I hope to understand.

Questions and next time I'll make a thread.

The third question, I'll detail.

############################################################################
If you look at the attached example (test_data.jsp)

The first line of the "Alert Ship Address" value is wdkang.

The second line of the "Alert Ship Address" value is wdkang1.

The first line of the "Alert Ship Address" warning if you click on the image "wdkang" that comes out. . javascript: alert ('wdkang'); such as

The second line of the "Alert Ship Address" warning if you click on the image "wdkang1" that comes out. . javascript: alert ('wdkang1'); such as
############################################################################

Some of the modifications you had to listen to advice.

However, it is difficult to implement in my skills. Please ask for the rest of the coding.

[Dimo]

Hi Jong Woo,

If you want to alert the shipAddress when the user clicks on the image inside the column template, you have several options:

1. In the image click handler, retrieve the Grid row, then the row model, then the shipAddress value. The algorithm is the same as in point (2) of my previous reply.

or

2. Add an inline onclick="..." handler to the image in the column template, with the shipAddress value directly included in the handler body.

http://docs.kendoui.com/getting-started/framework/templates/overview#template-syntax

or

3. Set the shipAddress as a title attribute of the image in the column template. Then you can use a Kendo UI Tooltip to display the ship address when the image is clicked.

http://demos.kendoui.com/web/tooltip/index.html
http://docs.kendoui.com/api/web/tooltip#configuration-filter
http://docs.kendoui.com/api/web/tooltip#configuration-showOn


Regards,
Dimo
Telerik

[Jong Woo]

Hi Dimo

I want is the way to No. 2.

Or a process, it is difficult to describe. In conclusion, with the help of coding is required. In other words, I hope writing the code in the attachment. Other things, the code will not ask you for this. Please ask. 

Be required to clean up.

1. If you click the checkbox in the title, Whole checkbox is full choice. If the opposite, that is, deselect all. (A checkbox is "Order ID" must have a value.)

2. If you click the  "Selected Send" button, The value of the selected check box is delivered to test_data.jsp. In test_data.jsp, "Order ID" should be a System.out.println.
(test_data.jsp the received "Order ID" is used as a data deletion. The grid should be updated after deletion.)

3. If you click the image, "Alert Ship Address" value to be alert. ( javascript: alert ('wdkang'); such as
)

Will not ask for the impossible in the future. Please only ask this. please..

[Dimo]

Hello Jong Woo,

I believe I already provided the required Kendo UI - related information to achieve the desired behavior. Judging by the latest attachment, you have not tried to implement any of my suggestions. Is there anything unclear about my instructions or the documentation? Please note that our standard support service does not include producing full custom examples or explaining concepts which require general knowledge. You can refer to our premium support services for such an assistance.

http://www.telerik.com/services/overview.aspx

If you create a demo of what you are trying to achieve with a plain <table> with checkboxes, but you have difficulties to integrate this functionality inside the Kendo UI Grid, then I will help you.

Regards,
Dimo
Telerik

[Jong Woo]

Hi Dimo

I'm sorry to ask for the impossible.

Unfortunately, the current method is to give up trying. (Difficult for me.)

"Initialization from table" HTML implementation of plans.

Thanks for the consideration.