I am new to kendo grid. I have a column called Status, The possible values for the columns are 1,2,3. If the value is equals to 1 or 2, I wish to display text "Good" in the cell. If the value is 3, I wish to display button "Apply" button in the cell. The User can click the button to trigger a pop up window and do something there.
I used to work with ag-grid, I know I can do this in the cellRenderer:(params)=>{...} to display different text based on the value of this cell. Then, in the onCellClicked:(params)=>{...} to trigger a pop window if the value is 3.
How can I do the same thing in kendo grid?
If you are using Kendo ASP.NET, add a ClientTemplate for the Column status:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound("Status").ClientTemplate("#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#");
...
If you are using Kendo UI JS,
<script>
$("#grid").kendoGrid({
columns: [ {
field: "Status",
template: "#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#"
}],
...
});
</script>
Also, you can wrap the logic in a javascript function and call it from template like this.
function setStatus(status) {
switch (status) {
case 1:
return "Good";
break;
case 2:
return "Good";
break;
case 3:
return "<input type=button value=apply onclick=CallAnyJSFunction() />";
break;
}
}
columns.Bound("Status").ClientTemplate("#= setStatus(Status) #");
or
template: "#= setStatus(Status) #"
Related
I want to display the radio button with default value while loading the view for Add. The same radio button should display the value tagged to the model property while loading for Edit. may be based on some value from the controller store in viewbag.
The code will show the checked radio button value while Edit. For Add function the same view should show default value. But it is showing none of the radio button selected.
<td>
#{
foreach (var item in (SelectList)ViewBag.FilterFieldOptions.BrandSelectList)
{
#Html.RadioButtonFor(model => model.GenericBrand, item.Value, Model.GenericBrand == item.Value ? new { #checked = "checked" } : null) #item.Text
}
}
</td>
I am using Vue.js to create a form. Currently my HTML looks like this:
<div class="form-group m-0" role="group">
<label class="d-block form-label" for="code_part3">Last Three</label>
<div>
<input class="form-input form-control is-invalid hasError" type="text"><!----><!----><!---->
</div>
</div>
When a user focuses on an input, or changes a select box, a class (.focused) is added to the main parent (.form-group). This animates the label to sit on top of the input/select box. And on blur a method is ran to check if the input value is to empty.
resetAnimateInputLabel() {
var target = event.currentTarget;
var inputValue = event.currentTarget.value;
var parentOfParent = target.parentElement.parentElement;
if (inputValue == "") {
//remove focused class to Parent of Parent to animate
parentOfParent.classList.remove("focused");
}
}
However I am using localStorage which will prepopulate the input fields when a user returns to the page. This causes an issue where the label is restored back to its original position (within the input itself) and both text clash.
What is the best way to solve this, so that on page load, if an input or select box is empty, for the label to remain animated?
I have tried the following:
Created a new method:
checkInputEmpty() {
var inputs = document.getElementsByClassName("form-input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == "") {
inputs[i].parentElement.parentElement.classList.remove("focused");
} else {
inputs[i].parentElement.parentElement.classList.add("focused");
}
}
}
and called it here:
mounted() {
this.checkInputEmpty();
if (localStorage.email !== "undefined") {
this.form.email = localStorage.email;
}
}
You could do two things differently to handle this in a simple and elegant way:
First - Checking input values:
Step 1: Having data property for storing the input value
data () {
return {
inputValue: '',
}
}
Step 2: Binding your input to that property
<input v-model="inputValue" />
Step 3: Investigating the data property and handling both cases as needed (wherever needed)
if (this.inputValue) {
// here, the input value is non-empty ("", null, undefined would evaluate to false)
} else {
// here, the input value is empty
}
Second - Class toggling
Step 1: You don't have to set and remove classes in this complicated way:
inputs[i].parentElement.parentElement.classList.add("focused");
Instead you can, again, create a data property for storing toggled state of the focused class:
data () {
return {
inputValue: '',
formFocused: false
}
}
Step 2: Dynamically assign the class to your element like this:
<div
class="form-group m-0" role="group"
:class="{ 'focused' : formFocused }"
>
...
</div>
Step 3: And handle the property as needed, in your case probably like this:
if (this.inputValue) {
this.formFocused = false;
} else {
this.formFocused = true;
}
Which is the same as:
this.formFocused = !this.inputValue;
For more info:
https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components
https://v2.vuejs.org/v2/guide/class-and-style.html
I'm trying to create a form in which the submit button is disabled until the text matches my conditions. And I'd like to constantly (each time a character is typed) check the text, instead of having to create a button that will activate another one.
Thanks !
You can use jquery and keyup to detect every time that the user type something here is an example:
http://jsfiddle.net/82sTJ/253/
<input type="text" id="text">
<button type="submit" disabled id="submitButton">
Submit
</button>
var condition = "good";
$('#text').keyup(function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Here is the alternative way using input suggested by Rob:
var condition = "good";
$('#text').on("input", function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Also you can use something like vue.js or angular to check the value in real time.
*Edited
I have some data which is presented similar to a search system (list of links on different source):
First unit of data Show Detail
Second unit of data Show Detail
...
Each unit of data has id (orderedNumber) and some information which must be hidden by default. Each unit of data has button which shows this information. The button calls a function ShowHide. I have problem because this function doesn't work with several buttons. Information about the unit of data must be shown when I click on the button (data is determined dynamically).
html:
<div ng-repeat="x in results">
{{ x.orderNumber + '. ' + x.namePackage + ' ' + x.size + ' Bytes '}} <a href={{x.link}}>Download</a>
<input type="button" value="Show detail" ng-click="ShowHide(x.orderNumber)" />
<div ng-show = "IsVisible[orderedNumber]">response</div>
</div>
script.js:
$scope.ShowHide = function (orderedNumber) {
//This will hide the DIV by default.
$scope.IsVisible[orderedNumber] = false;
$scope.ShowHide = function (orderedNumber) {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible[orderedNumber] = $scope.IsVisible[orderedNumber] ? false : true;
}
};
How can I create a list of buttons using AngularJS?
Just use a property in the var instead of managing an array like this :
ng-click="ShowHide(x)"
ng-show = "x.visible"
$scope.ShowHide = function (item) {
item.visible = !item.visible
};
EDIT : If you don't have any more logic in the Showhide function you also could do this :
ng-click="x.visible = !x.visible"
I want to have two radio options. Basically one that says "No" and another that says "Yes", and below the Yes one, I want to have about 3 checkboxes. I want "No" to be selected by default, but if any of the checkboxes under "Yes" are clicked, it should switch from "No" to "Yes".
A small javascript function can handle it for you. Then you call the function when a checkbox is ticked or a radio button is selected.
Check out
http://www.javascriptkit.com/javatutors/radiocheck.shtml
This is similar but with buttons http://www.somacon.com/p143.php
This is using jquery
$(document).ready(function(){
$('.yesbox').click(function () {
var x = $('.yesbox:checked').length;
if (x > 0){
$('#yn2').attr('checked', 'checked');
$('#yn1').attr('disabled', true);
}
});
$('body').click(function () {
var x = $('.yesbox:checked').length;
if (x == 0){
$('#yn1').attr('disabled', false);
}
});
});
And html would go like this:
<input type='radio' id='yn1' name='yn' value='No'> No<br>
<input type='radio' id='yn2' name='yn' value='Yes'> Yes
<input type = 'checkbox' name='check1' id='check1' class='yesbox' value = '1'> 1
<input type = 'checkbox' name='check2' id='check2' class='yesbox' value = '2'> 2
<input type = 'checkbox' name='check3' id='check3' class='yesbox' value = '3'> 3