I am using Kendo MultiSelect as UIHint for one of my field.
the entity having the UIHint is like this:
public class Test
{
[UIHint("_MultiSelectList")]
[DisplayName("Labels")]
public List<Students> Labels { get; set; }
}
my _MultiSelectList.cshtml is
var multiSelectList = Html.Kendo().MultiSelect().Name("empty");
#(
multiSelectList = Html.Kendo().MultiSelect()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.Placeholder(ViewData.ModelMetadata.GetCustomMetadata().Placeholder)
.BindTo(new SelectList((System.Collections.IEnumerable)ViewData[fieldId + "_list"], "Value", "Name"))
.Filter("contains")
.HtmlAttributes(new { style = String.Format("width: {0}; ", width) })
);
}
data is not loaded into the control and it is rendered as html
<div class="k-widget k-multiselect k-header" unselectable="on" style="width: 225px;">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="Labels_taglist" class="k-reset" unselectable="on" role="listbox"></ul>
<input class="k-input k-readonly" style="width: 25px" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="Labels_taglist Labels_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false"></input>
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="Labels" style="width: 225px; display: none;" name="Labels" multiple="multiple" data-role="multiselect" aria-disabled="false" aria-readonly="false"></select>
<span style="font-family: MS Shell Dlg; font-size: 13.3333px; font-stretc…: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
What am missing here ???
Related
I have a form with dynamically added / removed inputs, however if I add input and don't enter anything, the null value is written to the database, the validator does not catch null. Googling did not find a similar question, on the contrary, everyone was interested in how to pass null through the validator. Maybe I didn't google it well.
$request->validate([
'properties' => 'required|min:1',
]);
Properties fiel:
<div class="input-group row">
<label for="category_id" class="col-sm-2 col-form-label">Product properties: </label>
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="input-group mb-3">
#isset($product)
#foreach($product->properties as $prod)
<input type="text" name="properties[][key]" value="{{ $prod['key'] ?? '' }}" class="form-control m-input editinp-key" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" value="{{ $prod['value'] ?? '' }}" class="form-control m-input ml-3 editinp-value" placeholder="Value" autocomplete="off">
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Remove</button>
</div>
#endforeach
#endisset
#if(Session::has('properties'))
#foreach(Session::get('properties') as $prop)
<input type="text" name="properties[][key]" value="{{ $prop['key'] ?? '' }}" class="form-control m-input" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" value="{{ $prop['value'] ?? '' }}" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Remove</button>
</div>
#endforeach
#endif
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add</button>
</div>
</div>
</div>
jQuery:
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="properties[][key]" class="form-control m-input ml-3" placeholder="Key" autocomplete="off">';
html += '<input type="text" name="properties[][value]" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
});
// remove row
$('#removeRow').on('click', function () {
$(this).closest('#inputFormRow').remove();
});
Assuming you pass an array of objects with key and value keys, you can validate your request like this:
$request->validate([
'properties' => 'required|min:1',
'properties.*.key' => 'required',
'properties.*.value' => 'required',
]);
Maybe use Validator ?
$data = Validator::make($request->all(), [
'properties' => ['present', 'string', 'min:1'],
]);
if ($data->fails()) {
$error_msg = "Validation failed, please reload the page";
return Response::json($data->errors());
}
From further comments I realized what it is you are trying to do:
It is very similar to what i did here:
page.blade.php:
<table class="table table-bordered" id="dynamic_field">
#if ($errors->any())
<tbody id="dynamic_field-1">
#php $name_count = 1 #endphp
#foreach (old('name') as $name)
#if($name_count == 1)
<tr id="{{$name_count}}">
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" value="{{old('name.'.($name_count-1))}}" class="form-control #error('name.'.($name_count-1)) is-invalid #enderror" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="add" id="add-1" class="btn btn-success">{{ __('Add More') }}</button></td>
</tr>
#else
<tr id="row{{$i}}">
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" value="{{old('name.'.($name_count-1))}}" class="form-control #error('name.'.($name_count-1)) is-invalid #enderror" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="remove" id="{{$i}}" class="btn btn-danger btn_remove">X</button></td>
</tr>
#endif
#php $i += 1 #endphp
#php $name_count += 1 #endphp
#endforeach
</tbody>
#else
<tbody id="dynamic_field-1">
<tr>
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" class="form-control" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="add" class="btn btn-success" id="add-1" >{{ __('Add More') }}</button></td>
</tr>
</tbody>
#endif
</table>
jQuery:
$(document).ready(function(){
var i = {{$i ? $i+=1 : '1'}};
$('#add-1').click(function(){
i++;
$('#dynamic_field-1').append('<tr id="row'+i+'"><td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" class="form-control" maxlength="240"/></td><td style="width: 10%;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td> </tr> ');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
And Controller:
foreach($request->input('name') as $key => $value) {
$rules["name.{$key}"] = array('string', 'max:255');
}
$data = Validator::make($request->all(), $rules);
if ($data->fails()) {
return redirect()
->back()
->withErrors($data)
->withInput($request->input());
}else{...
Your description isn't clear enough to understand. For validation you may use required|min:1|not_in:null for getting the validation error
The validation should be like this:
$request->validate([
'properties' => 'required|integer|min:1',
]);
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1.
The question if I increment the value of input type number how the price double if i increase the value of number?
blade
#foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">{{ $invoice->price }}
<td class="total"></td>
</tr>
#endforeach
script.js
<script>
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
</script>
css
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
My input number is like this.
You can use click and input event to achieve above . I have removed updateTotal function and have merge all code in one . In below code i have use $(this).closest('tr') to get closest tr where the buttons or the input-box is located and then i have use .find to get require values from input and finally added total to .total td .
Demo Code :
//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quan = selectors.find('.quantity').val(); //get qty
if (!quan || quan < 0)
return;
var cost = parseFloat(selectors.find('.cost').text());
var total = (cost * quan).toFixed(2);
selectors.find('.total').text(total); //add total
})
nput[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add minus class-->
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">135
<td class="total"></td>
</tr>
</table>
Below is some HTML code, in which I need to find the element with the content win8 (last element, <div class="desc">win8</div>).
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 5002; outline: 0px none; position: absolute; height: auto; width: 800px; top: 7px; left: 537px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="multi-wizard instance-wizard ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 518px;">
<div class="progress">
<form novalidate="novalidate">
<div class="steps">
<div class="step setup loaded" wizard-step-id="setup" style="display: none;">
<div class="step select-iso loaded" wizard-step-id="select-iso" style="display: block;">
<div class="wizard-step-conditional select-template" style="display: block;">
<div class="main-desc">
<div class="template-select content tab-view ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<input type="hidden" value="XenServer" name="hypervisor" wizard-field="hypervisor">
<div id="instance-wizard-featured-templates" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="select-container">
<div class="select **even**">
<input type="radio" name="templateid" wizard-field="template" value="b0c24832-6fdf-11e4-a45f-b6eb114441ae">
<div class="select-desc">
</div>
<div class="select **odd**">
<input type="radio" name="templateid" wizard-field="template" value="7720cdb2-b81a-4839-94cd-b56b660e3324">
<div class="select-desc">
<div class="name">win8</div>
<div class="desc">win8</div>
</div>
</div>
I tried the following XPath:
.//*[#id='instance-wizard-featured-templates']/div/div[2]/input
The issue is the screen has 2 elements, even and odd. Each time it loads it swaps the values. So the XPath selects the wrong element.
Is there a way to exactly select win8?
Assuming you always want to get the element with the class named 'desc', the correct XPath is looks like this:
//div[#class="desc" and text()="win8"]
This selects all <div> elements having the class 'desc' and 'win8' as text.
I'm using the Kendo-UI Tabstrip, and would like to add a class to one specific tabpanel. Is this possible? Using .SpriteCssClasses within the items.Add() section only seems to add the class to the tab itself, and not the actual panel.
Any help is greatly appreciated.
You can try to get the specific panel using the ID because kendo will add a div with specific ID depending on the name of the tab strip and the tab number (order), for example:
#(Html.Kendo().TabStrip()
.Name("Main")
.Items(Main =>
{
Main.Add()
.Text("test1 title").Content(#<text>
test1
</text>);
Main.Add()
.Text("test2 title")
.Content(#<text>
test2
</text>);
})
)
This will generate the following HTML:
<div class="k-tabstrip-wrapper" style="">
<div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
<span class="k-loading k-complete"></span>
test1 title
</li>
<li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
<span class="k-loading k-complete"></span>
test2 title
</li>
</ul>
<div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test1
</div>
<div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test2
</div>
</div>
</div>
Note the divs with IDs "Main-1" and "Main-2" are the IDs of the actual panels which is what you want from what I understand so you can add CSS on the IDs:
#Main-1 {
background-color: #E3F7A8;
}
I am using selenium2 and webdriver to automate a Kendo UI and I am unable to control the dropdown to select a model value form the dropdown list. How can I select a value from a Kendo UI DropDownList using webdriver commands?
The issues that it is not coded as a Select element:
<div class="FormLabel">Select Model(s):</div>
<div class="FormInput FixMultiSelect">
<div class="k-widget k-multiselect k-header" unselectable="on" style="">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ModelList_taglist" class="k-reset" unselectable="on" role="listbox"></ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ModelList_taglist ModelList_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ModelList" data-placeholder="Click Here" multiple="multiple" data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="3">ABCGateway_Model</option>
<option value="25">Jack_Gateway_Model</option>
<option value="4">CC Model_1</option>
<option value="26">Sam_Model_1</option>
</select>
<span style="font-family: 'MyriadPro-Regular',Tahoma,Geneva,sans-serif; font-size: 13px; font-stretch: normal; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 16px; position: absolute; visibility: hidden;"></span>
</div>
</div>
</div>
Just wrap your WebElement into Select Object as shown below
Select dropdown = new Select(driver.findElement(By.id("identifier")));
Once this is done you can select the required value in 3 ways. Consider an HTML file like this
<html>
<body>
<select id = "designation">
<option value = "MD">MD</option>
<option value = "prog"> Programmer </option>
<option value = "CEO"> CEO </option>
</option>
</select>
<body>
</html>
Now to identify dropdown do
Select dropdown = new Select(driver.findElement(By.id("designation")));
To select its option say 'Programmer' you can do
dropdown.selectByVisibleText("Programmer ");
or
dropdown.selectByIndex(1);
or
dropdown.selectByValue("prog");
Happy Coding :)