Trying to create a simple expand for details grid and the first column is not showing (the expand icon)

This is what I have on the view:


Chrome and IE show no JS errors. I have two other grids (no details or heirarchy) and they look fine. Not sure what I am doing wrong here.

hi,

i use grid on batch mode and i have a problem with the grid presentation when editing the grid.

The problem occurs when i create or remove another row while other fields are in changed mode and have the changed symbol (orange little triangle),
in this scenario, the  symbol is disappeared from the rows that were changed, although the changes has not been saved! .

This problem exists also in the demo grid on: 
http://demos.telerik.com/kendo-ui/web/grid/editing.html

To reproduce the problem:

1. Change one cell in the grid.
2. Move to other field and notice that the orange triangle appears.
3. Press on "Add new record" .
4. The orange symbol is disappeared !

can you advice how to solve the problem?

thanks,
Mali

I am giving option LTR and RTL text direction in Kendo Editor.

While clicking on particular icon, i have to get the selected area text and apply dir=rtl or dir="ltr" to the selected element. But i can able to get the selected text with the following code.

$(this).data("kendoEditor").getRange()

But i have to select the tag of this selected area and apply the direction attribute.

Can anyone help me to resolve this?

It looks like by default creating a dataSource with a data array automatically loops through the entire array and does some operations on all of the members.  Is there a way to suppress this or have the reading of the elements controlled by a function?  I do not want the data source to access all of the members until it has a need to do so ... maybe this need is present and I'm just unaware of it.  I have an array that I want my data source to operate.  This array lazy loads its values at the time they are accessed.  I am giving this data source to a grid with a pager. I do not want my data source items to actually load until the pager / grid needs them for display.  Unfortunately I cannot use server side paging ... I must do this all through the client.  Can anyone think of some ways this can be accomplished, either through manipulating the data source and a pager, or maybe by mocking server side paging requests in the client?  Any help would be appreciated.  

I write my codes in html is OK,but when I bind the datasource using javascript,it is not ok.What's wrong with my codes?

**My View:using Meetings_Read is OK,but using javascript is not OK**

     @(Html.Kendo().Scheduler<SchedulerCustomViewDemo.Models.SchedulerTest>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2014, 4, 13, 7, 00, 00))
    .Height(600)
    .Views(views => {
        views.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
        views.AgendaView();
        views.CustomView("kendo.ui.ToDoView", view => view.Title("To Do").Selected(true));
    })
    .DataSource(d => d
        .Events(e => e.Error("error_handler"))
    // .Read("Meetings_Read", "Home")
    )
    )

**My Javascript:it is not OK**

    $.ajax(
         {
             url: '@Url.Action("Meetings_Read","Home")',
               cache: false,
               async: true,
               success: function (result) {
                   var scheduler = $("#scheduler").data("kendoScheduler");
                   var dataSource = new kendo.data.SchedulerDataSource({
                        data: result.Data
                   });
                 scheduler.setDataSource(dataSource);
              }
         });

**My Model:can bind to the scheduler,but can not show the title**

       public class SchedulerTest: ISchedulerEvent
    {
        
        public string Description { get; set; }

        public DateTime End { get; set; }

        public string EndTimezone { get; set; }

        public bool IsAllDay { get; set; }

        public string RecurrenceException { get; set; }

        public string RecurrenceRule { get; set; }

        public DateTime Start { get; set; }

        public string StartTimezone { get; set; }
        public string Title { get; set; }
    }

**My Controller:just show the title of everyday in a month**

     public virtual JsonResult Meetings_Read([DataSourceRequest] DataSourceRequest request)
     {
     return Json(meetingService.GetAll().ToDataSourceResult(request));
     }
       public List<SchedulerTest> GetAll()
        {
            var firstDate = DateTime.Now.Date.AddDays(1 - DateTime.Now.Day);
            var lastDate = firstDate.AddMonths(1);
            var schedulerTests= new List<SchedulerTest>();
            int i = 0;
            for (; firstDate < lastDate; firstDate = firstDate.AddDays(1))
            {
                schedulerTests.Add(new SchedulerTest
                {
                    Title = firstDate.ToString("yyMMdd") + "abc",
                    Start = firstDate,
                    End = firstDate.AddDyas, 
                });
            }

            return schedulerTests;
        }

Hi, 

At first, I understood that the "onDataBound" event of the TreeView would indicate that my tree is "ready".
However, this is clearly not the case, and I'm wondering if there's nothing else I can use or if this is a known issue.

I use a hierarchical data and a transport/url to read the data (see code snippet below).
The OnDataBound event throws alright, but at this point in time, nothing can be done on the tree. Expanding items, looking for items. Nothing.
I currently put a 1500 millisecond timeout inside the OnDataBound and then call "expand" on the tree's first node... this which works most of the time - but not always, depending on the network.
Which means, the onDataBound is not even close to the event I need.
Is this expected/known or am I missing something here? Is there an event that I can use to indicate that the tree is ready (at the moment I just want to expand all nodes, eg -> tree.expand $("#treeName .k-item:first") and this doesn't work)

_treeViewDataSource = new kendo.data.HierarchicalDataSource(
  transport:
  read:
  url: options.dataUri
  dataType: "json" 
  data: postData
  cache: false

I got a mvc grid with a popup editing feature. Inside my popup with is a mvc template I need a area do add child to a collection. I think I need a template but I don't know wow to implement it. The problem is that with this section the popup is invalid because in not part of the main model. How can i put this in the main template without making the popup invalid. I'm hiding and showing this area with javascript.
Thanks in advanced!!!

Rick.

Section to be in a template
~~~~~~

<div id="newPersonForm">
            <div class="container" id="personArea" style="display: none;">
                <div class="form-group">
                    @*<label class="control-label col-sm-3" for="ActivityPersonFirstName">Nombre </label>*@
                    @Html.TextBox("ActivityPersonFirstName", null, new { @class = "k-textbox", placeholder = "Nombre", style = "text-transform:capitalize;", required = "required" })
                    @Html.TextBox("ActivityPersonInitName", null, new { @class = "k-textbox", @placeholder = "Inicial", style = "text-transform:capitalize;"})
                </div>
                <div class="form-group">
                    @*<label class="control-label col-sm-3" for="ActivityPersonInitName">Inicial </label>*@
                    @Html.TextBox("ActivityPersonLastName1", null, new { @class = "k-textbox", @placeholder = "Apellido P", style = "text-transform:capitalize;", required = "required" })
                    @Html.TextBox("ActivityPersonLastName2", null, new { @class = "k-textbox", @placeholder = "Apellido M", style = "text-transform:capitalize;", required = "required" })
                </div>
                <div class="form-group">
                    @*<label class="control-label col-sm-3" for="ActivityPersonLastName1">Apellido P </label>*@
                    @Html.TextBox("ActivityPersonPhone1", null, new { @class = "k-textbox", @placeholder = "Telefono 1", required = "required" })
                    @Html.TextBox("ActivityPersonPhone2", null, new { @class = "k-textbox", @placeholder = "Telefono 2" })
                </div>
                <div class="form-group">
                    @*<label class="control-label col-sm-3" for="ActivityPersonLastName2">Apellido M </label>*@
                    @Html.TextBox("ActivityPersonSocSec", null, new { @class = "k-textbox", @placeholder = "Seguro Social", required = "required"})
                </div>
                <div class="form-group">
                    @*<label class="control-label col-sm-3" for="ActivityPersonSocSec">Seguro Social </label>*@
                    <a id="btnSometer" onclick="someter()" class="k-button">Someter</a>
                    <a id="btnCancelar" onclick="cancelar()" class="k-button">Cancelar</a>
                </div>
            </div>
        </div>

Hi,

Our datasources data are generated with nested objects from the server and sometimes, some values can be null.

At first, I had to do custom template functions for every column to display them according to their values, so I created a function that either returns the value of the object, or an empty string if on any given level, it is null. However, if I try filtering that column, an exception is thrown.

I have created a sample code to show this error, just try adding a filter to the column to see the error : http://jsfiddle.net/UXBcW/1/

Thanks

I have been working on this the last few days, and am very new to Javascript and Kendo UI.  I have created my WCF and it is working fine. When I go to the URl/FunctionName I get a list of the Employee data returned.  Below is a paste of that data...

[{"FirstName":"Nancy","LastName":"Davolio"},{"FirstName":"Andrew","LastName":"Fuller"},{"FirstName":"Janet","LastName":"Leverling"},{"FirstName":"Margaret","LastName":"Peacock"},{"FirstName":"Steven","LastName":"Buchanan"},{"FirstName":"Michael","LastName":"Suyama"},{"FirstName":"Robert","LastName":"King"},{"FirstName":"Laura","LastName":"Callahan"},{"FirstName":"Anne","LastName":"Dodsworth"}]

However, when I try to get this data using my ASP.NET website project, it does not load correctly.  I dont know if I am doing something wrong in the filling of the grid, or the calling of the WCF itself, so I decided to try to ask here as I am out of ideas.  The errors that come up in Chrome debugger are as follows...

"OPTIONS http://localhost:27689/Service1.svc/GetDataUsingDataContract?_=1398887165670 405 (Method Not Allowed) jquery-1.9.1.js:9597
XMLHttpRequest cannot load http://localhost:27689/Service1.svc/GetDataUsingDataContract?_=1398887165670. Invalid HTTP status code 405"

However, when I click on the http://...... it shows on the browser fine.


Below is a copy of my Web Page Markup. If anyone could please tell me what I am doing wrong, it would be much appreciated.  Below the markup of my page, I am also going to put the Interface of my WCF, the Config of the WCF and the code behind the interface so that just in case that is the issue, someone will have it available to help.  Thanks.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPage.aspx.cs" Inherits="FlightWebSite.GridPage" %>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" />
    <link href="Styles/kendo.default.min.css" rel="stylesheet" />
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>

</head>
<body>
    
        <div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 365px"></div>

            </div>

           <%-- <style scoped>
                #clientsDb {
                    width: 952px;
                    height: 396px;
                    margin: 20px auto 0;
                    padding: 51px 4px 0 4px;
                   // background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
                }
            </style>--%>

         
            <script>
                var yourJSONObject;

                var safeLogger = function (msg) {
                    if (window.console && window.console.log)
                        window.console.log(msg);
                }

                //function myfunction(yourJSONObject) {
                //    $.getJSON('http://localhost:27689/Service1.svc/GetDataUsingDataContract', function (data) {
                //        //Parse your JSON object into a Javascript object
                //        yourJSONObject = jQuery.parseJSON(data);

                //        for (var i = 0; i < yourJSONObject.Comment.length; i++) {
                //            safeLogger(yourJSONObject.Comment[i].LastName + ", "
                //            + yourJSONObject.Comment[i].FirstName);
                //        }
                //    })}

                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                contentType: "application/json; charset=utf-8",
                                read: "http://localhost:27689/Service1.svc/GetDataUsingDataContract",
                                dataType: "json"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        LastName: { type: "string" },
                                        FirstName: { type: "string" }
                                    }
                                },
                                pageSize: 20,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            height: 430,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [
                                "Employees",
                                {
                                    field: "LastName",
                                    title: "Last Name",
                                    width: 260
                                }, {
                                    field: "FirstName",
                                    title: "First Name",
                                    width: 260
                                }
                            ]
                        }});
                })

            </script>
        </div>


</body>
</html>

WCF Interface

[ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat= WebMessageFormat.Json,
            RequestFormat = WebMessageFormat.Json)]
        List<Employees> GetDataUsingDataContract();

        [OperationContract]
        string GetData();


        // TODO: Add your service operations here
    }


    // Use a data contract as illustrated in the sample below to add composite types to service operations.
    [DataContract]
    public class Employees
    {
        string lastName = "";
        string firstName = "";

        [DataMember]
        public string LastName
        {
            get { return lastName; }
            set { lastName = value; }
        }

        [DataMember]
        public string FirstName
        {
            get { return firstName; }
            set { firstName = value; }
        }
    }
}


Config File:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
    <services>
        <service  name="WcfService1.Service1" behaviorConfiguration="DefaultServiceBehavior">
            <endpoint binding="webHttpBinding" contract="WcfService1.IService1"      behaviorConfiguration="DefaultEPBehavior" />
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="DefaultEPBehavior">
                <webHttp />
            </behavior>
        </endpointBehaviors>
        <serviceBehaviors>
            <behavior name="DefaultServiceBehavior">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
    <directoryBrowse enabled="true"/>
</system.webServer>
  
 <connectionStrings>
      <clear />
      <add name="MyConnectionString" 
       providerName="System.Data.ProviderName" 
       connectionString="Integrated Security=SSPI;Initial Catalog=northwind;Data Source=Staley3-PC" />
    </connectionStrings>


</configuration>

Implementation of Functions in interface:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.Common;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;

namespace WcfService1
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
    // NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.

    [AspNetCompatibilityRequirements(RequirementsMode =
            AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1 : IService1
    {
        LRUCache<DataSet> lruCache;
        static string GetConnectionStringByName(string name)
        {
            // Assume failure. 
            string returnValue = null;

            // Look for the name in the connectionStrings section.
            ConnectionStringSettings settings =
                ConfigurationManager.ConnectionStrings[name];

            // If found, return the connection string. 
            if (settings != null)
                returnValue = settings.ConnectionString;

            return returnValue;
        }

        /// <summary>
        /// Gets the data from the database and returns it in XML Format
        /// </summary>
        /// <returns></returns>
        public string GetData()
        {
            string xml;
            DataSet dset = new DataSet();
            SqlConnection conn = new SqlConnection(GetConnectionStringByName("MyConnectionString"));
            SqlCommand comm = new SqlCommand("Select * From Employees");
            SqlDataAdapter dAdapt = new SqlDataAdapter(comm);
            dAdapt.Fill(dset);
            ////If we use this way of Caching this caches the data
            //lruCache = new LRUCache<DataSet>(100);
            //lruCache.Add("myDset", dset);

            ////Retrives the data from Cache
            //DataSet dset2 = new DataSet();
            //lruCache.Get("myDset", out dset2);

            xml = dset.GetXml();
            return xml;
        }


        public List<Employees> GetDataUsingDataContract()
        {

           // WebOperationContext.Current.OutgoingResponse.Headers.Add(
           //"Access-Control-Allow-Origin", "*"); 
            WebOperationContext.Current.OutgoingResponse.Headers.Add(
           "Access-Control-Allow-Methods", "GET"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
           "Access-Control-Allow-Headers", "Content-Type, Accept");

            //Fill Dataset with Emolyee Info
            DataSet dset = new DataSet();
            SqlConnection conn = new SqlConnection(GetConnectionStringByName("MyConnectionString"));
            SqlCommand comm = new SqlCommand("Select LastName, FirstName From Employees", conn);
            SqlDataAdapter dAdapt = new SqlDataAdapter(comm);
            dAdapt.Fill(dset);
            

            //Get Data Table out of dataset
            DataTable products = dset.Tables[0];
            
            //use Linq to fill List of employees
            List<Employees> list = dset.Tables[0].AsEnumerable().
                Select(product => new Employees
                {
                    FirstName = product.Field<string>("FirstName"),
                    LastName = product.Field<string>("LastName")
                }).ToList<Employees>();
     
            //Return the List of Employees to Application
            return list;
        }
    }
}

 

 have a grid of Employees and Notes attached to the Employee records by the EnteredBy column on the notes that links to the EmpID of the Employee. Simply enough, I want the count of the Note records attached to each Employee and be able to place it in a "Note Count" column attached to the parent. Here is my code:

$(document).ready(function () {
$.when(getLocationsAsync(), getLocationsFilteredAsync()).done(function (locations, filteredLocations) {
var filteredLocationDataSource = new kendo.data.DataSource({
data: filteredLocations,
schema: {
model: {
fields: {
Value: { type: "number" },
Text: { type: "string" },
}
}
}
});

$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Employees"
},
create: {
url: "http://localhost/EmployeeDataService.svc/Employees",
type: "POST",
dataType: "json"
},
update: {
url: function (data) {
return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
},
type: "PUT",
dataType: "json"
},
destroy: {
url: function (data) {
return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
},
type: "DELETE",
dataType: "json"
}
},
model: empModel,
schema:
{
model: empModel
}
},
editable: {
confirmation: true,
mode: "popup",
template: templateHTML
},
filterable: true,
pageable: true,
sortable: true,
height: 365,
toolbar: ["create"],
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{
field: "EmpID",
filterable: false
},
{
field: "LastName",
title: "Last Name"
},
{
field: "FirstName",
title: "First Name",
attributes: { style: "text-align:left;" }
},
{
field: "LocID",
title: "Location Name",
attributes: { style: "text-align:left;" },
values: locations
},
{
field: "NoteID", title: "Note Count", attributes: { style: "text-align:center;" }, editable: false, template: function (dataItem) {
return kendo.htmlEncode(noteCount(dataItem));
}
},
{
field: "DOB", title: "DOB", attributes: { style: "text-align:right;" }, template: '#= kendo.toString(DOB,"MM/dd/yyyy") #
},
{
field: "Phone",
hidden: true
},
{
field: "Modified",
hidden: true
},
{
field: "ModifiedBy",
hidden: true
},
{
command: [{
name: "edit",
text: "Edit"
}, {
name: "destroy",
text: "Delete"
}]
}
]
}

);
});
});

var empModel = {
id: "EmpID",
fields:
{
EmpID:
{
type: "number",
defaultValue: 0
},
FirstName:
{
type: "string"
},
LastName:
{
type: "string"
},
LocID:
{
type: "number"
},
NoteID:
{
type: "number",
editable: false,
hidden: true
},
DOB:
{
type: "date"
},
Phone:
{
defaultValue: "0",
type: "string"
},
Modified:
{
type: "date"
},
ModifiedBy:
{
type: "number",
defaultValue: 0
}
}
};

function noteCount(e) {
var noteTotal = 0;
var noteSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Notes"
}
},
serverFiltering: true,
filter: { field: "EnteredBy", operator: "eq", value: e.EmpID },
schema:
{
total: function (data) {
return data.length;
}
}
});
noteSource.read();
var data = noteSource.data();
noteTotal = data.length;
return noteTotal;
}

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Notes"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EnteredBy", operator: "eq", value: e.data.EmpID }
},
scrollable: false,
sortable: true,
pageable: true,
filterable: true,
columns: [
{ field: "NoteID", title: "NoteID", style: "text-align: right;" },
{
field: "Details", title: "Details", attributes: { style: "text-align:left;" }, template: function (dataItem) {
return kendo.htmlEncode(dataItem.Details.substring(0, 50));
}
},
{
field: "Entered", title: "Entered", attributes: { style: "text-align: right;" }, template: function (dataItem) {
return kendo.htmlEncode(kendo.format("{0:MM/dd/yyyy hh:mm tt}", new Date(parseInt(dataItem.Entered.substring(6, 19)))));
}
},
{
command: [{ "name": "ViewDetails", "buttonType": "ImageAndText", "text": "View Details", "click": showDetails }]
}
]
});
alert(e.detailCell.content.dataSource.total());
}