Above is some MVC code.  I've tested this code using local binding and it works, but when I call it remotely and bind it, it doesn't.  However, it does trace into the following function:


And I see the trace using Fiddler,  and I can debug it, but when the Json object is returned, nothing shows up in the grid.  There is data there, and Im getting no javascript errors.  Any idea what I'm missing?

Hi Kendo support,

I was trying to transer the telerik logic of editing in treeview node, but got some problem, is there any sample example in kendo for editing the node, Also i want to do for adding the node in treeview as well.  Any sample or idea will be helpful.

Below is my telerik code for editing,  

//Partial page

@model IEnumerable<PFLMakeTreeviewModel> 
@model IEnumerable<PFLMakeTreeviewModel> 
  
  <script type="text/javascript">
    function onLoad(e) {
   
        // subscribe to the contextmenu event to show a contet menu
        $('.t-in', this).live('contextmenu', function(e) {
            // prevent the browser context menu from opening
            e.preventDefault();

            // the node for which the 'contextmenu' event has fired
            var $node = $(this).closest('.t-item');

            // default "slide" effect settings
            var fx = $.telerik.fx.slide.defaults();

            // context menu definition - markup and event handling
            var $contextMenu =
                $('<div class="t-animation-container" id="contextMenu">' +
                    '<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
                        '<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
                      //'<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
                    '</ul>' +
                '</div>')
                .css( //positioning of the menu
                {
                    position: 'absolute',
                    left: e.pageX, // x coordinate of the mouse
                    top: e.pageY   // y coordinate of the mouse
                })
                .appendTo(document.body)
                .find('.t-item') // select the menu items
                .mouseenter(function() {
                    // hover effect
                    $(this).addClass('t-state-hover');
                })
                .mouseleave(function() {
                    // remove the hover effect
                    $(this).removeClass('t-state-hover');
                })
                .click(function(e) {
                    e.preventDefault();
                    // dispatch the click
                    onItemClick($(this), $node);
                })
                .end();

            // show the menu with animation
            $.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });

            // handle globally the click event in order to hide the context menu
            $(document).click(function(e) {
                
                // if clicked inside the editing textbox - discard
                if ($(e.target).is('#TreeView14 :text'))
                    return;

                // remove any textboxes from the treeview and update the node if needed
                $('#TreeView14 :text').each(function() {
                    var $textBox = $(this);
                    var newText = $textBox.val(); 
                    var oldText = $textBox.data('text');
                    
                    // the node to which the textbox belongs to
                    var $node = $textBox.closest('.t-item');
                    
                    // remove the textbox from the node
                    $textBox.replaceWith($('<span class="t-in" />').html(newText));
                    
                    // if the text changed update the node
                    if (newText != oldText) {
                        onEdit($node);
                    }
                });

                // hide the context menu and remove it from DOM
                $.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
                    $contextMenu.remove();
                });
            });
        });
    }
    
    function onItemClick($item, $node) {
        var treeView = $('#TreeView14').data('tTreeView');
        var nodeText = treeView.getItemText($node);
        var menuItemText = $item.text();

        if (menuItemText == "Edit") {
            // replace the node contents with a textbox
            setTimeout(function() {
                $node.find('.t-in:first')
                     .replaceWith($('<input type="text" />')
                        .val(nodeText)
                        .data('text', nodeText)
                        .keydown(function(e) {
                            if (e.keyCode == 13) {
                                // handle enter key - edit the node
                                
                                var newText = $(this).val();
                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(newText));
                                
                                if (newText != nodeText) {
                                    // if the text changed update the node
                                    onEdit($node);
                                }
                            
                            } else if (e.keyCode == 27) {
                                // handle escape key - cancel editing
                                
                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(nodeText));
                            }
                        }))
            }, 0);
        } 
//else if (menuItemText == "Delete") {
//            //delete the node
//            onDelete($node);
//        }
    }

    function onEdit($node) {
        var treeView = $('#TreeView14').data('tTreeView');
        
        // post to HomeController.EditNode using jQuery
        $.post('@(Url.Action("EditNode", "ReferenceFiles"))',
            { 
            
                level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
                id: treeView.getItemValue($node),
                text: treeView.getItemText($node)
            }
        );
        }


//    function onDelete($node) {
//        var treeView = $('#TreeView14').data('tTreeView');
//        
//        if (confirm('Are you sure you want to delete this node?')) {
//            
//            // post to HomeController.DeleteNode using jQuery
//            $.post('@(Url.Action("DeleteNode", "ReferenceFiles"))',
//            {
//                level: $node.parents('.t-item').length,
//                id: treeView.getItemValue($node),
//            });
//            
//            $node.remove();
//        }
//    }

//        function AppendItem() {
//    debugger
//        var treeView = $("#TreeView14").data("tTreeView");
//        var itemData = { Text: $("#itemText").val() };
//        var selected = getSelected();
//        treeView.append(itemData, selected.length != 0 ? selected : null); 
//    }

</script>
  
   @* <button onclick="AppendItem()" class="t-button">Add new item</button>
    @Html.TextBox("itemText", "Add item", new { style = "width: 100px" })         *@
                         


<style type="text/css">
     ul.t-widget.t-group.t-menu.t-menu-vertical
    {
    background-color:White;
    width:80px;
    font-size: 10pt;
    color:black;
    }
    div.t-top, div.t-mid, div.t-bot
    {
      width:20%;  
    }
</style>

  
@(Html.Telerik().TreeView()
        .Name("TreeView14")
             .ClientEvents(events => events.OnLoad("onLoad"))
        //.DragAndDrop(settings => settings                
        //    .DropTargets(".drop-container")) 
        .BindTo(Model, mappings =>
        {
            mappings.For<PFLMakeTreeviewModel>(binding => binding
                    .ItemDataBound((item, make) =>
                    {
                        
                        item.Text = make.MAKE_DESCRIPTION;
                        item.Value = make.MAKE_ID.ToString();
                                            
                    })
                    .Children(make => make.Models)
             );
             mappings.For<PFLModelTreeviewModel>(binding => binding
                    .ItemDataBound((item, model) =>
                    {
                        item.Text = model.MODEL_DESCRIPTION;
                        item.Value = model.MODEL_ID.ToString();
                    })
                    .Children(model => model.Series)
             );
             mappings.For<PFLSeriesTreeviewModel>(binding => binding
                    .ItemDataBound((item, serie) =>
                    {
                        item.Text = serie.SERIE_DESCRIPTION;
                        item.Value = serie.SERIE_ID.ToString();
                    })

            );
            
            
        })
                
        )
       

//Controller

[HttpPost]
        public ActionResult EditNode(int level, int id, string text)
        {
            var ausfleet = new AUSFLEETEntities();
            ReferencesFiles _ReferencesFiles = new ReferencesFiles();

            if (level == 0)
            {
                var make = ausfleet.PFL_MAKE.FirstOrDefault(c => c.MAKE_ID == id);
                if (make != null)
                {
                    make.MAKE_DESCRIPTION = text;
                }
            }
            else if (level == 1)
            {
                var model = ausfleet.PFL_MODEL.FirstOrDefault(p => p.MODEL_ID == id);
                if (model != null)
                {
                    model.MODEL_DESCRIPTION = text;
                }
            }

            else
            {
                var serie = ausfleet.PFL_SERIE.FirstOrDefault(p => p.SERIE_ID == id);
                if (serie != null)
                {
                    serie.SERIE_DESCRIPTION = text;
                }
            }
            ausfleet.SaveChanges();
            return new EmptyResult();
        }
 

hi i am new telerik panel bar
can any one give me source code to bind my panel bar from database using entity framework

Consider the following code i want to set the grid datePicker column empty if date validation fails WorkOrderDate< task date , any help would be higly appreciable.


***********Grid***************

columns.Bound(c => c.WorkOrderDetailsDate).Title("Estimated Start Date").EditorTemplateName("WorkOrderDetailsDate")

***********Editor**************

@model DateTime?
@(Html.Kendo().DatePicker()
.Name("WorkOrderDetailsDate")
.Value(Model == null ? DateTime.Now.Date : ((DateTime)@Model).Date)
.Events(d=>d.Change("TaskDateValidate"))
)

*************JavaScript***********
function TaskDateValidate(e)
{

     if ($("#workOrder_EstStartDate").val() != null && $("#workOrder_EstStartDate").val() != "") {
    var workDate = kendo.parseDate($("#workOrder_EstStartDate").val());
    var taskDate = kendo.parseDate(kendo.toString(this.value(), 'd'));

       if (taskDate < workDate)
       {

       showMessage("Task date should be after work order Date");
        this.value(""); <-----this is not working want to set to empty to force user to select date again
           this.value("28/02/2014");<---this is not working as well...
       }
}


please advise on this problem
reagrds
Shaz

You've all been doing this for a bit, so please be patient...

Please follow along to see the logic…don't assume the initial error is my issue...

In MVC - I have a part view and wanted a datepicker on it.

So in my _PartialFormName.cshtml I had (from the  sample) the following:

<input id="datepicker" />
        <script>
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
</script>
 
This reports the error $ not defined.

That's because the render scripts call hasn't loaded the JQuery library at the bottom of the _Layout.cshtml page:

    @Scripts.Render("~/bundles/scripts")

AND the script is not in a @section Script section that will be rendered by the call: 

    @RenderSection("scripts", required: false)

So, I put the script for datetimepicker it in the @section Script block...

BUT that's in the main MainPage.cshtml razor page, NOT the _PartialFormName.cshtml partial page…
 
So I need to know and collect all the control scripts of ALL partial views and put their scripts in the containing page?

******************************************
Now the best practice question...

Should I reference a child script named for that partial view containing all of the kendo scritps for that page?

How do we best contain kendo scripts? Is there a best practice?

Thanks

 

 

Thanks

R

Hi,

I have question that in my project there are different test cases and i want to generate new chart for each of this test case.I tired placing for loop before the kendo chart in the view for each of different test case but only one chart is generated.The datasource o this chart is using ajax binding.How do i get different charts for same datasource using different parameters passed to the action method?

I am having grid with virtual scroll and Batch editing functions.
If, I make some value changes on first row it shows red mark. After scrolling the grid (on virtual scroll call), that red mark gets removed. Value remain changed, but, red mark gone from a cell.

Could anyone provide a link for the demo solution file so I can have a look at the views etc.

Thanks

John

Hello,

I currently have a clear grid button and the following code clears the rows from the grid:

$("#studentGrid").data('kendoGrid').dataSource.data([]);

But my problem is, I have a ClientFooterTemplate with totals.  How do I clear the ClientFooterTemplate in a javascript call?  I could do it on the DataBound event, but just don't know how to clear that footer.

Thanks...

I am working on a UI where I am editing grid in an Ajax Popup Edit. The following data annotations do not work as expected in the popup edit:

 [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }

        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [StringLength(500, ErrorMessage = "Image path cannot be more than 500 characters.")]
        [Display(Name = "Image path")]
        [DataType(DataType.ImageUrl)]
        [RegularExpression(@"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?$", ErrorMessage = "Image path format is incorrect.")]
        public string ImagePath { get; set; }

Currently for Add/Edit both, I am getting a minimum password length should be 6. Also both for Add and Edit I get "Image path format is incorrect" even when there is nothing typed in that field

In addition to the above
On Edit - I do not want the password to be required. On New I want password to be required.

Thanks