We Keep Coding

Show last group in tabulator

I use tabulator, is there any other possibility or a ready-made example of functions to show only the last group?
var lastGr = function(value, count, data, group){
return group(count) > group(count)-1; // Show only the last group
};
var table = new Tabulator("#tables", {
groupStartOpen:lastGr,
...

Why do you want to show only the last group are you trying to sum all
the rows, etc.
If yes then check documentation
If you want to update the table with only last row, you can do
table.clearData();
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true);
pass the last row to add Data Function as in documentation

Date/DateTime Filters on client side JSON Model

I have a JSON model that is bound to a sap.m.Table. I am trying to filter data based on a column "Date" (bound to property[CreatedOn] of the model) which the service returns in the JSON Object Format ("/Date(timeStamp)"). The table is as below:
sample Date from server:
I am trying to filter the table on the client side but I am not sure on how to implement date filters on the client side. The date displayed are formatted based on
sap.ui.model.type.Date({pattern: 'dd/MM/YYYY'})
The filtering code looks as below:
var fromD = this.getView().byId("idKMFilterPaneDocDateF").getValue() ? new Date(this.getView().byId("idKMFilterPaneDocDateF").getValue()) :
undefined;
var dtFilter = new sap.ui.model.Filter({
path: "CreatedOn",
operator: "EQ",
value1: "dateTime'" + fromD.toJSON() + "'"
});
var binding = oTable.getBinding("items");
binding.filter([filter], "Application");
binding.refresh();
When I execute the above code, I always get "NO Data". I need to implement the "BT" filters as well based on user selection criteria but can't get it to work with "EQ" itself.

Create Custom Filter
var fromD = this.getView().byId("idKMFilterPaneDocDateF").getValue() ? new Date(this.getView().byId("idKMFilterPaneDocDateF").getValue()) :undefined;
var dtFilter = new sap.ui.model.Filter("CreatedOn");
dtFilter.fnTest = function(value) {
//check what value are you getting here. If its string, get only time out of it
//Compare the date values(in milliseconds)
fromD.setHours(0); //get rid of time and concern about date
fromD.setMinutes(0);
fromD.setSeconds(0);
fromD.setMilliseconds(0);
//value should be date object, else change accordingly..
if(fromD.getTime() === value.getTime()){
return true;
}
return false;
};
PS:If you can get working JSFiddle with your coding context, I could debug.

populate dropdownlist from jsonresult using .each

I have a dropdown list that I need to dynamically populate based on the selection of another. It all works up to the point that I have to render the new data in the dropdown list after clearing the list first. The list clears, but then fails to populate the new data being returned from the controller. I am attempting to use .each for this.
Here's the controller method in question:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult UpdateDocumentSubType(string DocumentType)
{
List<SelectListItem> DocumentSubTypeList = new List<SelectListItem>();
PropertyModel model = new PropertyModel();
int DocTypeID = 0;
//get DocTypeID
DocTypeID = model.GetDocTypeID(DocumentType);
//gets new document subtype list
DocumentSubTypeList = model.GetDocumentSubTypes(DocTypeID);
//return document subtype list
return Json(DocumentSubTypeList, JsonRequestBehavior.AllowGet);
}
As you can see, I'm returning a serialized json result of List.
On the view, I have the following:
$.ajax({
url: '#Url.Action("UpdateDocumentSubType","Document")',
type: 'GET',
dataType: "json",
data: { DocumentType: SelectedDocTypeText },
async: true,
success: function (data) {
var select = $("#Docs_DocumentSubTypeID");
select.empty();
$.each(data, function (index, item) {
select.append($('<option></option>').val(item).html(index));
});
}
});
This is where it all falls apart. The code hits select.empty(): and executes it successfully, but then as the "text" value of the SelectListItem, it instead provides the index element of the array of objects. Essentially, the tags render something like this:
<option value="[object Object]">1</option>
<option value="[object Object]">2</option>
<option value="[object Object]">3</option>
<option value="[object Object]">4</option>
I have verified that the data IS being passed. When I take the .each and put it in its own function, call that function, and add "debugger;" to it, I can see the data in the resulting "data" as four elements of [object, object].
As you may have guessed, JQuery isn't my strong suit, so any assistance would be appreciated. :)

First you should not be returning List<SelectListItem> in your UpdateDocumentSubType method - there is no point returning the extra properties of SelectListItem back to the client when you never use them. All you need to return is an anonymous object containing 2 properties, one for the option value, and one for its display text.
You have not shown the model,but assuming it contains properties say int ID and string Name, then it would be (say)
var data = db.YourTable.Where(...).Select(x => new
{
Value = x.ID,
Text = x.Name
};
return Json(data, JsonRequestBehavior.AllowGet);
The reason why your seeing value="[object Object]" is that your returning an array of complex objects so item in $.each(data, function (index, item) { is referring to an object containing properties Value, Selected, Text, Group etc. (i.e. the properties of SelectListItem), so you script needs to be
$.each(data, function (index, item) {
select.append($('<option></option>').val(item.Value).html(item.Text));
});

I am new as well so this might not be correct.
Try
$('<option></option>').val(item[index]).html(index));
or
$('<option></option>').val(item[0]).html(index));
instead of what you wrote.
I need some more information. Can you share the github repo?
I am working on something very similar and this is what I did:
(Look at render function from line 85 to 96)
https://github.com/stephenhu3/codepal/blob/development/js/youtubeComponent.js
It worked for me.

How to implement Dynamic data for chart in MVC?

Im new in ASP.NET MVC, im doing on my own project and i have some problems. I want to draw line chart from with data from database.
I hope you will understend me (bad english, sorry):
I have table of metals, after i click on specific one, i want to see chart that show me price of metal by date.
For example, i click on Copper;
PricePoint is my Controller, wich action shoud i call here ?
#Html.DisplayFor(modelItem => item.name)
I call DrawChart Action in PricePoint controller:
public ActionResult DrawChart()
{
return View();
}
In same controlller i create action that add data from database to json and return it.
public ActionResult Statistics(int ?id) {
// here i pull data from database to stats
return Json(stats,JsonRequestBehavior.AllowGet);
}
This is my view page where i want to show chart, DrawChart.cshtml file.
<script type="text/javascript">
$.get('#Url.Action("Statistics")', function(result){
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
result
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
});
</script>
When i click on metal, DrawChart action return view DrawChart.cshtml, then JavaScript run Statistics function and populate data for chart, is that how this works?
I have blank page, with no result, when i type in url: http://localhost:50101/PricePoint/DrawChart
When url is next, i see json data from database:
http://localhost:50101/PricePoint/Statistics
I dont know where is problem. When i put example data in script, like this
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
i see line chart as expected. Again, sorry for bad english, hope you can help me and i hope you understend my question.

I had a play with it and I managed to display the chart just fine. Here are a few things to watch out for that may be the cause of your problem:
1) your call to $.get('#Url.Action("Statistics")' is not passing in an id though you declared one on your action public ActionResult Statistics(int ?id). Considering it's nullable maybe you are prepared to serve a default set of data if no id is passed, but thought I'd mention in case that is what's affecting the logic of your database retrieval and affecting the results returned
2) I noticed that your link to the DrawChart action passed in new { id = item.ID } however this not captured on the server-side since your DrawChart action is missing the parameter, it should be something like : public ActionResult DrawChart(id). I understand this could've been for the sake of simplifying it just to post here and may not affect anything but thought I'd point it out
3) Be careful about what you are returning from the MVC action. The stats object in return Json(stats,JsonRequestBehavior.AllowGet); should be a C# array containing the properties value and year for each object in the array, so something like :
new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};
If you just pass a string to the return Json() statement it won't work properly since it'll think it's just one long json string not a json array object.
If you want to return a string rather than an actual serialized c# collection then you can use something like : return Content(dataString, "application/json");
4) Case matters! Make sure that the json returned contains properties with names of year and value for each entry just as you declared in your morris object on the xkey and ykey values. This can be quite a subtle trap since return Json() will serialize your json objects exactly as they are declared in your classes and while the tendency in javascript code is to start variables and properties with lower-case in .Net properties are usually declared with upper-case such as public int Year { get; set; }
Conclusion:
I got it working by returning this code :
public ActionResult Statistics(int ?id) {
var data = new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};
return Json(data,JsonRequestBehavior.AllowGet);
}
And on your Morris initialization code remove the array brackets from the data declartion so data : result and not data : [result]
Your first step to troubleshoot this is to look at what your Statistics method is returning. You can do this really easily by testing your web site in Chrome, for instance, and hitting F12 then choose the Network tab. Then Ctrl+F5 the page and find the call to the server in the results pane. Click on it and then choose Response and keep troubleshooting your method till it returns what you need.
If the data is in a wrong format and doesn't contain the keys that Morris expects Morris will throw an error saying Uncaught TypeError: Cannot read property 'match' of undefined . Keep trying till you make that go away and hopefully you should see your graph :)
PS: one last thing, I'd wrap the Morris init code in a $(document).ready() call

When i send data (values and dates) from function (manualy input), everything is ok, json file is populeted god, and i see chart, but when i send data from database, there is no chart but i see that json file is also populeted.
Here is code:
public class YearlyStat
{
public string year { get; set; }
public double value { get; set; }
}
public ActionResult Statistics(int? id)
{
//var result = db.pricepoints.Where(r => r.commodityID.Equals(id));
var items = from item in db.pricepoints
where (item.commodityID == id)
select item;
var stats = new List<YearlyStat>();
foreach (var item in items)
{
stats.Add(new YearlyStat
{
year = item.date_of_price.ToShortDateString(),
value = item.value
});
}
//but this work's
//string s = "2.2.2002";
//double v = 20.20;
//stats.Add(new YearlyStat { year = s, value = v });
//or
//stats.Add(new YearlyStat { year = "2.2.2002", value = 20.20 });
return Json(stats, JsonRequestBehavior.AllowGet);
}
Types are string and double in both cases...

How to append database values to JSON data

I have a JSON which lists the values from database. Below is the JSON data of 2 rows from the database.
[{"Name":"P1","Description":"pd1","Value":"v1","Attribute":"a1"},{"Name":"P1","Description":"pd1","Value":"v2","Attribute":"a2"}]
database values are the result of a left join query. Only 'Value' and 'Attribute' fields are different. Can I append that fields to JSON instead of multiple sets of record? I know there is 'push' to do this, but I am unaware where and how to use this in my code. below is the code for fetching values from db and serializing the values.
GetProfileDataService GetProfileDataService = new BokingEngine.MasterDataService.GetProfileDataService();
IEnumerable<ProfileData> ProfileDetails = GetProfileDataService.GetList(new ProfileSearchCriteria { Name = strProfileName });
JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
string strSerProfileDetails = javaScriptSerializer.Serialize(ProfileDetails);
context.Response.ContentType = "text/json";
context.Response.Write(strSerProfileDetails);
Below is my getJSON
$(document).ready(function () {
$.getJSON('ProfileHandler.ashx', { 'ProfileName': 'Profile 1' }, function (data) {
$.each(data, function (k, v) {
alert(v.Attribute+' : '+v.Value);
});
});
});
Please help me here.

There are several things you can do.
Store value and attribute as arrays:
[{"Name":"P1","Description":"pd1","Value":["v1", "v2"],"Attribute":["a1", "a2"]}]
Or store them as a 'symbol'-separated string:
[{"Name":"P1","Description":"pd1","Value":"v1;v2"],"Attribute":"a1;a2"]}]
In order to use the first case, you'll have to try and figure out how to format the ProfileDetails in order to have javaScriptSerializer.Serialize parse it correctly. You will likely have to convert your data first in order for this to work (i.e. convert value and attribute to arrays).
For the second case to work you could modify your GetProfileDataService.GetList method so that values and attributes are merged to symbol-separated strings (something like this: GROUP BY to combine/concat a column)