This is a migrated thread and some comments may be shown as answers.

[Solved] about kendoui style problem

6 Answers 203 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 01 Apr 2012, 06:06 PM

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>

answered on 02 Apr 2012, 09:17 AM

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!

answered on 13 Feb 2015, 09:26 PM

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!

answered on 15 Mar 2015, 06:32 AM

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

answered on 19 Mar 2015, 06:03 AM

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!