Questions on Kendo UI for jQuery Forum

1 answer

99 views

GridView with ASP.NET ObjectDataSourceControl

Hi,

I am having the requirement that I am having the page with Asp:ObjectDataSourceControl which has some list of records. I want to use asp.net datasource control in Kendo gridview. Can anyone tell me how to provide datasource value of kendo gridview with sqldatasource/objectdatasource control.

Grid

answered on 13 Mar 2013

1 answer

170 views

ASP.Net MVVM and Kendo UI Grid

Hi,

I am having the requirement that I am having WCF service which is not REST/JSON based. This is a simple WCF service. I am having ASP.NET MVVM based pattern application which has views, model and viewmodel. In most of the examples in Kendo UI written with MVC pattern(i.e with Controller). Can anyone share how to use ASP.NET MVVM (Not kendo client side MVVM) to populate data in kendo GridView.

MVVM

answered on 13 Mar 2013

1 answer

294 views

kendo Dropdown list throwing bindto error

Hi Guys,

I am getting an error in dropdown list.

Overload resolution failed because no Public 'BindTo' is most specific for these arguments:
'Public Function BindTo(dataSource As System.Collections.Generic.IEnumerable(Of SelectListItem)) As Kendo.Mvc.UI.Fluent.DropDownListBuilder':
Not most specific.
'Public Function BindTo(dataSource As System.Collections.Generic.IEnumerable(Of DropDownListItem)) As Kendo.Mvc.UI.Fluent.DropDownListBuilder':
Not most specific.

This is the line where this exception is being thrown at:

<div class="editor-field">
@(Html.Kendo().DropDownList().Name("ExternalMailItemID").BindTo(ViewData("ExternalMailItem")))
@Html.ValidationMessageFor(Function(model) model.ExternalMailItemID)
</div>

This is what i am doing in the controller:

<HttpPost()> _
Function Create(ByVal collection As ExternalMailCost) As ActionResult
Try
If _repositoryForMailItem.IsExternalMailItemExist(collection.ExternalMailItemID, collection.StartDate, collection.EndDate) = True Then
ModelState.AddModelError("", "Unable to add record. There is an overlapping record for this mail item")
End If

If ModelState.IsValid Then

'Check whether a cost has already been associated with the same mail item
' if there is already cost associated, then check whether the dates selected overlapse?

_repositoryForMailCost.Save(collection, "VivekBa")
End If
Return View()

Catch
Return View()
End Try
End Function

The error is thrown when i add the error in the addmodelerror, otherwise it works fine. please help

DropDownList

answered on 13 Mar 2013

3 answers

223 views

Filter Menu Customization Is Not Working

Hi,

I am using the Trial version of Kendo UI for ASP.NET MVC [2012.3.1315.340]. I am trying to customize the filter menu for a grid column as per the demo provide at the site - http://demos.kendoui.com/web/grid/filter-menu-customization.html

However, I cannot seem to get this to work. Below is my code

@(Html.Kendo().Grid<MyViewModel>()

.Name("importersGrid")

.Columns(columns =>

{

columns.Bound(m => m.Status).ClientTemplate("#=StatusText#").Filterable(filterable => filterable.UI("statusFilter");

columns.Bound(m => m.ActionOn).Format("{0:MMM dd, yyyy HH:mm}");

columns.Bound(m => m.Name).Title("Organization Name").ClientTemplate(@"# if (Status != 1) {# <a href=""Organizations/Show?id=#=PublicId#"">#=Name#</a> #} else {# <a href=""Importers/ApproveReject?id=#=PublicId#"">#=Name#</a>#}#");

columns.Bound(m => m.OrganizationCode);

columns.Bound(m => m.PrimaryLocation.City).Sortable(false);

columns.Bound(m => m.PrimaryLocation.Country).Sortable(false);

columns.Bound(m => m.PublicId).Sortable(false).Title("Actions").ClientTemplate(@"# if (Status==1) { #<a href=""Organizations/ApproveReject?id=#=PublicId#"" class=""approve-reject k-button"">Approve/Reject</a>#}#");

})

.Scrollable()

.Filterable(filterable => filterable.Extra(false).Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

)))

.Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn))

.Pageable(pageable => pageable.ButtonCount(5).PageSizes(new[] { 10, 25, 35 }).Info(true).Numeric(true).Messages(messages => messages.Display("Displaying {0} to {1} of {2} organizations")))

.DataSource(dataSource =>

dataSource

.Ajax()

.ServerOperation(true)

.Sort(sort => sort.Add("Status").Ascending())

.Read(read => read.Action("GetCompanies", "Organizations", new { Area = "MyCompanies" }).Type(HttpVerbs.Get))

))

And below is my JavaScript

<script type="text/javascript">

function statusFilter(element) {

element.kendoDropDownList({

dataSource: [

{ text: "A", value: "1" },

{ text: "B", value: "2" },

{ text: "C", value: "3" },

{ text: "E", value: "4" }

],

filter: "contains"

});

}

</script>

Now the MyViewModel.Status is an enum with values X, Y, Z.

When I run the application, and I get to see the Grid. The filter shows a dropdown of values X, Y, Z as per the Enum which is not what I expected. I wanted to see A, B,C, E as values and for some reason the statusFilter() function is never called. I set debug points using Web Dev tools in Chrome and it is never hit. I even placed the script tag above the point I declared the Grid. I see no JavaScript errors.

Please help!

Regards,
Ranganath Kini

Grid

answered on 13 Mar 2013

1 answer

100 views

Deleting row forces Dirty Cell Marker to disappear

You can reproduce this issue here on the "Batch Editing" demo: http://demos.kendoui.com/web/grid/editing.html

1. Edit any row. Note that the red "dirty cell marker" appears in the upper left corner.
2. Select a different row than the one you edited and Delete it.
3. The dirty cell marker on the first row disappears.

Is there any workaround for this issue?

Thanks!

Grid

answered on 13 Mar 2013

2 answers

94 views

Grid not populated with data

Being very new to Kendo UI, I'm trying to populate a grid using the following code:

In the <body> of an ascx file (it is hosted inside another page):

<body>
<script src="jquery.min.js"></script>
<script src="kendo.web.min.js"></script>
<script src="knockout-2.2.1.js"></script>
<script src="knockout-kendo.min.js"></script>
<script src="Jobs.js"></script>

<div id="grdJobs" data-bind="kendoGrid: grdJobs"></div>

<script type="text/javascript">
initJobs('<%=GetRootUrl() %>');
</script>
</body>

In Jobs.js:

function JobViewModel() {
var self = this;

self.jobData = new ko.observableArray([]);

self.grdJobs = {
data: self.jobData,
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
resizable: true,
columns: [
{ title: "State", field: "State" },
{ title: "Job ID", field: "JOBID" },
{ title: "Owner", field: "Owner" },
{ title: "Description", field: "Description" },
{ title: "Run State", field: "RunState" },
{ title: "Start Time", field: "StartTime" },
{ title: "End Time", field: "EndTime" },
{ title: "Elapsed Time", field: "ElapsedTime" },
{ title: "Progress", field: "Progress" },
{ title: "Agent", field: "agent" },
{ title: "Last Action", field: "LastAction" }
],
selectable: "single"
};
};

var g_oJobViewModel = new JobViewModel();
var g_strRootUrl;

function initJobs(strRootUrl) {
g_strRootUrl = strRootUrl;
ko.applyBindings(g_oJobViewModel);
loadJobs();
}

function loadJobs() {
var strJobsHandler = g_strRootUrl + "/JobResultViewerHandler";
var joData = { Operation: "Load", Agent: "All Agents", DateRange: "Today", Owner: "My Jobs", FromDate: new Date().toString(), ToDate: new Date().toString() };

$.ajax({
url: strJobsHandler,
type: 'post',
dataType: 'json',
data: JSON.stringify(joData),
success: function (joResult) {
var realData = [];

if (joResult.Data.length > 0) {
$.each(joResult.Data, function (index, obj) {
var arrayElem = {};

$.each(obj, function (key, value) {
var strKey = joResult.Dictionary[key];

if (strKey.indexOf(" ") > -1)
strKey = strKey.replace(" ", "");

arrayElem[strKey] = joResult.Dictionary[value];
});

realData.push(arrayElem);
});

g_oJobViewModel.jobData.removeAll();
ko.utils.arrayPushAll(g_oJobViewModel.jobData(), realData);
g_oJobViewModel.jobData.valueHasMutated();
}
},
error: function(xhr, errorType, exception) {
//log? or display message?
}
});
}

Now the problem:

If I leave "data: self.jobData" in the view model, I see the grid column headers, but loadJobs() DOES NOT get called. If I comment out "data: self.jobData" in the view model, loadJobs DOES get called and the server returns the correct data and it maps correctly to the grid colum fields accoring to looking at the data in a debug session of Google Chrome. However, in BOTH cases, I DO NOT see ANY data in the grid! This is VERY frustrating and I have NO idea idea what I am doing wrong. :( It seems like something is going wrong in the binding, resulting in the data not being displayed in the grid. Except for some differences in how a page is constructed in another part of the application where that page uses a C# HTMLWriter on the server to create the HTML and uses $(document).ready(function() to declare the kendoGrid, the rest of the JS code is virtually identical to what I've described above. Is this enough difference that that page would display data in its grid and mine doesn't? I would think not, but at this point, I don't know. It's too much work to rework my code like the other page so I'd like to resolve my grid data display issue within the above Javascript if this is at all possible with the least amount of effort. I just hope I'm not asking for too much. TIA

Grid

answered on 12 Mar 2013

0 answers

77 views

when defining columns is it possible to add custom data-attribute

EDIT: found it! Woohoo. headerAttributes { }

Grid

asked on 12 Mar 2013

1 answer

89 views

Pass 'this' in template

Hello,

I'm trying to pass a reference of a template'd checkbox in a grid to a Javascript function:

columns: [

...

{ title: " ", field: "someBoolean", sortable: true, template: "#= DisplayCheckbox(IDx, IDy, someBoolean, this) #" },

...

]

DisplayCheckbox looks like this:

function DisplayCheckbox(IDx, IDy, someBoolean, theCheckbox) {

return '<input type="checkbox" onclick="AFunction(' + IDx + ', ' + IDy + ', ' + theCheckbox + ')" ' + (someBoolean === true ? 'checked ' : '') + (isAuthorized === true ? '' : 'disabled') + ' />';

}

I'm passing a reference of the checkbox in order to update the underlying model on check-change event. I'm already doing other work via an AJAX call. The update of the underlying datasource is to simply allow for sorting to work until the next page refresh.

If I'm going about this bass-ackwards, can you point me in the right direction to go? If I am on the right track, you probably caught that I can't pass 'this' using the '#= ... #' template render directive. How would I do that?

Thanks

Templates

answered on 12 Mar 2013

1 answer

471 views

Treeview height after exand/collapse

Hi

How can i get the height of the kendo treeview after the node has been expanded/collapsed?

TreeView

answered on 12 Mar 2013

3 answers

238 views

Kendo splitter - 100 % height

Hi

I want to keep the both panes inside a container to have 100% height. The panes should fit to content. But it is taking the default height as 300px.

Splitter

answered on 12 Mar 2013