or
3 answers
216 views
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
And below is my JavaScript
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
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)) ))<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>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
Atanas Korchev
Telerik team
answered
on
13 Mar 2013
1 answer
95 views
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!
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!
Vladimir Iliev
Telerik team
answered
on
13 Mar 2013
2 answers
90 views
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
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
Alexander Valchev
Telerik team
answered
on
12 Mar 2013
0 answers
60 views
EDIT: found it! Woohoo. headerAttributes { }
1 answer
81 views
Hello,
I'm trying to pass a reference of a template'd checkbox in a grid to a Javascript function:
DisplayCheckbox looks like this:
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
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') + ' />';}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
Zeke Palmolive
Top achievements
Rank 1
Rank 1
answered
on
12 Mar 2013
1 answer
462 views
Hi
How can i get the height of the kendo treeview after the node has been expanded/collapsed?
How can i get the height of the kendo treeview after the node has been expanded/collapsed?
Dimo
Telerik team
answered
on
12 Mar 2013
3 answers
228 views
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.
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.
Dimo
Telerik team
answered
on
12 Mar 2013
9 answers
344 views
Hello!
I'm having a bit of a problem with the uploader all of a sudden -- I'm thinking that it's happened since the latest version of kendoui (2012.3.1114), but I might be wrong with that.
I have an input field in my view:
<input id="personalDetails_files" type="file" />
and some code to wire it up:
This works great in the latest version of IE/Windows 8, but when I try it in Chrome it fails when the file is uploaded to the server.
The request payload in Chrome>Network Tab is: ------WebKitFormBoundarygQUKJsVmVusYpfYS--
So, it appears that the uploaded file is not getting added to the submit form that goes to the server.
Any ideas as to why this is happening?
Thanks!
I'm having a bit of a problem with the uploader all of a sudden -- I'm thinking that it's happened since the latest version of kendoui (2012.3.1114), but I might be wrong with that.
I have an input field in my view:
<input id="personalDetails_files" type="file" />
$("#personalDetails_files").kendoUpload({ async: { saveUrl: "/Uploader/SaveUserThumbnail.aspx", removeUrl: "/Uploader/RemoveUserThumbnail.aspx", autoUpload: true, multiple: false }, select: function (e) { if ($('#personalDetails_files').parents(".k-upload").find('.k-file').length >= 1) { e.preventDefault(); } }, upload: function (e) { debugger; }, success: function (e) { if (e.operation == "remove") { //k-upload-button $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').show(); $("#imgPersonalDetails_Thumbnail")[0].src = "/styles/" + currentTheme + "/default.png"; } else { //k-upload-button $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').hide(); $("#imgPersonalDetails_Thumbnail")[0].src = "/UserThumbnails/" + window.currentUser.ID + "_" + e.files[0].name; } //remove the select button }, remove: function (e) { }, error: function (e) { }});This works great in the latest version of IE/Windows 8, but when I try it in Chrome it fails when the file is uploaded to the server.
The request payload in Chrome>Network Tab is: ------WebKitFormBoundarygQUKJsVmVusYpfYS--
So, it appears that the uploaded file is not getting added to the submit form that goes to the server.
Any ideas as to why this is happening?
Thanks!
Vladimir Iliev
Telerik team
answered
on
12 Mar 2013
0 answers
209 views
I have a Grid. Add & Edit has been done through modal popup . For modal pop-up i have used template. I want to have multiple forms in modal pop-up . There each form should have its own validation.
sample code :
<div id="CurrentDiv">
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.Name)
</div>
<div class="editor-field">
<input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="StationName"></span>
</div>
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.ChannelID)
</div>
<div class="editor-field">
<input name="ChannelID" id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text"
required="required" validationMessage="Channel Required!"
data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled" />
<span class="k-invalid-msg" data-for="ChannelID"></span>
<a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
</div>
</div>
div id="divChannel" style="display:none;">
<div class="editor-label">
Name :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannleName"></span>
</div>
<div class="editor-label">
Description :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannelDescrip"
name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannelDescrip"></span>
</div>
<div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
<script type="text/javascript" language="javascript">
function SaveChannel() {
$.ajax({
type: "POST",
url: "/Channel/CreateAjax",
data: {
Id: '0',
Name: $("#ChannleName").val(),
Descrip: $("#ChannelDescrip").val(),
Enabled: true
},
error: function (error) {
alert(error);
},
success: function (response) {
alert(response);
}
})
return false;
}
function showHideChannel(show) {
if (show) {
$("#divChannel").show();
$('#CurrentDiv').hide();
$(".k-edit-form-container").find(".k-grid-update").hide();
$(".k-edit-form-container").find(".k-grid-cancel").hide();
$(".k-window-title").html("Add Channel");
} else {
dsChannelDropdown.read();
if ($("#ChannleName").val() != "") {
var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
ddlChannelID.text($("#ChannleName").val());
}
$("#divChannel").hide();
$('#CurrentDiv').show();
$(".k-edit-form-container").find(".k-grid-update").show();
$(".k-edit-form-container").find(".k-grid-cancel").show();
$(".k-window-title").html("Add/Edit Station");
}
}
</script>
on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .
sample code :
<div id="CurrentDiv">
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.Name)
</div>
<div class="editor-field">
<input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="StationName"></span>
</div>
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.ChannelID)
</div>
<div class="editor-field">
<input name="ChannelID" id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text"
required="required" validationMessage="Channel Required!"
data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled" />
<span class="k-invalid-msg" data-for="ChannelID"></span>
<a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
</div>
</div>
div id="divChannel" style="display:none;">
<div class="editor-label">
Name :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannleName"></span>
</div>
<div class="editor-label">
Description :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannelDescrip"
name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannelDescrip"></span>
</div>
<div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
<script type="text/javascript" language="javascript">
function SaveChannel() {
$.ajax({
type: "POST",
url: "/Channel/CreateAjax",
data: {
Id: '0',
Name: $("#ChannleName").val(),
Descrip: $("#ChannelDescrip").val(),
Enabled: true
},
error: function (error) {
alert(error);
},
success: function (response) {
alert(response);
}
})
return false;
}
function showHideChannel(show) {
if (show) {
$("#divChannel").show();
$('#CurrentDiv').hide();
$(".k-edit-form-container").find(".k-grid-update").hide();
$(".k-edit-form-container").find(".k-grid-cancel").hide();
$(".k-window-title").html("Add Channel");
} else {
dsChannelDropdown.read();
if ($("#ChannleName").val() != "") {
var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
ddlChannelID.text($("#ChannleName").val());
}
$("#divChannel").hide();
$('#CurrentDiv').show();
$(".k-edit-form-container").find(".k-grid-update").show();
$(".k-edit-form-container").find(".k-grid-cancel").show();
$(".k-window-title").html("Add/Edit Station");
}
}
on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .
0 answers
190 views
Hi,
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the child data is to be fetched. I tried changing the read URL from script but it is defaulted back when the user expands the tree which should not be the case.
Below is my tree
@(Html.Kendo().TreeView()
.Name("MyTree")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read.Url("../api/User/?getAll=false").Type(HttpVerbs.Get))
)
)
I then change the read url in script as following
var tree = $("#MyTree").data("kendoTreeView");
tree.dataSource.transport.options.read.url = "../api/User/?getChildren=true";
But when the tree is expanded the URL is still /api/User/?getAll=false&id=1 instead of ./api/User/?getChildren=true&id=1
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the child data is to be fetched. I tried changing the read URL from script but it is defaulted back when the user expands the tree which should not be the case.
Below is my tree
@(Html.Kendo().TreeView()
.Name("MyTree")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read.Url("../api/User/?getAll=false").Type(HttpVerbs.Get))
)
)
I then change the read url in script as following
var tree = $("#MyTree").data("kendoTreeView");
tree.dataSource.transport.options.read.url = "../api/User/?getChildren=true";
But when the tree is expanded the URL is still /api/User/?getAll=false&id=1 instead of ./api/User/?getChildren=true&id=1
