We Keep Coding

Kendo UI Grid: show DetailTemplate with conditions

I want to show DetailTemplate for Kendo UI Grid by conditions.
I tried the following cases:
detailTemplate: '#if(ResultDate!= null){ =kendo.template($("#detailRequestTemplate").html()) }#',
and
detailTemplate: function (e) {
if (ResultDate != null)
{
return kendo.template($("#detailRequestTemplate").html());
}
},
both of them don't work correctly

Try putting this logic inside the template instead.
<div id="grid"></div>
<script type="text/x-kendo-template" id="detailRequestTemplate">
#if(ResultDate !== null) {#
//...your template html
#}#
</script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
detailTemplate: kendo.template($("#detailRequestTemplate").html()),
});
});
</script>
For a more complete example, look at this dojo.
Also take a look at Telerik's Templates Overview documentation.

I found a solution for it:
dataBound: function (e) {
var items = e.sender.items();
items.each(function () {
var row = $(this);
var dataItem = e.sender.dataItem(row);
if (ResultDate !== null) {
row.find(".k-hierarchy-cell").html("");
}
})
},
This code removes an "arrow", if condition is false

How to dinamicly delete current <div> in for loop with jquery

I need delete dinamicly div in my for loop, I try do that with jquery but it delete only "Delete" button but I need delete button and in div textbox and checkbox
this is my code
<div class="editorRow">
#for (int i = 0; i < Model.AnswerList.Count; i++)
{
#Html.TextBoxFor(x => x.AnswerList[i].Description)
#Html.CheckBoxFor(x => x.AnswerList[i].IS_Right, new { id = '1'})
delete
<script type="text/javascript">
$("a.deleteRow").click( function () {
$(this).click(".editorRow").remove();
return false;
});
</script>
}
</div>

Try
$("a.deleteRow").click( function () {
$(this).closest('.editorRow').remove();
return false;
});
Note you are giving all your checkboxes the same id attribute (that's invalid html)

Try This
$("a.deleteRow").click( function () {
$(this).parent('.editorRow').remove();
return false;
});

adding totals on grid not working via jquery

Not sure what i am doing wrong here but I have a webpage which has a usercontrol wrapped in an update panel. This usercontrol has a gridview with a textbox in an ItemTemplate and a textbox in a footer template. The textbox in the footertemplate is supposed to get the calculated value from a function in jquery. Below is my script to get the total but the total doesn't get calculated. Please advise what am I doing wrong here. Also, let me know if I need to provide additional information. This script is in the master page. I tested to make sure jquery is working by putting the alert after the document ready which it works. Any help would be greatly appreciated.
<script language="javascript">
var totalQuantity = 0;
$(document).ready(function() {
//alert('This is test');
$(document).on('blur', 'input[id^="MainContent_MainContent_ucProjectionSet3_upProjections"]', function() {
alert('This is test');
totalQuantity = 0;
$('input[id^="MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_"]').each(function(index) {
doTotalCal($(this).attr("id"));
});
});
function doTotalCalc(_id) {
var indexVal = _id.Replace("MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_", "");
console.log(indexVal);
var strTotalQuantity = $('input[id^="MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_' + indexVal + '"]').val().replace("$", "");
totalQuantity += Number(strTotalQuantity);
}
$("#MainContent_MainContent_ucProjectionSet3_gvProjections_lblCurrentTimeTotal").html(totalQuantity);
});
</script>

I was able to accomplish this without using update panel. I didn't need to have an asynchronous postback for this project, so removing it was a fine option in making the jquery to work.
<script type="text/javascript">
$(document).ready(function() {
$("[id*=gvProjections]input[type=text][id*=txtCurrentTime]").keyup(function(e) {
GrossTotal();
});
});
var gross;
function GrossTotal() {
gross = 0;
$("[id*=gvProjections]input[type=text][id*=txtCurrentTime]").each(function(index, item) {
gross = gross + Number($(item).val());
});
$("[id*=gvProjections][id*=lblCurrentTimeTotal]").text(gross);
}
function isNumberDecimalKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 46) //decimal
return true
else if (charCode > 57 || (charCode > 31 && charCode < 48))
return false;
else
return true;
}

How to check block adding characters if the input text is a special character?

I have a gridview and it has some columns .
For example: Name|Age|Birthday
How can I filter the textbox so if the user is typing a special character it won't be added.
I know I need to use this : ^[^0-9a-zA-Z]*$ , but I don't know how.
Thanks

OnBlur and OnKeyUp Events of TextBox
JavaScript
<script language="javascript" type="text/javascript">
function validation() {
var txt = document.getElementById('<%= txt.ClientID%>').value;
var regex = new RegExp('[^0-9a-zA-Z]+');
while (txt.match(regex)) {
if (txt.match(regex)[0] == "") break;
txt = txt.replace(regex, '');
}
document.getElementById('<%= txt.ClientID%>').value = txt;
}
function onkeyUpEvent() {
validation();
}
function onBlurEvent() {
validation();
}
</script>
MarkUp
<asp:TextBox ID="txt" runat="server" onkeyup="onkeyUpEvent();"
onblur="onBlurEvent();"></asp:TextBox>

var lastValidValue;
input.addEventListener('keydown', function(evt) {
// before change capture current value;
lastValidValue = input.value;
}, false);
function onchange(evt) {
if (/^[^0-9a-zA-Z]*$/.test(input.value))
// if its valid, update preserved field.
lastValidValue = input.value;
else
// otherwise revert to previous data.
input.value = lastValidValue;
}
input.addEventLisenter('keyup', onchange, false);
input.addEventListener('change', onchange, false);
where input is a reference to your textbox.

How do I disable or enable 2nd dropdownlist in aspx based on selected choice of the 1st dropdownlist box

I am having a problem with disabling DropDownList based on the chice of 1st DropDownList, there is no post back occuring, and it is a template based web app here is the current code:
<script type="text/javascript">
$(function() { var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>'); dropDownList1.change(function(e) {
if ( jQuery("#ddlUserType").val() != "ETOC") dropDownList2.removeAttr('disabled'); e.preventDefault();
else
dropDownList2.removeAttr('enabled'); e.preventDefault(); }
} );
</script>
what is happening now is page is blank and if I remove the above code everything shows, where I am going wrong.
here is the plain and final javascript code which worked:
<script language="javascript">
function CheckDropDownState(lstbox)
{
if (lstbox.selectedIndex == 3) { document.forms[0].ddlMember.disabled = 1; }
else { document.forms[0].ddlMember.disabled = 0; }
}
</script>
and thew .aspx code:
<asp:dropdownlist id="ddlUserType" runat="server" onclick="CheckDropDownState(this);"></asp:dropdownlist>
Once again appreciate the help guys.

I've tried cleaning your code a little bit:
$(function() {
var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>');
dropDownList1.change(function(e) {
var selectedValue = $(this).val();
if (selectedValue != 'ETOC') {
// enable the second combo if the value selected in the first combo
// is not ETOC
dropDownList2.removeAttr('disabled');
} else {
dropDownList2.attr('disabled', 'disabled');
}
e.preventDefault();
}
});