I have the following code to populate KendoGrid, I used Jquery to get text-box value. text-box display the right value but Jquery is not returning what's in the textbox instead it return nothing.
<input asp-for="InvoiceID" name="InvoiceID" id="iid" />
<script>
function additionalInfo() {
return {
invoiceID: $("#iid").val()
}
}
</script>
#(Html.Kendo().Grid<....WebUI.ViewModels.Project.BillingDocuments>()
.Name("BillingDocuments")
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden().Width(50);
columns.Bound(p => p.PrintSequence).Title("Seg").Width(50);
columns.Bound(p => p.DocumentType).Width(100);
columns.Bound(m => m.Actions).ClientTemplate("<a class='text-primary' href='#= DocumentLocation #'>View</a>").Width(50);
})
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("BillingDocumentsRead", "Billing", new { Area = "Project"}).Data("additionalInfo")
.Type(HttpVerbs.Get))
)
)
I tried by setting the invoice ID value as
<script>
function additionalInfo() {
return {
invoiceID:55
}
}
</script>
and this works fine but jquery doesnt pick textbox value of <input asp-for="InvoiceID" name="InvoiceID" id="iid" />.
Related
im trying to display an input according to the value of a drop-down list with symfony
my select box
->add('specialite', ChoiceType::class, [
'attr' => ['class' => 'form-control mb-3'],
'label' => 'Speciality',
'choices' => array(
'Select' => null,
'Nurses' => 'nurses',
'Doctors' => 'Doctors',
'Engineers' => 'Engineers',
'IT-Specialist' => 'IT-Specialist',
'Anesthetist technicians' => 'Anesthetist technicians',
'Others' => 'Others',
),
'choice_attr' => [
'Select' => ['disabled'=>'disabled'],
]
])
when the user select others , another field it displayed to him , im trying also with this code
form type
->add('otherspec', TextType::class, [
'attr' => ['class' => 'form-control mb-3'],
'label' => null,
])
html.twig
<script>
let foo = document.getElementById("emplopyer_specialite");
let bar = document.getElementById("emplopyer_otherspec");
foo.addEventListener('change', (event) => {
if (event.target.value === 'Others') {
bar.style.display = 'none'; // Hide the element.
} else {
bar.style.display = 'inline'; // Show the element.
}
});
</script>
My problem
my problem is whene i select any value of the select box , the second field appear , however i want it appear when i select the value="other"
thanks
If you console.log your event.target.value, you can see '1', '2'...
The offender is : 'Select' => null
Documentations says :
If there are choice values that are not scalar or the stringified representation is not unique Symfony will use incrementing integers as values. When the form gets submitted the correct values with the correct types will be assigned to the model.
So, if you want string as value, you have to set string in your Select key.
Or you can change your js condition with 6.
I wanna to ask how can I achieve disable textbox by condition. Example, When dropdown list selected "Card". Commission text field will be appear. If model value is "Cash" the Commission text field will be hide.
<div class="k-edit-field">
#(Html.Kendo().DropDownListFor(model => model.PAY_TYPE)
.DataTextField("NAME")
.DataValueField("CODE")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetPayType", "Payment");
});
})
.HtmlAttributes(new { style = "width: 100%", #id = "payType"})
)
</div>
<div class="k-edit-field" id="ASD">
#Html.EditorFor(model => model.PAY_COMM)
#Html.ValidationMessageFor(model => model.PAY_COMM)
</div>
JavaScript
jQuery(document).ready(function () {
$("#payType").on("change", function () {
if ($(this).val() == "C") {
$('#Comm').show();
} else {
$('#Comm').hide();
}
});
$("#payType").trigger("change");
});
You need to check the value when page load and when dropdown change.
function changeComm() {
if ($("#payType").val() == "C") {
$('#Comm').show();
} else {
$('#Comm').hide();
}
}
jQuery(document).ready(function () {
changeComm();
$("#payType").on("change", function () {
changeComm();
});
$("#payType").trigger("change");
});
I have the following Kendo grid, I have order date as MM/yyyy. In the data source the orderdate is stored as MM/dd/yyyy.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Is there anyways on calendar display Month and Year and filter the grid based the month and year selected, ignoring the date as shown in the screenshot below?
Currently it's displaying the date to select
You could use a custom filter template on that column. Below is the jquery code on how to configure a DateTimePicker to limit the selection to a year and month (This was taken from the KendoUI for JQuery demos).
<input id="datepicker"/>
<script>
$("#datepicker").kendoDatePicker({
depth: "year",
start: "year"
});
</script>
Another way via config would be to use a custom template for filters.
columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140)
.Filterable(filterable => filterable.UI("customDateTimeFilter"));
<script type="text/javascript">
function customDateTimeFilter(element) {
if (element == null) return;
element.kendoDatePicker({
depth: "year",
start: "year"
});
}
</script>
I work with symfony framework and I have two select Type:
the 2nd select is initially Hidden and relative to the value of the first select the 2nd select will be displayed : for that I tried to do $this :
Script
<script type="text/javascript">
$(document).ready(function () {
$('.type-produit ').change(function() {
if ($('select[id$="_type"]>option:selected').text() == "Unité")
{ $('.hidden ').show(); }
});
});
</script>
FormType
$formMapper
->add('type','choice', array(
'choices' => array('Kg' => 'Kg', 'Unité' => 'Unité'),
'label' => 'Type de vente',
'attr' =>array('class'=>'type-produit')
))
->add('soustype',HiddenType::class, array(
'data' => ['Liquide'=>'Liquide','Autres'=>'Autres'],
'label' => 'Sous types',
'attr'=>array('class'=>'hidden')
))
But the 2nd select still not displayed , someone can help me please ? thanks for all
Change the soustype field to choice type (HiddenType field is rendered as <input type="hidden">), then you can hide or show the field in the script.
FormType
...
->add('soustype', 'choice', array(
'choices' => ['Liquide'=>'Liquide','Autres'=>'Autres'],
'label' => 'Sous types',
'attr' => array('class'=>'soustype')
))
Script
$(document).ready(function () {
$('.soustype').hide();
$('.type-produit ').change(function() {
if ($('select[id$="_type"]>option:selected').text() == "Unité") {
$('.soustype ').show();
}
});
});
Does Id have to be an integer or it can be string?
It seems like in my case #=INVOICE# is getting value but it Read method to controller not sure why not getting called.
I tried looking at this example: http://demos.telerik.com/kendo-ui/grid/detailtemplate
code:
#(Html.Kendo().Grid<OpenInvoicesInfo>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass' />").Width(4);
columns.Bound(i => i.INVOICE).Width(15);
...
})
.ClientDetailTemplateId("OrdersTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(8)
.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
)
)
<script id="OrdersTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<CustomerComments>()
.Name("grid_#=INVOICE#")
.Columns(columns =>
{
columns.Bound(o => o.INVOICE).Width(15);
columns.Bound(o => o.Comment).Width(40);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetCustomerComments", "Maint", new { invoices = "#=INVOICE#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
Controller:
public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string invoices)
{
List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(invoices);
return Json(customer.ToDataSourceResult(request));
}
I will really appreciate if someone can reply.
Does it only work if it is in entity framework.
I am calling GetCustomerComments from a stored procedure.
It is loading the first grid fine but not calling details grid's controller method.