Questions on Kendo UI for jQuery Forum

8 answers

258 views

[Solved] Grid's sorting does not work if virtualization is on

Hi,

I found out that the grid is not sorted any more when you scroll the grid up and down, if the virtualization is on. Any idea how to resolve this issue? Thanks in advance.

Please reference the link http://jsfiddle.net/BkCTL/3/ for example.

Best,
Mo

Grid

answered on 20 Jan 2012

3 answers

2.0K+ views

[Solved] Styling a panelbar

I'm stuck and need some help to:

move the expand/collapse arrow from the right to the left of the bar
remove all the borders from the panelbar, including child items and their items if any
override the heading of the panelbar items
override child items text colour/font/size

I've used the theme designer to do what I want but this affects all controls, not just the panelbar...

PanelBar

answered on 20 Jan 2012

3 answers

190 views

data wont bind!

Hi I'm using the kendo grid control, i can get the columns to display and if i enter the data using the following method :

  $(document).ready(function(){
      $("#grid").kendoGrid({
          columns:[
              {
                  field: "FirstName",
                  title: "First Name"
              },
              {
                  field: "LastName",
                  title: "Last Name"
          }],
          dataSource: {
              data: [
                  {
                      FirstName: "Joe",
                      LastName: "Smith"
                  },
                  {
                      FirstName: "Jane",
                      LastName: "Smith"
              }]
          }
      });
  });

The data will display too, however i am trying to populate the grid from an array and thus am using this method:

 $("#grid").kendoGrid({
     data: people
 });

My data however will not appear i just get the column headings, please find my code below:

var Container = document.getElementById("divReportContainer");
Container.innerHTML = "";
OutputText += "<table id=\"grid\">";
OutputText += "<thead>";
OutputText += "<th data-field=\"strObjectDescription\">Object Description</th>";
OutputText += "<th data-field=\"dblPercentageLength\">% of Total Actual Length</th>";
OutputText += "<th data-field=\"dblActualLength\">Total Actual Length(ft)</th>";
OutputText += "<th data-field=\"intPlanogramsCount\">Count of Planograms</th>";
OutputText += "</thead>";
OutputText += "</table>"
Container.innerHTML = OutputText;

$("#grid").kendoGrid();
var MyArray = [{ strObjectDescription: "Test", dblPercentageLength: "1", dblActualLength: "21", intPlanogramsCount: "3"}];

$("#grid").kendoGrid({
data: MyArray
});

please could someone advise where i am going wrong???

Grid

answered on 20 Jan 2012

4 answers

590 views

Boolean data type in Grid data source

I have 3 columns returning with my data source that are Boolean values (True/False). I couldn't figure out how to designate them as a data type of Boolean to actually evaluate them, so I'm bringing them back as strings and evaluation them as == "True" or "False".

Is it possible to return them to the grid control as actual Booleans and evaluate them as such?

dataSource: {

data:

[

@foreach (var report in Model.Reports)

{

<text

>{Id: @report.Id, ReportId: "@report.ReportId", ReportSample: "@report.ReportSample", ReportLegend: "@report.ReportLegend", ReportFaq: "@report.ReportFaq", ReportName: "@report.ReportName"}, </

text>

}

],

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

ReportId: { type: "string" },

ReportSample: { type: "string" },

ReportLegend: { type: "string" },

ReportFaq: { type: "string" },

ReportName: { type: "string" }

}

I currently have quotes around the Boolean values being returned:
"@report.ReportSample", "@report.ReportLegend", "@report.ReportFaq"
removing the quotes causes the grid to not display

Thanks for the assistance

Grid

answered on 20 Jan 2012

3 answers

548 views

Selecting a tab in Kendo UI

Hello,

I have created a tab control. I'm trying to figure out how to select a tab from JavaScript. Currently, I'm trying the following and its not working.

<div id="myTabs">

<ul>

<li class="k-state-active">Tab 1</li>

<li>Tab 2</li>

<li>Tab 3</li>

</ul>

<div id="tab1">tab 1 content</div>

<div id="tab2">tab 2 content</div>

<div id="tab3"><input type="button" onclick="selectMyTab();" value="button" /></div>

</div>

<script type="text/javascript">

$().ready(function () {

$("#myTabs").kendoTabStrip({

animation: { open: { effects: ""} }

});

function selectMyTab() {

$("#myTabs").kendoTabStrip().select("#tab1");

}

</script>

What am I doing wrong?

TabStrip

answered on 19 Jan 2012

4 answers

176 views

serverPaging not working after filtering

I've got an issue on an internal application. I've bound a grid and a chart to a dataSource, and serverPaging works fine on it. When I apply a filter to the dataSource, the grid and chart both update to reflect the new data. The grid, however, loses the ability to page - only "1" is displayed.

Is this a bug, or am I implementing the filtering incorrectly?

Grid

answered on 19 Jan 2012

1 answer

130 views

I lose all my attributes when grid my existing table

Hi guys,

I'm using Kendo UI - Grid on existing table.
However since I Kendo -wrap it I lose all my attributes.
So I'm adding them dynamically using dataBound: property.
But since I'm also declaring it as sortable: , I'm losing them again when a sorting is done.
This is bad when it comes to bind data to an element and get it in the new order, because this data is lost.

Is there a way to set dafault map of attributes of a table and keep them no matter the changes?

Grid

answered on 19 Jan 2012

0 answers

162 views

How do i connect to a webservices using kendo

I have created my web service method as

       [WebMethod(Description = "Returns the Enrolled members.")]
       [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public string LoadData()
        {
            HealthmanagementDataContext db = new HealthmanagementDataContext();
            var linq = from s in db.Edmund_Reporting_Counter()
                       select s;
            string jsonStr = JsonConvert.SerializeObject(linq);

            return jsonStr;
        }
The problem is when i try to get the result from the web service on client side as
$("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",

                        dataSource: {
                            transport: {
                                read: {

                                    url: "http://localhost:2316/Service1.asmx/LoadData",   // the problem
                                    dataType: "json"

                                }
                            }

                        },
I can't get back the data coming from the web service.
Thanks,

Data Source

asked on 19 Jan 2012

0 answers

156 views

Command in grid columns

Hi ,

What is 'command' in the columns field? Is the "destroy" only command available?

I looked at example here http://jsfiddle.net/rusev/vHTj6/ . It explained how to change text of command button.

Is there any way I can call my own function on command?

Thank you.

-Edit : Found some explanation in source. And there is no direct way to call a custom function from command.

Grid

asked on 19 Jan 2012

3 answers

261 views

Tabstrip AJAX Jump

Hi,

When running the tabstrip in AJAX load mode, the tabstrip headers ""jump" to the right a little bit, then back to the left the first time I click on a tab. This doesn't appear to happen when I run the site locally, only when hosted remotely...so I think it must be some sort of latency issue downloading and rendering the AJAX content.

Once the tab page has been loaded the first time, switching to another tab and back doesn't cause the "jump" anymore...so I'm assuming it has something to do with the updating of the DOM the first time the tab page is rendered.

I have a mix of AJAX and non-AJAX tabs, and the issue only presents for the tabs with AJAX content (the Order tab below works fine)...so I'm pretty sure that's the culprit.

Presents in both Chrome and IE.

I've tried removing all classes and non-Kendo css from the page, but the issue persists.

Any idea what could be the issue here or how to investigate further?

<!DOCTYPE html>

<html>

<head>

<title>Hello</title>

<link href="kendo.common.min.css" type="text/css" rel="stylesheet">

<link href="kendo.min.css" type="text/css" rel="stylesheet">

<script src="jquery.min.js" type="text/javascript"></script>

<script src="kendo.all.min.js" type="text/javascript"></script>

</head>

<body>

<div id="mainWrapper">

<div id="main">