Hello i'm trying to figure out a way to conditionally "hide" a column using an "#if" statement, if a user is NOT a SuperUser and i'm trying this "#if" approach because i know that the 'template' : '#if(isAppAdmin == true) statement works fine. Or another approach that would work would be if there's a way to "hide" the 'edit' command button if a user is NOT a SuperUser, thanks for any suggestions or pointers!
{
'title' : 'Is Admin',
'field' : 'isAppAdmin',
'width' : '90px',
'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#',
'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#'
},
<script>
$(document).ready(function () {
$(".k-grid-edit",
"#grid").hide();
});
</script>
<script type="text/x-kendo-template" id="admin-template"> <div class="admin-container"> <label></label><input data-role="combobox" class="k-combobox" data-placeholder="Select user..." data-text-field="userName" data-value-field="userId" data-filter="startswith" data-bind="value: selUser,source: userDs" style="width:300px;" /> <a> <img data-bind="click: onAddNew, attr: {src: addNewImgUrl}" style="vertical-align:middle;" /> <span>Add new</span> </a> </div> <hr class="hr-style" /> <div style="margin:5px;"> <div id="gridAppUsers" data-role="grid" data-columns="[ { 'title' : 'User ID', 'field' : 'userId', 'width' : '130px' }, { 'title' : 'Name', 'field' : 'userName', 'width' : '150px' }, { 'title': 'Position', 'field': 'position' }, { 'title' : 'Email', 'field' : 'email', 'width' : '170px' }, { 'title' : 'Phone', 'field' : 'phoneNumber', 'width' : '120px' }, { 'title' : 'Is App User', 'field' : 'isAppUser', 'width' : '90px', 'template' : '#if(isAppUser == true) {# yes # } else {# no #}#' }, { 'title' : 'Is Admin', 'field' : 'isAppAdmin', 'width' : '90px', 'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#', 'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#' }, { 'title' : 'Is Super User', 'field' : 'isSuperUser', 'width' : '90px', 'template' : '#if(isSuperUser == true) {# yes # } else {# no #}#' }, { 'command' : ['edit', 'destroy'], 'title': ' ', 'width': '180px' } ]" data-editable="inline" data-sortable="true" data-scrollable="true" data-selectable="single, row" data-bind="source: appUserDs , events: { save: onSave, remove: onDelete }"> </div> </div></script><script> $(document).ready(function () { $(".k-grid-edit", "#grid").hide(); });</script>Say I have an event handler function defined for a grid's beforeEdit event:
beforeEdit: function(e) { deferredpromise = doSomethingAsync(e.sender, e.model);// we'll return back here immediately, while whatever async stuff we started is still executing
// and we'll return to Kendo from here before it is done
}The code in doSomethingAsync() does an AJAX call, among other things. As far as I can tell, there's no way to have this work inside a Kendo event like beforeEdit? My function is going to return immediately, and even if I return a promise, Kendo isn't designed in any way to take it back and wait on it before continuing with preparing the editor? And there's no way short of somehow blocking on Javascript's execution while waiting for my ajax to complete (a horrible no-no) to prevent returning control to Kendo from the beforeEdit handler?
The problem I'm trying to solve is others making changes being made to the underlying remote database on records being displayed in the grid. If "myAttribute" starts out as "123" when the page is loaded, then someone else somehow modifies that to "456", if the first person edits the record to change something else, the stale "123" value will be sent out and used in the update. I was going to have the beforeEdit handler retrieve the data for the row being edited from the remote server, compare it to the dataRec, and update any stale fields, but I run into the async problem described above.
I don't know if this might sort-of-work anyway - the async handler would use the model's set() method, and perhaps the editor window would visually refresh any elements that get modified by the async handler behind its back after the binding is done and the window is up? Even then, there would be potential timing issues with the user and UI.
I just wanted to see if I was missing something obvious on waiting on the async to complete before returning from beforeEdit. The alternative we are looking at would be to add modification timestamps to the database tables involved, and if an update come in from Kendo and the stamps in the payload don't match the database record, the update would be rejected. Aside from not wanting to monkey with our existing database schema unless absolutely necessary, it would require the user to re-enter their edits after a refresh.

I also tried to add just a text html value bound to what i know is a populated field "employeeViewModel.ssn", but the binding doesn't seem to show the data, so thanks for any pointers ect!
<!DOCTYPE html><html><head> <title>New Employee</title></head><body> <div id="employeeWin" style="margin:5px;padding:5px;"> <table class="bip-table" cellpadding="0" cellspacing="0"> <tr> <td width="60%"> <input class="k-textbox" type="text" disabled="disabled" style="width:100%" data-bind="value: employeeViewModel.ssn" /> </td> </tr>................... onEmployeeUpdateSSN: function (e) { var ssn = e.data.employeeViewModel.ssn; var dob = e.data.employeeViewModel.dateOfBirth; var lastName = e.data.employeeViewModel.lastName; var firstName = e.data.employeeViewModel.firstName; var title = lastName +","+firstName+ " SSN: " + ssn + " DOB: " + dob; $('#winAddNew').kendoWindow({ actions: {}, width: '400px', height: '300px', title: title, animation: { open: { effects: "fade:in", durration: 1000 }, close: { effects: 'fade:out', duration: 1000 } }, content: Bip.Common.bipWebPath() + 'templates/EmployeeUpdateSSNWin.html', modal: true, iframe: true, resizable: false, scrollable: false, close: function () { var data = $('#employeeData').val(); if (data.length > 2) { var jObj = JSON.parse(data); if (jObj.isSaved === true) { var eItem = that.get('employeeItemDs').get(jObj.ssn); //if (eItem) { // alert('Emloyee ' + jObj.firstName + ' ' + jObj.lastName + ' already existed'); //wrkipjames //} //else { //that.setNewEmployeeData(jObj); that.setNewEmployeeSSN(jObj); //} } } $('#employeeData').val(''); } }); $('#winAddNew').data('kendoWindow').open(); $('#winAddNew').data('kendoWindow').center(); //$('.k-window-title').text(title); //$('employeeWin').text(title); //$('employeeWin').prev().find(".k-window-title").text(title); //$('employeeWin').prev().find(".k-window-title").setOptions({ // title: "Notes on " + title, // width: "60%" //}); //window.element.find(".k-window-title").text(title); //e.container.kendoWindow("title", title); //$(e.container).parent().find(".k-window-title").text(title); works for the initial title, but doesn't change //var dataItem = $('#cFoo', this.element)[0].kendoBindingTarget.source; //var tHis = this; //dataItem.bind('set', function (pEvent) { // if (pEvent.field == 'Foo') // tHis.setOptions({ title: 'Editing ' + title }); //}); //$('#winAddNew').data.setOptions({ title: title }); }, Hi All,
I am working on Telerik Kendo Grid. The scenerio is :
Passing function with parameter in columns.bound client template, but getting the below error
"Uncaught ReferenceError: InvoiceStatus is not defined"
Note : With out giving parameter in the function its working fine.
Please verify the code below :
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<NH.Accounts.Models.ProviderPaymentMemberLevel>() //<a onclick='alert(\"#: encode(OrderName) #\")' href='\\#'>#= OrderName #</a> ClientTemplate("#=someFuntion(ExecutionStartDateTime)#");
.Name("grid_#=ProviderId#")
.HtmlAttributes(new { style = "backgroud-color:#27326e " }) //"<a onclick=\"showOrderDetail('#= OrderName #')\" href='\\#'>#= OrderName #</a>"
.Columns(columns =>
{
//"#if(TotalBalance > 0) {#" + "<span style='padding-right: 10px;'>$ #=TotalBalance#</span><input type='checkbox' 'checked=checked' class='master-pay-checkbox' data-providerid='#=ProviderId#'></input>#}#"
columns.Bound(o => o.InvoiceStatus).Filterable(false).Width(10).ClientTemplate("#= GetInvoiceStatusColor(InvoiceStatus) #").HtmlAttributes(new { style = "text-align: left" });
Thanks
Bhanu

We wanted to use in-cell editing with a checkbox following this as an example.
https://www.telerik.com/support/code-library/checkbox-column-and-incell-editing
Pulled from : https://www.telerik.com/forums/grid-checkbox-editor-issue-with-incell-editing
Plus we used the option "Navigatable"
The result is when the checkbox is selected in the column, the Grid will jump scroll to the top. If you remove the Navigatable (false), the problem goes away.
Here is a work example of the issue.
https://dojo.telerik.com/iXoxeveM
In our example, we are trying to support keyboard navigation along with in-cell editing. Are we trying to mix two things that can't be mixed together?
Thank you


I have a bootstrap modal window that is set to be shown when a button on the page is clicked. Immediately after the javascript to show the window, I have tried to set the value of a ColorPicker which sits inside the modal div. However, the value method doesn't move the ColorPicker's cursor if done this way and it always shows up in the top-left corner. The only way I've seen to get around this limitation is by setting the ColorPicker's value in the shown.bs.modal function, after the modal has completely finished being shown. Unfortunately, this causes the modal to be displayed first and then the value is updated shortly afterwards (~half a second later) and is quite visible to the user. This oddity is also shared by the ColorPicker's slider, whose width is for some reason set to a length much too short for its container and the only way I've found to fix it is by setting the width in the same shown.bs.modal function (with the same unfortunate side-effect).
Is this by design or is there a correct way to do this? I've tried searching the forums but I couldn't find anyone with similar problems.
If I send like this data: {CusCode:'5555', MktID: "aa"}
0=%7B&1=C&2=u&3=s&4=C&5=o&6=d&7=e&8=%3A&9=%20&10='&11='&12=%2C&13=M&14=k&15=t&16=I&17=D&18=%3A&19=%20&20='&21=a&22=a&23='&24=%7D
When I Use AJAX
HOW TO USE like this data: "{Field:'',Text:'',page:1,rows:50000}" and don't enclipe my code
$.ajax({ type: "POST",
contentType: "application/json; charset=utf-8",
url: "Service.asmx/M_Portfolio_selMaster",
dataType: "json",
data: "{Field:'',Text:'',page:1,rows:50000}",
async: true,
success: function (response) {
var data = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
var tbl;
data = data.rows;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
tbl += "<OPTION value='" + data[i]['PortfolioID'] + "'>" + data[i]['PortfolioCode'] + "</OPTION>";
}
$("#s").html(tbl);
}
}
});
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
// the remote service url
url: "wsCRM.asmx/crm_FinancialBenefitByCustomer", // GetBBGToADVTransactionsData is our web method
contentType: "application/json; charset=utf-8",
type: "POST",
// JSONP is required for cross-domain AJAX
dataType: "json",
// additional parameters sent to the remote service
data: {
CusCode:'5555',
MktID: "aa"
}
}
}
}
});
My Web service asp.net C#
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string crm_FinancialBenefitByCustomer(string CusCode,string MktID)
{
CRMDataContext dtx = new CRMDataContext();
var data = dtx.crm_FinancialBenefitByCustomer(CusCode, MktID, UserID).ToList();
JavaScriptSerializer js = new JavaScriptSerializer();
string strJSON = js.Serialize(data);
//strJSON = "{\"__count\":\"" + data.Count + "\" ,\"results\":" + strJSON + "}";
return strJSON;
}
Hi All
I'm trying to export the HTML table contents to grid, when I open the spreadsheet, the first column comes with unwanted characters, since it is a hyperlink <a> tag within the <TD> tag. Please refer the example below:
https://dojo.telerik.com/inOGITIL
Please let me know how this can be avoided.
Thanks
Vijhay Devarajan.