Html Razor code
this code use in Edit view
#{Html.RenderAction("ActionNotes", "Prospects");}
Ajax code
write ajax code in ActionNotes view.
var $dt = #jQueryDataTable.Init("#tblActionNotes"
, new DataTableOption(Model.List.Items)
{
AjaxSource = Url.Action("ActionNotes"),
Dom = #IsOperator ? (((Model.UserRights & (int)CrmPermission.Add) == (int)CrmPermission.Add|| Model.TotalAccess) ? null : "<\'row-fluid\'<\'span6\'F><\'span6\'>><\'row-fluid\'r>t<\'row-fluid\'<\'span3\'i><\'span3\'l><\'span6\'p>>" ) : (((Model.RoleRights & (int)CrmPermission.Add) == (int)CrmPermission.Add) ? null : "<\'row-fluid\'<\'span6\'F><\'span6\'>><\'row-fluid\'r>t<\'row-fluid\'<\'span3\'i><\'span3\'l><\'span6\'p>>" ),
DeferLoading = Model.List.TotalItems,
CreateUrl = Url.Action("ActionNoteNew","Prospects", new { id = Model.ProspectId }),
Columns = new[] {
new DataTableColumnOption { Data="CreatedOn", Title="Date", Width="15%" },
new DataTableColumnOption { Data="CreatedByUserName", Title="Operator", Width="15%" },
new DataTableColumnOption { Data="ToOperatorName", Title="Assign Operator", Width = "15%"},
new DataTableColumnOption { Data="Note", Title="Note" },
new DataTableColumnOption { Data="FollowUpDate", Title="Followup Date", Width="15%" },
new DataTableColumnOption { Data="Type", Title="Type", Width="10%" },
new DataTableColumnOption { Data="Status", Title="Status", Width="10%" },
new DataTableColumnOption { Data="Id",Title = "Action", Width="80px", Render = "actionNoteActionRender", Sortable = false }
},
})
});
i use this code for call another controller and view for display two different view in single view, using this code second view is display properly and i can see data on edit view in (right click) page source but i can not display data on edit view page.
solve this issue using..
#{Layout = null;}
in Edit view before..
#{Html.RenderAction("ActionNotes", "Prospects");}
Related
Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?
At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.
I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".
I have gone through the documentation and apparently, it is not listed.
Help will be appreciated.
Here is what my current configuration is:
#Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()
Controller method return configuration in viewbag
var tools = new
{
tooltipText = "Custom Tools",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
};
ViewBag.tools = new object[] {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "CreateTable","|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
};
ViewBag.table = new[] {
"tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
};
ViewBag.value="";
You can modify the existing “format” option using Format property as shown below.
[View]
#Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render()
<script>
function onBegin(e) {
alert(e.element.textContent + " is Selected");
}
</script>
[Controller]
public ActionResult Index()
{
object format1 = new { text = "Paragraph", value = "P" };
object format2 = new { text = "My Paragraph", value = "BlockQuote" };
object format3 = new { text = "Heading 1", value = "H1" };
object format4 = new { text = "Heading 2", value = "H2" };
ViewBag.types = new { width = "40px",
types = new[] { format1, format2, format3, format4 }
};
return View();
}
If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below
Sample
I have dynamic products list to create an invoice. Now I want to search the product from select->option list. I found a possible solution like Vue-select in vuejs but I could not understand how to convert my existing code to get benefit from Vue-select. Would someone help me please, how should I write code in 'select' such that I can search product at a time from the list?
My existing code is -
<td>
<select id="orderproductId" ref="selectOrderProduct" class="form-control input-sm" #change="setOrderProducts($event)">
<option>Choose Product ...</option>
<option :value="product.id + '_' + product.product_name" v-for="product in invProducts">#{{ product.product_name }}</option>
</select>
</td>
And I want to convert it something like -
<v-select :options="options"></v-select>
So that, I can search products also if I have many products. And My script file is -
<script>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#poOrder',
data: {
orderEntry: {
id: 1,
product_name: '',
quantity: 1,
price: 0,
total: 0,
},
orderDetail: [],
grandTotal: 0,
invProducts: [],
invProducts: [
#foreach ($productRecords as $invProduct)
{
id:{{ $invProduct['id'] }},
product_name:'{{ $invProduct['product_name'] }}',
},
#endforeach
],
},
methods: {
setOrderProducts: function(event) {
//alert('fired');
var self = this;
var valueArr = event.target.value.split('_');
var selectProductId = valueArr[0];
var selectProductName = valueArr[1];
self.orderEntry.id = selectProductId;
self.orderEntry.product_name = selectProductName;
$('#invQuantity').select();
},
addMoreOrderFields:function(orderEntry) {
var self = this;
if(orderEntry.product_name && orderEntry.quantity && orderEntry.price > 0) {
self.orderDetail.push({
id: orderEntry.id,
product_name: orderEntry.product_name,
quantity: orderEntry.quantity,
price: orderEntry.price,
total: orderEntry.total,
});
self.orderEntry = {
id: 1,
product_name:'',
productId: 0,
quantity: 1,
price: 0,
total: 0,
}
$('#orderproductId').focus();
self.calculateGrandTotal();
} else {
$('#warningModal').modal();
}
this.$refs.selectOrderProduct.focus();
},
removeOrderField:function(removeOrderDetail) {
var self = this;
var index = self.orderDetail.indexOf(removeOrderDetail);
self.orderDetail.splice(index, 1);
self.calculateGrandTotal();
},
calculateGrandTotal:function() {
var self = this;
self.grandTotal = 0;
self.totalPrice = 0;
self.totalQuantity = 0;
self.orderDetail.map(function(order){
self.totalQuantity += parseInt(order.quantity);
self.totalPrice += parseInt(order.price);
self.grandTotal += parseInt(order.total);
});
},
setTotalPrice:function(event){
var self = this;
//self.netTotalPrice();
self.netTotalPrice;
}
},
computed: {
netTotalPrice: function(){
var self = this;
var netTotalPriceValue = self.orderEntry.quantity * self.orderEntry.price;
var netTotalPriceInDecimal = netTotalPriceValue.toFixed(2);
self.orderEntry.total = netTotalPriceInDecimal;
return netTotalPriceInDecimal;
}
}
});
Assuming that invProducts is an array of product objects and each product object has a product_name property, try this snippet.
<v-select #input="selectChange()" :label="product_name" :options="invProducts" v-model="selectedProduct">
</v-select>
Create a new data property called selectedProduct and bind it to the vue-select component. So, whenever the selection in the vue-select changes, the value of selectedProduct also changes. In addition to this, #input event can be used to trigger a method in your component. You can get the selected product in that method and do further actions within that event listener.
methods: {
selectChange : function(){
console.log(this.selectedProduct);
//do futher processing
}
I am trying a method to bind data to the Pie chart
Public ActionResult Charts
{
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { PlotShadow = false })
.SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
.SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
.SetPlotOptions(new PlotOptions
{
Pie = new PlotOptionsPie
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
DataLabels = new PlotOptionsPieDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
ConnectorColor = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
}
}
})
.SetSeries(new Series
{
Type = ChartTypes.Pie,
Name = "Browser share",
Data = new Data(new object[]
{
new object[] { "Firefox", 45.0 },
new object[] { "IE", 26.8 },
new DotNet.Highcharts.Options.Point
{
Name = "Chrome",
Y = 12.8,
Sliced = true,
Selected = true
},
new object[] { "Safari", 8.5 },
new object[] { "Opera", 6.2 },
new object[] { "Others", 0.7 }
})
});
}
}
public JsonResult GetData()
{
int Param1;
Param1 = 1;
var reports = db.ExecuteStoreQuery<ResourceReports>("ResourceReports #EmployeeID", new SqlParameter("#EmployeeID", Param1)).ToList();
return Json(reports, JsonRequestBehavior.AllowGet);
}
i want to replace
.SetSeries(new Series
{
Type = ChartTypes.Pie,
Name = "Browser share",
Data = new Data(new object[]
{
new object[] { "Firefox", 45.0 },
new object[] { "IE", 26.8 },
new DotNet.Highcharts.Options.Point
{
Name = "Chrome",
Y = 12.8,
Sliced = true,
Selected = true
},
new object[] { "Safari", 8.5 },
new object[] { "Opera", 6.2 },
new object[] { "Others", 0.7 }
})
});
}
with my GetData() how can i do this,the Data in .SetSeries should be my returned data in GetData method
It appears you are using Dotnet.Highcharts. You could create a list of Series and a list of Point.
List<Series> mySeries = new List<Series>();
List<Point> myPoints = new List<Point>();
I would loop through each series you need to create and generate the point data like so:
myPoints.Add(new Point {
X = (detailRec.RecordTime - new DateTime(1970, 1, 1, 0, 0, 0)).TotalMilliseconds,
Y = detailRec.TotalCount
});
Then you could create the series itself using the list of points for its data like so:
mySeries.Add(new Series{
Name = distinctDistrict.Name,
Data = new Data(myPoints.ToArray())
});
Then to set the Series you could use the following statement:
.SetSeries(mySeries.Select(s => new Series {
Name = s.Name,
Data = s.Data
}).ToArray())
If you use the object browser in Visual Studio, you can see the other properties and methods of the Series and Point class. To use the above code you will have to include the the following using statements:
using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using Point = DotNet.Highcharts.Options.Point;
I am following few tutorials for creating MVC3 application.
I saw example of adding dropdownlist bound to a model.
#Html.DropDownListFor(model => model.Vehicle.Model, new List<SelectListItem>(), String.Empty, new { style = "width: 100px;", size = "1" })
But i just want to add few contant values i.e. not coming from the DB, but just want to add few items to dropdownlist in code, how can i do it?
#{
var modellist = new List<VehicleModels>()
{
new VehicleModels() { ID= 1, Name="A"},
new VehicleModels() { ID= 2, Name="B"},
new VehicleModels() { ID= 3, Name="C"},
new VehicleModels() { ID= 4, Name="D"}
}
}
#Html.DropDownListFor(model => model.Vehicle.Model, new SelectList(modellist, "ID" , "Name"), String.Empty, new { style = "width: 100px;", size = "1" })
This is my code,
myText.enableKeyEvents = true; // **
myText.on('keyup', function(t){ console.log(t.getValue()); });
It not work, I think it may has some invoke method.
Any one has an idea ?
Full code
// function
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
};
// form
var p = new Ext.Panel({
title : 'test panel',
width : 400,
defaults: {
xtype : 'textfield',
},
items : [
{ ref : 'one', maxLength : 5 },
{ ref : 'two', maxLength : 5 },
{ ref : 'three',maxLength : 5 },
{
xtype : 'button',
text : 'SAMPLE'
},
{ ref : 'four', maxLength : 5 },
],
renderTo: Ext.getBody()
});
Ext.onReady(function(){
txfJump(p.one);
});
It's not possible without hackish tricks. Having read the TextField's source, i found out, that there is a private method initEvents, that sets up the callbacks for the html-elements if and only if enableKeyEvents is set. So, changing enableKeyEvents after initEvents was called has no effect, until it is called again.
To inject it, one could try to trigger a re-rendering of the component, or one could copy the behaviour of the relevant parts of TextField's initEvent. But there doesn't seem to be an official way.
you have to call txf.initEvents(), this needs to be called after txf.enableKeyEvents = true;
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.initEvents(); //<----- this is what you have missing
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
You should pass "enableKeyEvents": true when getting new Ext.form.TextField instance. Here is the example usage
var textField = new Ext.form.TextField({
. // your configs
.
enableKeyEvents: true,
.
.
})