Telerik Forums
Kendo UI for jQuery Forum
1 answer
14.4K+ views

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>
Tsvetina
Telerik team
 answered on 17 Jul 2018
1 answer
1.8K+ views

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.

Stefan
Telerik team
 answered on 17 Jul 2018
4 answers
1.5K+ views
Using client side paging, we load the data for our grid. The multi-select filter works just fine. Now, we change some parameters and reload the grid but the additional options that should now appear in the filtering do not appear. Is there a way to have the grid reload the multi select filter options after the data is rebound on the grid?
Bryan Patrick
Top achievements
Rank 1
 answered on 16 Jul 2018
4 answers
2.3K+ views
Hello, i'm trying to change the "title" value for a popup kendoWindow and it works for the first iteration, but when i try to change the title based on user data values, the "title" doesn't change and from what i've read, the "title" isn't a dynamic value, so i've tried a bunch of different solutions i've found on forums, but no luck so far.

 

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>
...................
</html>
           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 });
            },                                                     
robert
Top achievements
Rank 1
 answered on 16 Jul 2018
1 answer
1.4K+ views

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

Georgi
Telerik team
 answered on 16 Jul 2018
1 answer
386 views

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

Konstantin Dikov
Telerik team
 answered on 16 Jul 2018
5 answers
992 views
Hello, good evening 

Your solution solved my previous thanks problem. 

Now, I came to another problem: 

I have a Group entity, which will be displayed in a form where it can be edited. 

Below, have a kendo grid where the local group that appears in the case 1 to N. 

The problem is this, I need to have a single "Save" button to update the Group (Form) and Local (Grid) that group at the same time. 

Could you help me this time? 

Thank you
Konstantin Dikov
Telerik team
 answered on 16 Jul 2018
6 answers
670 views

     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.

Veselin Tsvetanov
Telerik team
 answered on 13 Jul 2018
1 answer
445 views

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;
    }

 

Tsvetina
Telerik team
 answered on 13 Jul 2018
3 answers
143 views

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.

 

 

Vijhay
Top achievements
Rank 1
 answered on 12 Jul 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?