To center the grid model-field

9 posts, 0 answers
  1. Jong Woo
    Jong Woo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 07 Jan 2014 Link to this post

    ############### 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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Jong Woo
    Jong Woo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jong Woo
    Jong Woo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 13 Jan 2014 Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jong Woo
    Jong Woo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 15 Jan 2014 Link to this post

    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..
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 16 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Jong Woo
    Jong Woo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 16 Jan 2014 Link to this post

    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.
Back to Top
UI for ASP.NET AJAX banner