I am a bit confused about how to bind the response in my Kendo grid.
Currently, I am receiving the response from the service as shown below:
My goal is to display the response in the Grid in the format illustrated below:
I am utilizing AngularJS, MVC, and Kendo for Grids.
Should I modify my response data in the Grid using MVC or AngularJS?
Thank you in advance
If you are in favor of letting the grid's data source manage data grouping and aggregation, you can simply utilize the grid's data source functionality. The following code snippet demonstrates this using razor syntax, although there is a comparable representation in Kendo UI JS.
DataSource(dataSource => dataSource
.Server()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.Amount).Sum();
})
.Group(groups => groups.Add(p => p.CustomerName)
)
It seems native grid functionality doesn't support what you're trying to accomplish, but there is a workaround available by altering your data structure to fit the desired view.
I've made some modifications to a fiddle someone else created here: http://jsfiddle.net/SugMK/47/
To begin with, you need to group your data based on a unique identifier like uid:
var result = _.groupBy(result, (item) => { return item.uid });
Next, iterate through the resulting object which will have a structure similar to:
{
uid1: [
{row1_with_uid1},
{row2_with_uid1}
],
uid2: [
{row1_with_uid2},
{row2_with_uid2}
]
}
And then aggregate the necessary rows using custom logic. In your case, combining two code fields as text with a br separator:
_.forEach(result, (items) => {
var newItem = items[0]; // set default.
items.splice(0, 1); // remove first item from aggregation array
_.forEach(items, (item) => { newItem.code = newItem.code + "<br />" + item.code; }); // aggregate items
newResult.push(newItem); // save aggregated item
});
Finally, make sure to set the encoded parameter of the aggregated field (code) to false so that the br's are interpreted as HTML, not text:
{ field: "code", title: "multiline", encoded: false }
P.S. While I believe a better solution can be devised, I hope this example helps in understanding the concept.
After spending hours searching for a way to execute my Mocha unit tests in Jenkins for my Express JS application, I am still struggling to find a solution. While writing the tests themselves is relatively easy, integrating them with my app has proven to b ...
In my React application, I have a menu that contains a sub-menu for each item. Whenever an item is clicked, the sub-menu slides in and the title of the menu changes accordingly. To enhance user experience, I aim to animate the title change with a smooth fa ...
I have developed an API that I am currently trying to access from another application. Despite using Newtonsoft.JSON for both serializing and deserializing the JSON data, I am running into a conversion error with the following InnerException: {"Could not ...
Attempting to retrieve JSON data from a PHP file and display it. Managed to successfully request the data via AJAX and log it to the console. (At least one part is working). Tried implementing a callback to ensure that the script waits for the data befor ...
Working on a D3 svg chart with built-in tooltips using the d3-tip library. Check out the original code here. Utilizing Django as the back end to populate log count per year from datetime. Successfully populated axis and labels except for the bars. Here i ...
I have developed a program that extracts information from a JSON object and showcases it on a webpage, specifically focusing on Public Bike Stations. The JSON object includes the latitude and longitude of each station, making it easy to locate them. My cu ...
I have a single string that looks like this: "Opportunity >> Source = Email >> Status = New >> Branch = Mumbai" My goal is to truncate the string from the last occurrence of >>. Essentially, I want the resulting string to be: "Op ...
Recently, I discovered the potential of using the AutoValues (GSON) extension to significantly accelerate our json data parsing process. To my surprise, it resulted in parsing our json twice as quickly. However, there's a dilemma I'm facing - wh ...
I've been working with a jQuery ajax script that looks like this: $.ajax({ type: "POST", url: "Main/receive", // the method we are calling contentType: "application/json; charset=utf-8", data: JSON. ...
As per information from a Stack Overflow discussion, Math.random() in JavaScript seems to rely on the browser or operating system, indicating that there is no standard algorithm for generating uniform random variables in JavaScript. Another discussion thre ...
Currently, I am facing an issue with my website that is being loaded into the webbrowser control of my form. Despite loading the document successfully, when I try to retrieve the webbrowser.documenttext, I cannot seem to find a specific table that should b ...
When using the Angular UI Select2 directive with tags defined on an input field located inside a custom directive, initialization may not occur correctly, resulting in an error message in the console: query function not defined for Select2 tagging This i ...
I am familiar with using $emit to pass data from child components to parent components in VueJS, but I am trying to retrieve that value in a JavaScript function. Here is my situation: Parent Component created () { this.$on('getValue', func ...
I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...
I have been working on a project using React and Bootstrap. I decided to switch to material-ui, which went smoothly except for the radio buttons. Below is the original code that worked well: <label> <input type={that.props.questionType} name ...
I stumbled upon a fantastic script for highlighting HTML table rows and it's working perfectly: I decided to modify the onclick event to onmouseover and included additional code to select a cell by clicking on it. Now I can select, check which one is ...
I'm currently in the process of setting up jsdom on my system. I found a helpful guide at but encountered the following issue: C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform .Targets(23,7): e ...
I encountered an issue with a piece of code that is working perfectly on one Windows Server 2008 R2 but not on a fresh installation of the same server. The code seems to be causing some text files to get locked on the new server, which does not happen on t ...
I'm facing an issue with my code that deletes an exam from a list of exams on a page, but the deleted exam still shows up until the page is manually refreshed. This pattern works correctly on other pages, so I don't understand why it's not w ...
There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...