about kendoui style problem

7 posts, 0 answers
  1. Seaman
    Seaman avatar
    22 posts
    Member since:
    Nov 2011

    Posted 07 Mar 2012 Link to this post

    hi all
    im try use kendoui ,im feel kendoui and other html components(for example text,textarea )different,how to cancel kendui style,To make it look and ordinary?pls help me ,thanks.
  2. Carlos
    Carlos avatar
    2 posts
    Member since:
    Mar 2012

    Posted 01 Apr 2012 Link to this post

    I tried to test the kendui but the styles did not work, annex the example, please help 

    Index.cshtml:
    @{
        ViewBag.Title = "ZunHub -  Servicios";
        Layout = null;    
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>ASP.NET Web API</title>
             <script src="../../Content/js/jquery.min.js" type="text/javascript"></script>    
        <script src="../../Content/js/kendo.web.min.js"></script>
        <script src="/Content/styles/kendo.common.min.css"></script>
        <script src="/Content/styles/kendo.default.min.css"></script>
    </head>
    <body>
      <table id="grid">
      <thead>
          <tr>
              <th data-field="title">Title</th>
              <th data-field="year">Year</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Star Wars: A New Hope</td>
              <td>1977</td>
          </tr>
          <tr>
              <td>Star Wars: The Empire Strikes Back</td>
              <td>1980</td>
          </tr>
      </tbody>
     </table>
         
         
         <script type="text/javascript">
             $(document).ready(function () {
                 $("#grid").kendoGrid({
                     groupable: true,
                     scrollable: true,
                     sortable: true,
                     pageable: true
                 });
             });
       
                      </script>
    </body>
    </html>

  3. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 02 Apr 2012 Link to this post

    Hello Carlos,

    You are trying to register stylesheets with <script> tags, which is incorrect.

    Generally, the Kendo widgets have not been designed to look "ordinary". Theoretically, you can remove some of the styles from the stylesheets, but this will turn out to be cumbersome. It will be a lot easier for you to style regular textboxes to look like Kendo ones with the k-textbox CSS class, as in this demo:

    http://demos.kendoui.com/web/validator/index.html

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. DST
    DST avatar
    2 posts
    Member since:
    Dec 2014

    Posted 13 Feb 2015 Link to this post

    View:
      @(Html.Kendo().TextBoxFor(model => model.CALLERPHONE)
              .HtmlAttributes(new { @class = "myCustomClass" })                           
          )
    HTML looks like this:
    <input name="CALLERPHONE" class="k-textbox myCustomClass" id="CALLERPHONE" data-val-required="The CALLERPHONE field is required." data-val-number="The field CALLERPHONE must be a number." data-val="true" value="0"/>

    1) it's overriding myCustomClass settings. I do not want to happen this!

    2) If I don't use myCustomClass, textbox is moving to right side when I enter large data more than it's original length.

    Please advise how to avoid k-textbox class. Thanks!
  5. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 17 Feb 2015 Link to this post

    Hello Das,

    If you don't want the k-textbox CSS class, then use a standard textbox editor instead of a Kendo UI textbox editor.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. DST
    DST avatar
    2 posts
    Member since:
    Dec 2014

    Posted 15 Mar 2015 Link to this post

    Hello Dimo,

    Thanks for your previous reply. Please check these and let me know your suggestions....

    1. Table is stretching enormously when I enter large data to location. Rest of the controls will be either pushed to right or left depends on the data size.
    ----------------------------------------------------
    <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <table class="tableInsp">
                <tbody>
                    <tr>
                        <td>@Html.Label("Location")</td>
                        <td>@Html.Kendo().TextBoxFor(model => model.LOCATION)</td>

    2. Not receiving DropDownList selected value in the controller....
       *.cshtml
                  <td>
                            @(Html.Kendo().DropDownList()  //initially it's empty
                                .Name("ASSET")
                                .HtmlAttributes(new { style = "width:175px;" })
                            )
                   </td>
        javascript           
            $('#ASSET').kendoDropDownList({
                dataTextField: "Text",
                dataValueField: "Value",
                autoBind: false
            });
            $("#ASSET").data("kendoDropDownList").setDataSource(result.AssetsList);
            $("#ASSET").data("kendoDropDownList").value(1); \\ select first item
            $("#ASSET").data("kendoDropDownList").refresh();
    Controller:
    [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "ASSET")]

    Looks like it's not binding the selected value/text to ASSET and it's showing null in the controller.

    Thanks,
    Das
  7. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 19 Mar 2015 Link to this post

    Hello Das,

    1. I am not sure how to reproduce this and whether it's related to Kendo UI. Here is my test page, please modify it until the issue is exhibited.

    http://jsfiddle.net/dj2mscxs/

    2. The DropDownList is initialized twice, which is incorrect. The first time it is initialized by the script, which is rendered by the server wrapper declaration. The second time it is initialized by your Javascript code. Please remove the Javascript initialization and move the DataTextField and DataValueField settings to the server configuration. Also, make sure that result.AssetsList is an array of objects that have the specified fields ("Text" and "Value").

    Finally, I would ask you to open new forum threads for questions, which are unrelated to the original discussion, thank you.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top