Questions on Kendo UI for jQuery Forum

2 answers

693 views

DataSource Group by multiple fields remotely

Hi,

I would like to group data by multiple fields remotely on server. What is the data format for the grouping and grouped items ? For eg.,

I have a list of employees as follows :

Employee[] empList = new Employee[6];

empList[0] = new Employee() { Name = "CA", State = "A", Department = "xyz" };

empList[1] = new Employee() { Name = "ZP", State = "B", Department = "xyz" };

empList[2] = new Employee() { Name = "AC", State = "B", Department = "xyz" };

empList[3] = new Employee() { Name = "AA", State = "A", Department = "xyz" };

empList[4] = new Employee() { Name = "A2", State = "A", Department = "pqr" };

empList[5] = new Employee() { Name = "BA", State = "B", Department = "pqr" };

I would like to group the employee list by State and then by Department.   So my groupings and grouped items would be :
A - XYZ
    - EMP[0], EMP[3]
A - PQR
   - EMP[4]
B- XYZ
- EMP[1], EMP[2]
B - PQR
- EMP[5]

What is the format in which datasource requires these groupings and grouped items ? I saw this post http://www.kendoui.com/forums/framework/data-source/datasource-remote-grouping.aspx    but could not figure out how to present multiple key values.

Thanks

Data Source

answered on 17 Oct 2012

8 answers

4.0K+ views

How do you default a TreeView to expanded on initialization?

Hello,

I'm attempting to build a Kendo TreeView that is fully expanded by default.

My data structure is a simple un-ordered list similar to this:

<ul id="treeView">

<li>1

<ul>

<li>1.1</li>

</ul>

</li>

<li>2

<ul>

<li>2.1

<ul>

<li>2.1.1</li>

</ul>

</li>

</ul>

</li>

</ul>

Then on document.ready():

$(document).ready(function () {

$("#treeView").kendoTreeView();

});

Any suggestions?

Thanks,
Daniel

TreeView

answered on 17 Oct 2012

3 answers

795 views

Grey-out a row in Kendo grid

I have a kendo grid with one of the columns as check boxes. I want to achieve the following:

1. Select a row using check box, click on delete button external to grid and get that row deleted. (looking out for bulk delete also)
2. Select a row using check box, click on a button to grey-out / disable ( row should still be present in the grid) that row.

I could able to achieve first task. I need help for the second task.

Any quick help with sample code will be appreciated. I'm new to kendo.

is this the right way to get a column with check boxes?

checkBox is an empty string ( "" ) which i'm getting from controller

columns.Bound(p => p.checkBox).ClientTemplate("<input type= 'checkbox' id= 'chkbox' onchange= 'chkchnage()' />").Title("");

columns.Bound(p => p.frontOffice).Title("Rule Description").HeaderHtmlAttributes(new { style = "text-align:center" });

.

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(m => m.checkBox))  //not sure why I added this.Model id is mandatory it seems

.PageSize(20)

)

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.Resizable(resize => resize.Columns(true))

.Editable(editing => editing.DisplayDeleteConfirmation(true))

.Navigatable()

.Pageable()

.Sortable().Render();

Grid

answered on 17 Oct 2012

0 answers

89 views

Display tabs on the right side instead of the left

How can I make the tabs appear to the right instead of to the left?

TIA

TabStrip

asked on 17 Oct 2012

4 answers

216 views

Window Drag Event

What is the recommended way to have a kendoWindow listen for the dragEnd event?

Window

answered on 16 Oct 2012

1 answer

129 views

Menu/Grid z-index bug

See html source below. When I put a menu and a grid control below it inside a window, dropping the menu causes it to display underneath the grid. But when the menu and grid are not inside a window, it displays as it should. It does this is all browsers.

<!doctype html>
<html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
      $(".myWindow").kendoWindow();
      $(".myMenu").kendoMenu();
      $(".myGrid").kendoGrid();
    });
</script>
</head>
<body>

<ul class="myMenu">
    <li>Menu
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </li>
</ul>

<table class="myGrid">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
</table>

<div class="myWindow">

    <ul class="myMenu">
      <li>Menu
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
        </ul>
      </li>
    </ul>

    <table class="myGrid">
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
        </tr>
      </thead>
    </table>

</div>

</body>
</html>

Menu

answered on 16 Oct 2012

1 answer

203 views

Hierarchy Grid with Local Data

Hi,

I'm trying to create an Hierarchy Grid with Local Data and I can't manage to pass the father ID to the Client Detail Template

for example

@(Html.Kendo().Grid(Model.Employees)
.Name("Employees")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(140);
columns.Bound(e => e.LastName).Width(140);
columns.Bound(e => e.Title).Width(200);
columns.Bound(e => e.Country).Width(200);
columns.Bound(e => e.City);
})
.ClientDetailTemplateId("employeesTemplate")
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
.Sortable()
)

<script id="employeesTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid(Model.Orders.Where(o=>o.employeeID == "#=EmployeeID#" ) )
//************* NOT WORKING *************
.Name("Orders_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(101);
columns.Bound(o => o.ShipCountry).Width(140);
columns.Bound(o => o.ShipAddress).Width(200);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>

Please Help

Grid

answered on 16 Oct 2012

0 answers

100 views

Need To Double Click KendoUpload Button

I have a rather simple kendoUpload button and it mostly works fine,
but in IE9 the user needs to double click the button to get the file
browser window to display.

Also, the user can only click on the button label - clicking (or double
clicking) on the larger button image has no effect.

Here's the code:

<a href="javascript:void(0)">

<input id="FileName" name="FileName" type="file" />

<script>

jQuery(function () {

jQuery("#FileName").kendoUpload();

</a>

asked on 16 Oct 2012

1 answer

1.3K+ views

Need to change "Filter" icon in grid columns

Hi,
Does any one know, how can I change the "Filter" icon that comes on grid columns when filtering is enabled ?
I have tried to change it but it appears that image is displayed dynamically by kendo during grid rendering.

Thanks

Grid

answered on 16 Oct 2012

0 answers

111 views

Validating RadTextBox

Is it possible to validate RadTextBox with Kendo UI Validation?
My code looks like this:

<script type="text/javascript">
$(document).ready(function () {
            $("#contact").kendoWindow({
                actions: ["Maximize", "Minimize", "Close"],
                title: "Contact...",
                visible: false
            }).data("kendoWindow");
            $("#contact").kendoWindow('open');
            $("#contact").kendoValidator();
</script>
...
<div id="contact">
        <table>
            <tr>
                <td>Name :</td>
                <td>
                    <telerik:RadTextBox ID="tbFullName" runat="server" CssClass="k-textbox" EmptyMessage="Please enter your name" ClientIDMode="Static"></telerik:RadTextBox></td>
                <td><span class="k-invalid-msg" data-for="tbFullName"></span></td>
            </tr>
        </table>
    </div>

For testing purposes, I tried kendoWindow() so that I can be sure that all links are ok and Kendo Window worked perfekt.
But unfortunately Kendo Validation didn't works for me with RadTextBox. If I use <input> tags intead of RadTextBox
everything works fine.

I hope that someone can help me. Thanks in advance.

Validation

asked on 16 Oct 2012