Mixing
Calling JS function on Kendo Grid doesn't work
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a Kendo Grid with some statistic columns to my items (count, average, percents, etc.). When I try to call a JS function to show maximum of 2 decimal places and trim trailing zeroes, the function doesn't work.
However, on browser console it works, so when I added a Timeout function to my JS, it works. But for several reasons, this is not the solution I want
The Kendo Grid for illustration:
@(Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Columns(columns =>
{
columns.Bound(t => t.Description).Title("Description").Width(50)
.ClientTemplate("#if (Description!= null) { if (IsNew == true) { #" + "<div style='text-align:right'>#: Description#</div>" + "# } else { #" + "<div style='text-align:right'><strong>#: Description#</strong></div>" + "# }} #");
columns.Bound(t => t.Count).Width(100).Title("Count").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Percent).Width(100).Title("Percent").Format("{0:##.## %}").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Average).Width(100).Title("Average").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right", @class = "StatisticAverage" });
})
.DataSource(dataBinding => dataBinding
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("DataGridStatistics", "Filter", new { id = Model.Id })
)
)
)
Currently working JS Function with Timeout:
$(document).ready(
function () {
window.setTimeout(function () {
$(".StatisticAverage").each(function (i, obj) {
if ($(this).text() != "") {
var textVal = $(this).text().replace(",", ".");
var numberVal = parseFloat(textVal);
r = (+numberVal).toFixed(2).replace(/([0-9]+(.[0-9]+[1-9])?)(.?0+$)/, '$1');
$(this).text(r);
}
})
}, 2000)
});
Any ideas how to make this work properly without the Timeout function? How to make sure, the JS function executes only when the Kendo Grid is fully loaded?
Thanks
javascript jquery kendo-grid
asked Jan 3 at 6:55
asdfokasdfok
73
add a comment |
I have a Kendo Grid with some statistic columns to my items (count, average, percents, etc.). When I try to call a JS function to show maximum of 2 decimal places and trim trailing zeroes, the function doesn't work.
However, on browser console it works, so when I added a Timeout function to my JS, it works. But for several reasons, this is not the solution I want
The Kendo Grid for illustration:
@(Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Columns(columns =>
{
columns.Bound(t => t.Description).Title("Description").Width(50)
.ClientTemplate("#if (Description!= null) { if (IsNew == true) { #" + "<div style='text-align:right'>#: Description#</div>" + "# } else { #" + "<div style='text-align:right'><strong>#: Description#</strong></div>" + "# }} #");
columns.Bound(t => t.Count).Width(100).Title("Count").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Percent).Width(100).Title("Percent").Format("{0:##.## %}").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Average).Width(100).Title("Average").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right", @class = "StatisticAverage" });
})
.DataSource(dataBinding => dataBinding
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("DataGridStatistics", "Filter", new { id = Model.Id })
)
)
)
Currently working JS Function with Timeout:
$(document).ready(
function () {
window.setTimeout(function () {
$(".StatisticAverage").each(function (i, obj) {
if ($(this).text() != "") {
var textVal = $(this).text().replace(",", ".");
var numberVal = parseFloat(textVal);
r = (+numberVal).toFixed(2).replace(/([0-9]+(.[0-9]+[1-9])?)(.?0+$)/, '$1');
$(this).text(r);
}
})
}, 2000)
});
Any ideas how to make this work properly without the Timeout function? How to make sure, the JS function executes only when the Kendo Grid is fully loaded?
Thanks
javascript jquery kendo-grid
asked Jan 3 at 6:55
asdfokasdfok
73
add a comment |
I have a Kendo Grid with some statistic columns to my items (count, average, percents, etc.). When I try to call a JS function to show maximum of 2 decimal places and trim trailing zeroes, the function doesn't work.
However, on browser console it works, so when I added a Timeout function to my JS, it works. But for several reasons, this is not the solution I want
The Kendo Grid for illustration:
@(Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Columns(columns =>
{
columns.Bound(t => t.Description).Title("Description").Width(50)
.ClientTemplate("#if (Description!= null) { if (IsNew == true) { #" + "<div style='text-align:right'>#: Description#</div>" + "# } else { #" + "<div style='text-align:right'><strong>#: Description#</strong></div>" + "# }} #");
columns.Bound(t => t.Count).Width(100).Title("Count").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Percent).Width(100).Title("Percent").Format("{0:##.## %}").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Average).Width(100).Title("Average").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right", @class = "StatisticAverage" });
})
.DataSource(dataBinding => dataBinding
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("DataGridStatistics", "Filter", new { id = Model.Id })
)
)
)
Currently working JS Function with Timeout:
$(document).ready(
function () {
window.setTimeout(function () {
$(".StatisticAverage").each(function (i, obj) {
if ($(this).text() != "") {
var textVal = $(this).text().replace(",", ".");
var numberVal = parseFloat(textVal);
r = (+numberVal).toFixed(2).replace(/([0-9]+(.[0-9]+[1-9])?)(.?0+$)/, '$1');
$(this).text(r);
}
})
}, 2000)
});
Any ideas how to make this work properly without the Timeout function? How to make sure, the JS function executes only when the Kendo Grid is fully loaded?
Thanks
javascript jquery kendo-grid
asked Jan 3 at 6:55
asdfokasdfok
73
I have a Kendo Grid with some statistic columns to my items (count, average, percents, etc.). When I try to call a JS function to show maximum of 2 decimal places and trim trailing zeroes, the function doesn't work.
However, on browser console it works, so when I added a Timeout function to my JS, it works. But for several reasons, this is not the solution I want
The Kendo Grid for illustration:
@(Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Columns(columns =>
{
columns.Bound(t => t.Description).Title("Description").Width(50)
.ClientTemplate("#if (Description!= null) { if (IsNew == true) { #" + "<div style='text-align:right'>#: Description#</div>" + "# } else { #" + "<div style='text-align:right'><strong>#: Description#</strong></div>" + "# }} #");
columns.Bound(t => t.Count).Width(100).Title("Count").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Percent).Width(100).Title("Percent").Format("{0:##.## %}").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(t => t.Average).Width(100).Title("Average").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right", @class = "StatisticAverage" });
})
.DataSource(dataBinding => dataBinding
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("DataGridStatistics", "Filter", new { id = Model.Id })
)
)
)
Currently working JS Function with Timeout:
$(document).ready(
function () {
window.setTimeout(function () {
$(".StatisticAverage").each(function (i, obj) {
if ($(this).text() != "") {
var textVal = $(this).text().replace(",", ".");
var numberVal = parseFloat(textVal);
r = (+numberVal).toFixed(2).replace(/([0-9]+(.[0-9]+[1-9])?)(.?0+$)/, '$1');
$(this).text(r);
}
})
}, 2000)
});
Any ideas how to make this work properly without the Timeout function? How to make sure, the JS function executes only when the Kendo Grid is fully loaded?
Thanks
javascript jquery kendo-grid
javascript jquery kendo-grid
asked Jan 3 at 6:55
asdfokasdfok
73
asked Jan 3 at 6:55
asdfokasdfok
73
asked Jan 3 at 6:55
asdfokasdfok
73
asked Jan 3 at 6:55
asdfokasdfok
73
asked Jan 3 at 6:55
asdfokasdfok
73
73
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Try using the dataBound event instead of the timeout. This will be triggered after data from the dataSource is bound to the grid.
dataBound
Code sample:
Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Events(e => e.DataBound("onDataBound"))
.Columns....
function onDataBound() {
// handle the data change event here...
}
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017619%2fcalling-js-function-on-kendo-grid-doesnt-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try using the dataBound event instead of the timeout. This will be triggered after data from the dataSource is bound to the grid.
dataBound
Code sample:
Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Events(e => e.DataBound("onDataBound"))
.Columns....
function onDataBound() {
// handle the data change event here...
}
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
add a comment |
Try using the dataBound event instead of the timeout. This will be triggered after data from the dataSource is bound to the grid.
dataBound
Code sample:
Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Events(e => e.DataBound("onDataBound"))
.Columns....
function onDataBound() {
// handle the data change event here...
}
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
add a comment |
Try using the dataBound event instead of the timeout. This will be triggered after data from the dataSource is bound to the grid.
dataBound
Code sample:
Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Events(e => e.DataBound("onDataBound"))
.Columns....
function onDataBound() {
// handle the data change event here...
}
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
Try using the dataBound event instead of the timeout. This will be triggered after data from the dataSource is bound to the grid.
dataBound
Code sample:
Html.Kendo().Grid<StatisticsItemsModel>()
.Name("grid-list")
.Events(e => e.DataBound("onDataBound"))
.Columns....
function onDataBound() {
// handle the data change event here...
}
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
edited Jan 4 at 9:09
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
answered Jan 3 at 7:16
RoshanRoshan
1,8091921
1,8091921
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
add a comment |
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
That might work, but unfortunately I have no idea how to make it work
– asdfok
Jan 4 at 8:26
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Updated the answer with sample and doc.
– Roshan
Jan 4 at 9:10
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
Thanks, this works great :)
– asdfok
Jan 4 at 10:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017619%2fcalling-js-function-on-kendo-grid-doesnt-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
