Setting the value of textfield on combobox change- easyui - jquery-easyui

Below is the part of my rows. I need to change the value of BudgetLineItemCode field when combobox value is changed.
{ title: 'Index', field: 'RootLevel', width: 50, editor: { 'type': 'validatebox', 'options': { required: true}} },
{ field: 'PHeading', title: 'Heading', width: 240,
formatter: function (value) {
for (var i = 0; i < CItems.length; i++) {
if (CItems[i].heading.toLowerCase() == value.toLowerCase()) {
return CItems[i].heading;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'heading',
textField: 'heading',
data: CItems,
required: true
onSelect: function (record) {
var selrow = $('#trgrid').treegrid('getSelected');
var rowIndex = $('#trgrid').treegrid('find',row.BudgetDetailID)
var editors =$('#trgrid').treegrid('getEditors',selrow.BudgetDetailID);
var codeEditor = editors[2];
$(codeEditor.target).text('setValue', 'newval');
}
}
}{ title: 'Code', field: 'BudgetLineItemCode', width: 50, editor: { 'type': 'text'} }
Also,
One more question. There is no onChange event for combobox. Is there any way we can get past this. I mean like i may want to check for the code as user types in the combobox.

for the first part you can do
$(codeEditor.target).val('newval');
since setters for validatebox is .val(),
docs here..
and for second easyui combobox does that by default.. or you can use keyhandler
editor: {
type: 'combobox',
options: {
valueField: 'heading',
textField: 'heading',
data: CItems,
required: true,
keyHandler: {
up: function(){},
down: function(){},
enter: function(){},
query: function(q){ console.log(q)} //<----here
},
onSelect: function (record) {
var selrow = $('#trgrid').treegrid('getSelected');
var rowIndex = $('#trgrid').treegrid('find',row.BudgetDetailID)
var editors =$('#trgrid').treegrid('getEditors',selrow.BudgetDetailID);
var codeEditor = editors[2];
$(codeEditor.target).text('setValue', 'newval');
}
}

Code:
onSelect: function(rec){
var row = $('#tblCoursefaculty').datagrid('getSelected');
var rowIndex = $('#tblCoursefaculty').datagrid('getRowIndex', row)
var editors = $('#tblCoursefaculty').datagrid('getEditors', rowIndex);
var ed_fc_co_section = editors[8];
$(ed_fc_co_section.target).val(rec.co_section);
var ed_fc_co_course_cr = editors[9];
$(ed_fc_co_course_cr.target).val(rec.co_course_cr); }
} }">Course</th>
<th data-options="field:'fc_co_section',width:50,align:'left',editor:'text'">Section</th>
<th data-options="field:'fc_co_course_cr',width:50,align:'left',editor:'text'">Credit Hour</th>

Related

kendo ui Clickable row

I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});

How to display extra data in highcharts bubble chart tooltip with datetime x-axis

I am trying to display some more data in highcharts bubble chart tooltip with no success. How can I access this.point.comments inside the tooltip formatter?
The bubble chart I am using has datetime as x-axis.
$('#chart-bubble').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
plotBorderWidth: 1
},
title: {
text: 'Risk & Profit Vs Date'
},
tooltip: {
useHTML: true,
formatter: function(){
var expectedProfit = '';
if( this.point.z !== 'none' )
{
expectedProfit = formatExpectedProfit(this.point.z);
}
var tooltip = '<table class="table table-bordered" style="width: 300px;"><tbody><tr><td colspan="2"><h5>'+this.series.name.substr(0,75)+'...</h5></td></tr>' +
'<tr><td>Risk:</td><td>'+this.y+'</td></tr>';
if( expectedProfit !== '' )
{
tooltip += '<tr><td>Profit:</td><td>'+expectedProfit+'</td></tr>';
}
else
{
tooltip += '<tr><td>Comments:</td><td>'+this.point.comments+'</td></tr>';
}
tooltip += '</tbody></table>';
return tooltip;
},
followPointer: false
},
rangeSelector: {
enabled:true
},
xAxis:{
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: {
title: {
text: 'Ri'
}
},
series: prepareData(res.bubble)
});
Here is the prepareData function:
function prepareData(data)
{
for( var i in data )
{
var item = data[i];
for( var k in item.data )
{
var itemData = item.data[k];
if( itemData[0] )
{
var split = itemData[0].split("-");
var y = split[0];
var m = split[1]-1;
var d = split[2];
itemData[0] = Date.UTC(y,m,d);
item.data[k] = itemData;
}
}
data[i] = item;
}
return data;
}
And the res.bubble json returned from PHP:
$list = array();
$list[] = array('name'=>'project 1','color'=>'#FF0000','data'=>array(new \DateTime(),20,'none'),'pointInterval'=>86400000,'comments'=>'this is a comment');
//.... repeating by adding some more elements to this array
You can access all additional properties via point.options[/* property */.
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
tooltip: {
formatter: function () {
return this.point.options.comments[0];
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', comments: ['this is a comment'] },
]
}]
});
example: http://jsfiddle.net/yd1vjfmp/

Highcharts simple column chart: data not showing

I'm attempting to pull values from data- attributes in <tr> elements and put them into a small column chart on hover. The chart pops up correctly on hover and the title and axes are rendered, but the chart is empty.
I'm guessing there's something incorrect with how I'm loading data into the Highcharts series option?
Here's my JS code:
$("#campaigns tbody tr:not(.group)").hover(
function() {
var name = $(this).attr("data-name");
var type = $(this).attr("data-type");
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
$('body').append('<div id="hoverchart"></div>');
$('#hoverchart').highcharts({
chart: {
type: 'column',
width: 300,
height: 200
},
title: {
text: name
},
subtitle: {
text: type
},
xAxis: {
categories: [
'Sends',
'Conversions',
'Opens',
'Bounces'
],
title: {
enabled: false
}
},
yAxis: {
min: 0,
title: {
enabled: false
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false,
data: [sends, conversions, opens, bounces]
}],
credits: {
enabled: false
}
});
$(document).on('mousemove', function(e){
$('#hoverchart').css({
left: e.pageX+10,
top: e.pageY-10
});
});
}, function() {
$('#hoverchart').remove();
}
);
Any ideas?
Thanks
I was able to fix this by changing:
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
to:
var sends = parseInt($(this).attr("data-sends"), 10);
var conversions = parseInt($(this).attr("data-conversions"), 10);
var opens = parseInt($(this).attr("data-opens"), 10);
var bounces = parseInt($(this).attr("data-bounces"), 10);

Post Data to the action result when Dropdown list change in ASP.NET MVC using jqgrid

I have Created JqGrid for loading some records like below.
<script type="text/javascript">
$(document).ready(function () {
$('#jqgRequests').jqGrid({
defaults: {
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No Request Found",
loadtext: "Loading...",
pgtext: "Page {0} of {1}"
},
//url from wich data should be requested
url: '#Url.Action("LoadRequest")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Is Approved','Requestor', 'Request Type', 'Request Date', 'Approved Date', 'Package','Comments','RequestID', '','',''],
//columns model
colModel: [
{ name: 'IsApproved',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if (status == 1) {
return '<input type="checkbox" name="approval" checked disabled="disabled">';
}
else if(status==2) {
return '<img src="#Url.Content("~/Content/images/reject.jpg")"></img>';
}
else{
return '<input type="checkbox" name="approval" disabled="disabled" >';
}
},sortable:false, align: 'center', width: 80, index: 'subColumn'
},
{ name: 'Requestor', index: 'Requestor', width: 170, align: 'left' },
{ name: 'Request Type', index: 'RequestType', width: 90, align: 'left' },
{ name: 'RequestDate', index: 'RequestDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'ApprovedDate', index: 'ApprovedDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'Package', index: 'Package', width: 150, align: 'left' },
{ name: 'Comments', index: 'Comments', width: 300, align: 'left' },
{ name: 'RequestID', index: 'RequestID', width: 1, align: 'left',hidden:true },
{ name: 'Approve',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==1)
{
return '#Html.ActionLink("Approve", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already approved');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Approve", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return ConfirmPopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Approve", "Approve", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to approve this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 45
},
{ name: 'Reject',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==2)
{
return '#Html.ActionLink("Reject", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already rejected');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Reject", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return Rejectpopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Reject", "Reject", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to reject this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 60
},
{ name: 'More',
formatter: function (cellvalue, options, rowObject) {
// var x = "<a class='btnMore' onclick='GetDetail('myId');' style = 'color:blue;font-weight:bold;' href='#'>More Detail</a>"
var x='#Html.ActionLink("Detail", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return GetDetail('myId');", href = "#" })';
return x.replace("myId",rowObject[7]);
},sortable:false, align: 'left', width: 80
}
],
//pager for grid
pager: $('#jqgpRequests'),
//number of rows per page
rowNum: 25,
//initial sorting column
sortname: 'RequestID',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
});
</script>
Action Result
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request)
{
int totalRecords = _dashboardRepository.RequestCount;
var response = new JqGridResponse()
{
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
PageIndex = request.PageIndex,
TotalRecordsCount = totalRecords
};
const string subColumn = "";
foreach (var dashboard in _dashboardRepository.LoadAllRequests(request.SortingName, request.SortingOrder.ToString(), request.PageIndex, request.RecordsCount))
{
response.Records.Add(new JqGridRecord(dashboard.RequestID.ToString(), new List<object>()
{
dashboard.IsApproved,
dashboard.Requestor,
dashboard.RequestType,
dashboard.RequestDate,
dashboard.ApprovedDate,
dashboard.Package,
dashboard.Comments,
dashboard.RequestID
}));
}
return new JqGridJsonResult { Data = response };
}
This jqGrid load when the page load. Also i have added a dropdown list for filtering. For this i need to post some parameters for the JqGridRequest class . How can i possible this?
Assuming that your dropdown id is ddlFilter you can write the JavaScript change event handler like this:
$('#ddlFilter').on('change', function(e) {
$('#jqgRequests').setGridParam({ postData: { FilterValue: $(this).val(); } }).trigger('reloadGrid', [{ page: 1 }]);
});
On server side you can create following view model for handling the post data:
public class PostDataViewModel
{
public string FilterValue { get; set; }
}
And add it as one more parameter to your action:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request, PostDataViewModel postData)
{
...
}
Unless there is some specifc requirement or edge case you haven't describe in your question this should do the trick.
If I understand you correct you can follow the suggestion from the old answer.
If you have for example <select id="mySelect">...</select> on the page you can use jqGrid option
postData: {
myFilter: function () {
return $("#mySelect option:selected").val();
}
}
to send the value of the select box together with other standard jqGrid parameters (see JqGridRequest). If you want additionally to reload the grid after every changes of the select you can use .trigger("reloadGrid"). You need just set change and keyup event handler and calls .trigger("reloadGrid") it it require. See the answer for more code example.

jqgrid with custom column

I am using Jqgrid in my application. I wanted to create a column with 2 buttons. I want to have in column since the buttons may differ based on the data of the row. I googled it and I am able to found only creating a button using custom formatter option, but it appears only on double clicking a row or on edit of a row, but I want it to be displayed on column itself. Any help or link containing information will be appreciated. Below is my grid code.
Need to create an another column with buttons.
Edit:
var grid = $(gridId);
grid.jqGrid({
data: gridData,
datatype: "local",
gridview: true,
colModel: [
{
label: 'Employee Name', name: 'employeeName', width: 195, editable:true,
sortable:true, editrules:{required:true}
},
{
label: 'Address', name: 'address', width: 170, editable:true,
sortable:true,
editrules:{required:true}
},
{
label: 'Department', name: 'department', width: 120, editable:true,
sortable:true,
edittype:'custom',
editoptions: {
'custom_element' : populateReturnTypeAutocomplete,
'custom_value' : autocomplete_value
},
editrules:{required:true}
},
});
Okay add this to your colModal
{label: 'My Custom Column', name: 'custom', index:'custom' width: 120}
Now in gridComplete or loadComplete add this code
var grid = $("#grid"),
iCol = getColumnIndexByName(grid,'custom'); // 'custom' - name of the actions column
grid.children("tbody")
.children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "button1",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle your click function here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-save")
.attr('id',"customId")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
.appendTo($(this).children("div"));
$("<div>",
{
title: "custombutton 2",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle click here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-custom")
.attr('id',"customButton2")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>')
.appendTo($(this).children("div"));
Now these icons I'm adding here will be available with jquery ui.css and you will have to add one more function to your script which will get 'custom' column index for u in line first of above code.
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
for (; i<l; i+=1) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
I hope this helps.

Resources