or
2 answers
112 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
99 views
EDIT: found it! Woohoo. headerAttributes { }
1 answer
106 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
508 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
263 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
411 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
251 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
218 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
1 answer
171 views
I'm having difficulty getting the TimePicker binding with my TimeSpan properties. I have a ListView where I want to show the timespan properties however it only says [Object object]. With the DateTime object these properties are displayed but not with the TimeSpan object. Any ideas? I haven't seen any examples using the timespan object even though it is supported, I'm using the fluent syntax. Thanks
Petur Subev
Telerik team
answered
on
12 Mar 2013
2 answers
222 views
Hi,
I have an issue with TabStrip content pane which seems to keep initial height or the height set after the first resize operation. I tried a couple of solution found on the forums and i did my own but it still has the same issue. The solution available on http://jsfiddle.net/dimodi/8etzB/ has the same problem. To see it please do the following: 1- resize once and go to next tab (this part is working nice), 2-now resize second time and go to other tab. Other tab will be activate with previous height. Now back to the tab which was active during second resize. The height of this tab will be back to previous height.
I am not sure but it seems that tabstrip keeps somewhere the height of the first resize and then overwrites the value i set on resize event.
I need tab strip content height to be set to available height after each resize.
Thanks,
I have an issue with TabStrip content pane which seems to keep initial height or the height set after the first resize operation. I tried a couple of solution found on the forums and i did my own but it still has the same issue. The solution available on http://jsfiddle.net/dimodi/8etzB/ has the same problem. To see it please do the following: 1- resize once and go to next tab (this part is working nice), 2-now resize second time and go to other tab. Other tab will be activate with previous height. Now back to the tab which was active during second resize. The height of this tab will be back to previous height.
I am not sure but it seems that tabstrip keeps somewhere the height of the first resize and then overwrites the value i set on resize event.
I need tab strip content height to be set to available height after each resize.
Thanks,
