Questions on Kendo UI for jQuery Forum

2 answers

360 views

Grid Not Filling

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;
}
}
}

Grid

answered on 02 May 2014

6 answers

602 views

Kendo Grid with Count of Hierarchical Grid Rows

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());
}

Grid

answered on 02 May 2014

3 answers

337 views

Grid with frozen columns and virtual scrolling is out of sync

I noticed that when I use virtual scrolling with the example of frozen columns (http://demos.telerik.com/kendo-ui/web/grid/frozen-columns.html) using the MVC syntax, the rows are out of sync when I scroll to the bottom.
It appears as there is no blank space below the table with the frozen columns when a horizontal scrollbar is show in the non-frozen columns

Grid

answered on 02 May 2014

7 answers

276 views

[Solved] Prevent panelbar from creating duplicate items

Quite new to MVC and kendo and was wondering if there was a way to prevent panelbar from creating duplicate items and whats the best method to achieve this.

Here is my panelbar markup:

@(Html.Kendo()

.PanelBar()

.Name("panelbar")

.HtmlAttributes(new { style = "width:200px" })

.ExpandAll(true)

.BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<PanelBarItem> mappings) =>

{

mappings.For<QueryModel>(binding =>

{

binding.ItemDataBound((panelitem, modelitem) =>

{

panelitem.Text = modelitem.category;

});

})

)

Here is my class markup for the model:

public class QueryModel

{

public string category { get; set; }

public string controlID { get; set; }

public string controlType { get; set; }

public System.Nullable<int> multiplier { get; set; }

public string caption { get; set; }

public string dropdownSQL { get; set; }

public string columnSQL { get; set; }

public string sortorder { get; set; }

public string tooltip { get; set; }

}

And here is my controller action:

public ActionResult Query()

{

QueryModel querydata = new QueryModel();

var results = from s in dbContext.T223_Searches

join sd in dbContext.T224_SearchDetails on s.KeySearch equals sd.KeySearch

join sc in dbContext.T225_SearchCategories on sd.KeyCategory equals sc.KeyCategory

where sd.KeySearch == 3

orderby sd.SortOrder

select new QueryModel

{

category = sc.Description,

controlID = sd.ControlID,

controlType = sd.ControlType,

multiplier = sd.Multiplier,

caption = sd.Caption,

dropdownSQL = sd.DDLSQL,

columnSQL = sd.SQLColumn,

tooltip = sd.ToolTip

};

return View("Query", results.ToList());

}

Is there anyway in the controller action or actual panelbar markup to select DISTINCT category? My model returns multiple rows which could have different or the same category. Or is there a way I can check if the item with certain text exists already and not create it?

Also am I going about this the wrong way and do I need to have a separate model just for categories?

PanelBar

answered on 02 May 2014

1 answer

973 views

How to find the selected row index in Hierarchical Grid

Hi,
Today we have a new issue where e.masterRow[0].rowIndex does not give the correct row index.The scenario is like this.

We have a hierarhical grid which is prepopulated with 9 rows. I add a new row to this grid. when I click on the second row the child grid is populated.
I get the rowindex correctly. Now when I click on any row below the secong row the rowindex given by e.masterRow[0].rowIndex would be incremented by 1. Is there any other method to get the row index of the currently selected row which needs to be expanded.

Regards,
Vijay

Grid

answered on 02 May 2014

2 answers

283 views

Kendo Grid Paging and SignalR

Hello, I am using KendoGrid to display events in my project along with server paging. I wish to use SignalR and view the events as and when they occur in the kendo grid without a refresh. I wanted to know if KendoGrid server paging could be used along with SignalR,if yes,please help me with some examples. Thank you.

Grid

answered on 02 May 2014

2 answers

498 views

[Solved] ImageBrowser with dynamic ImageUrl

We are using the ImageBrowser with Azure Blob Storage, and we have a database with the images stored as "Files." Each File row contains FileId and Name. Let's use this row as an example:

FileId: "5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d"
Name: "logo.jpg"

Once we have the FileId, we use that to create a new Blob Container in Azure (so it creates a new "directory" in Azure Storage with a URL like "https://clientname.blob.core.windows.net/5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d/logo.jpg").

OK, so when I pass our list of images back to the Kendo ImageBrowser, the only property it has is "Name," which in this case is "logo.jpg". But if I set the imageUrl to "https://clientname.blob.core.windows.net/", then when it inserts the image into the Editor, the src is "https://clientname.blob.core.windows.net/logo.jpg", which is obviously incorrect. I still need the FileId, which will be different for every image. Both the thumbnailUrl and the imageUrl need the FileId as well to be able to properly build the correct URL.

I tried creating a custom schema like this:

schema: {

model: {

fields: {

name: { field: "name" },

type: { field: "type" },

size: { field: "size" },

containerId: { field: "containerId" }

}

And passed a "containerId" property back with each object from the Read action. But then I didn't know how to make the thumbnailUrl or imageUrl functions use that containerId property.

I'm stuck! Can you help me figure out how to make this work please? Thank you.

Editor

answered on 01 May 2014

10 answers

2.4K+ views

[Solved] Update not called when syncing the datasource

I have trouble to update my datasource when the grid is edited.
See the following jsfiddle: http://jsfiddle.net/ewaldhofman/uU2th/8/

The update method in the transport of the datasource is never called when the value in the grid is updated.

What am I doing wrong?

Data Source

answered on 01 May 2014

7 answers

461 views

grid scrollable even when set to false and paging turned on...

Hi. I have a grid displaying using the following code. As you can see, I have scrollable set to false and pageable set to true. The pagesize is 6... The problem is that even if I only have one row displaying in the grid, it still allows for scrolling. The reason this is particularly problematic is that when I touch the screen, I may accidentally scroll it. This has the unfortunate effect of making the keyboard pop up on the tablet device every time. I would like to be able to solve both of these issues. Please advise. Thanks!

  <div id="clientsDb">
<div id="gridViewDiv"></div>
</div>

<style scoped>
#clientsDb{
height: 100%;
width: 100%;
margin 0px auto 0;
padding: 0px 0px 0 0px;
}
</style>

  var dataSource = new kendo.data.DataSource({
data: viewModel.itemsArray,
pageSize: 6
});


//gridview div for the main grid
$("#gridViewDiv").kendoGrid({
dataSource: dataSource,
mobile: "tablet",
//height: kendo.support.mobileOS.wp ? "24em" : 430,
resizable: false,
//toolbar: ["create"],
columns: [
{ field:"ItemDesc", title: "Item" },
{ field: "QtyOrdered", title:"Qty", width: "35px" },
{ field: "ItemPrice", title:"Price", format: "{0:c}", width: "60px" },
{ field: "PriceUOM", title:"Per", width: "35px" },
{ field: "OrderAmount", title:"Order Amt", format: "{0:c}", width: "60px" },
{ command: [{text: "qty", click: editRow}, {text: "remove", click: deleteRow}], title: " ", width: "165px" }
],
editable: "inline",
filterable: true,
sortable: true,
height: 320,
pageable: true,
scrollable: false,
columnMenu: true,
dataBound: function () {
   $('td').each(function(){if($(this).text()=='0' || $(this).text()=='$0.00'){$(this).addClass('gridCellClass')}})
}
});

Grid

answered on 01 May 2014

3 answers

414 views

KendoGrid: Error Cannot call destroy method when navigating to other page

Hi,

We are using Kendo Grid in angularJS application. When we navigate to other page, we get this error message: "Cannot call method 'destroy' of kendoDropTarget before it is initialized".

We have groupable property set to true in kendoGrid. If we remove that, the error doesn't come. Seen a below forum posts, but not sure if you guys have actually fixed the issue or if there's a workaround for this which I'm not aware of?

Can you please let us know on this on priority. This is blocking us.

Post:
https://github.com/kendo-labs/angular-kendo/issues/66

Thanks!

Grid

answered on 01 May 2014