Telerik Forums
Kendo UI for jQuery Forum
1 answer
178 views
MVC, Razr

I've got a model Event.  Event has children Participants.  

On the detail page for Event I am trying to display a list of participants for the currently viewed event and give the user the option to select participants.  

 I can't figure out how to display the participants for the currently selected Event using JSON bound grid.  I did manage to get this working with the events on the index page (selectable events, checkboxes etc), but I can't figure out how to create a JSON request to the controller for the participants for the currently selected Event.  

I did have better luck with binding to the view model (below), but I can't get my checkboxes to display (first column) and even if I get them displaying, I'm not really sure I want to loop through the rows with jscript and process each checked row. 

Thanks in advance

michael

<code>
====== Controller ========
        public ActionResult Details(int id = 0)
        {
            Event evt= db.EventFind(id);
            if (deform == null)
            {
                return HttpNotFound();
            }
            return View(evt);
        }

====== View ========
@model Application.Models.Event
...
@(Html.Kendo().Grid(Model.Participants).Name("participantsGrid")
      .Columns(c =>
          {
              c.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= ApprovedFlag ? checked='checked':'' # class='chkbx' />")
             .HeaderTemplate("<p>Org Approved</p>");
             c.Bound(p => p.FullName).ClientTemplate(@Html.ActionLink("#=FullName#", "Details", new { Id = "#=ParticipantId#" }).ToHtmlString());
             c.Bound(p => p.ParticipantId);
              c.Bound(p => p.OrgApprovedFlag);
          })
            .DataSource(ds => ds
                   .Server()
                    .Model(model =>
                    {
                        model.Id(p => p.ParticipantId);
                    })
            .Read(read => read.Action("GetParticipants", "Event"))
            )
          )
</code>
Petur Subev
Telerik team
 answered on 29 Oct 2013
3 answers
212 views
Hello Good afternon
I have a Grid in my application recently I added this property in style

 .k-grid {
    font-size: 10px;
}

but when Grid has only One Row dosen“t show me the text's row,
and if i removed   .k-grid { font-size: 10px;} then Grid loaded correctly
can you tell me why happend that?
Dimiter Madjarov
Telerik team
 answered on 29 Oct 2013
7 answers
286 views
Hello,
I us e the kendo panelbar to substitute a custom component to generate an accordion.
I created in the code-behind a hierarchy of <ul> - <li> levels with a sequence of HtmlGenericControl objects;
I initialized in a js script the top ul HtmlGeneric Control with

$("#panelbar").kendopanelbar();

It worked fine, but unfortunately the old custom component has on every main item bar, the <li> item, another icon to trigger actions as expand and edit a general review for the item. See image below.
The whole is a panelbar, the dark blue lines are the <li> items, the icon on the left is the expand/collapse icon, the icon on the right allows clicking on it to trigger an action. The light blue part is the list of the various sub items.
So I would need to add an image in the main item and to have an event when I click this image, sort of superimpose a button with an image on the main item bar. 
What could be a workaround using the kendopanelbar to reproduce this behavior ? 

And further is it possible to port the kendo panelbar in mobile environment ?

Sorry for the vague thread topic, I wasn't able to find a proper definition 
 Thanks for your attention

 

best regards

 

Marco Furlan
marco
Top achievements
Rank 1
 answered on 29 Oct 2013
2 answers
165 views
Hello,

I am using the Kendo UI Grid control with the following key features activated:
  • Custom Toolbar
  • Batch Editing
I would like to get a string from a textbox in the custom toolbar when the user saves the changes made in grid. Here my code:

@(Html.Kendo().Grid(Model.TrackAndTraceTypeList)
    .Name("Grid")
    .Columns(columns =>
    {  
        columns.Bound(item => item.CustomerLevel).Title("Customer<br/>Level").Width(80);
        columns.Bound(item => item.TrackAndTraceTypeId).Title("T&T<br/>Type Id").Width(80);
        columns.Bound(item => item.TrackAndTraceTypeName).Title("T&T Type<br/>Name");
        columns.Bound(item => item.Level).Title("Level").Width(60);
        columns.Bound(item => item.Description).Title("Description");
        columns.Bound(item => item.MTC).Title("MTC").Width(60);
        columns.Bound(item => item.Failure).Title("Failure").Width(80);
        columns.Bound(item => item.Success).Title("Success").Width(80);
        columns.Bound(item => item.Multiple).Title("Multiple").Width(80);
        columns.Bound(item => item.Photo).Title("Photo").Width(60);;
        columns.Bound(item => item.MessageTypeId).Title("Msg<br/>Type Id").Width(80);
    })
    .ToolBar(toolbar =>
        {
            toolbar.Template(@<text>          
            <div class="k-toolbar k-grid-toolbar k-grid-top">
                <table style="width:400px">
                    <tr>
                        <td>
                            <a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)">
                                 <span class="k-icon k-update"></span>Save changes
                            </a>
                            <a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)">
                                <span class="k-icon k-cancel"></span>Cancel changes
                            </a
                        </td>
                        <td>                   
                            <label class="category-label" for="category">Version No:                           
                                <input id="txtVersionNumber" type="text" style="width: 80px" />
                            </label>
                        </td>
                    </tr>
 
                </table>
           </div>      
        </text>);
        })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Groupable()
    .Pageable(page => page.PageSizes(new int[] { 10, 20, 30, 50 }))
    .Sortable()
    .Filterable()
    .Selectable(s => s.Mode(GridSelectionMode.Single))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => {
            model.Id(ttt => ttt.TrackAndTraceTypeId);
            model.Field(ttt => ttt.TrackAndTraceTypeId).Editable(false);
            model.Field(ttt => ttt.TrackAndTraceTypeName).Editable(false);
            model.Field(ttt => ttt.CustomerLevel).Editable(false);
            model.Field(ttt => ttt.Level).Editable(false);
            model.Field(ttt => ttt.MessageTypeId).Editable(false);
        })
        .PageSize(20)
        .Read(read => read.Action("TrackAndTrace_Read", "Customers"))
        .Update(update => update
            .Action("TrackAndTrace_Update", "Customers")
            .Data("versionNumber"))
     )
     .Resizable(resize => resize.Columns(true))
)
</div>
 
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
 
    function versionNumber(){
        return {version: $("#txtVersionNumber").val()};
    }
 
</script>
And my Controller look like this:
public ActionResult TrackAndTrace_Read([DataSourceRequest] DataSourceRequest request)
       {
           // Get the customer Id from the URL
           int customerIdValue = 0;
 
           if (Request.UrlReferrer.Segments.Length > 1)
           {
               string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];
               int.TryParse(customerId, out customerIdValue);
           }
 
           var data = GetCustomerTrackAndTraceTypeDetails(customerIdValue, request.Page).TrackAndTraceTypeList.AsEnumerable();
 
           return Json(data.ToDataSourceResult(request));
       }
 
       [AcceptVerbs(HttpVerbs.Post)]
       public ActionResult TrackAndTrace_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<CustomerTrackAndTraceType> trackAndTraceTypes)
       {
           if (trackAndTraceTypes != null && ModelState.IsValid)
           {
               int customerIdValue = 0;
                
               if (Request.UrlReferrer.Segments.Length > 1)
               {
                   string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];
                   int.TryParse(customerId, out customerIdValue);
               }
 
               Customer currentCustomer = db.Customers.Find(customerIdValue);
 
               foreach (var tttItem in trackAndTraceTypes)
               {
                   // Save the Track And Trace Type Updates
                   db.AddCustomerTrackAndTraceTypeLink(tttItem.TrackAndTraceTypeId,
                       tttItem.CustomerId,
                       tttItem.Description,
                       tttItem.MTC,
                       tttItem.Failure,
                       tttItem.Multiple,
                       tttItem.Success,
                       tttItem.Photo,
                       User.Identity.Name); // record who made the change
 
                   // Update the customer level for the Grid
                   tttItem.CustomerLevel = currentCustomer.Name;
               }
           }
 
           return Json(trackAndTraceTypes.ToDataSourceResult(request, ModelState));
       }
To summarize, I need to pass the data in the txtVersionNumber into the db.AddCustomerTrackAndTraceTypeLink() method.

Thanks in advance,
Paul
Paul Ridden
Top achievements
Rank 1
Veteran
 answered on 29 Oct 2013
7 answers
670 views
Here is what I've got:

Controller:

        public ActionResult TestIndex()
        {
            var model = new Zeus.Models.SiteModels();
            Models.Site[] sites = model.List(50, 1);

            return View(sites.ToList());
        }


View:

@model IEnumerable<Zeus.Models.Site>
@{
    ViewBag.Title = "TestIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>TestIndex</h2>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Groupable(false);
        columns.Bound(p => p.Address1);
        columns.Bound(p => p.CityName);
        columns.Bound(p => p.OwnerGroupName);
    })
    .Pageable()
    .Sortable()
    .Scrollable() 
    .Filterable()    
    .DataSource(dataSource => dataSource        
        .Ajax()
        .ServerOperation(false)        
     )
)


I get an error:
[ArgumentOutOfRangeException: Index must be within the bounds of the List.<br>Parameter name: index]<br>   System.ThrowHelper.ThrowArgumentOutOfRangeException(ExceptionArgument argument, ExceptionResource resource) +64<br>   System.Collections.ObjectModel.Collection`1.Insert(Int32 index, T item) +9573490<br>   Kendo.Mvc.UI.Grid`1.WriteHtml(HtmlTextWriter writer) +365<br>   Kendo.Mvc.UI.WidgetBase.ToHtmlString() +86<br>   Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.ToHtmlString() +22


Any idea why?
Rosen
Telerik team
 answered on 29 Oct 2013
3 answers
320 views
Hi,

I need to insert single characters programmatically into an editor (use case symbol selector for special characters).

Using the insertHTML API I can insert the right character, but the character/string is inserted outside the existing text-span's in the editor.
Same result when using the 'paste' API.

Since the character is *not* inserted inside the span of the existing text, it will be using the default formatting, and not the formatting of the text next to it.

Example: "ABC" is entered into the editor, the font-size is set to a non-default size.  If a character is inserted using insertHTML or paste after the "ABC", it will be using the default font-size, not the size of the text next to it.

Is there a way to insert a character or string into the current text-span so formatting can be preserved ?

Thanks.
Mikkel
Top achievements
Rank 1
 answered on 28 Oct 2013
1 answer
48 views
I have attached a simple test app to replicate this behavior.
There are 2 pages, the main index.html page, and a remote list.html page.
On the index page there is a textbox into which you can enter any input. When you click the login button the value of that input is read and echoed to the console, as well as appended to the URL for the remote view.

So if you enter 'bilbo' the URL for the remote view will be ".../list.html?val=bilbo'".

If you hit the cancel button on the list page you go back to the index page. Now the interesting part. If you enter another value in the text box and click login, it will always read 'bilbo' from the text box.

What I have noticed:
if the cancel button on the list page invokes app.navigate("#:back") or you use the back button everything works.
if you invoke app.navigate("index.html") or app.navigate("vIndex") then we get the same 'locked in' behavior.

Now, in this example it's great that the "#:back" function works. But in my actual app I have multiple remote views and I can't transition between them to capture new input. Once the value is set the first time it's locked in.

Petyo
Telerik team
 answered on 28 Oct 2013
15 answers
1.4K+ views
Hi there

I am trying to implement Image Browser for Kendo Editor using the example here : http://demos.kendoui.com/web/editor/imagebrowser.html

My controller class : 

public class ImageBrowserController : EditorImageBrowserController
    {
        private const string contentFolderRoot = "~/Content/";
        private const string prettyName = "Images/";
        private static readonly string[] foldersToCopy = new[] { "~/uploads/newsitem/" };
 
 
        /// <summary>
        /// Gets the base paths from which content will be served.
        /// </summary>
        public override string ContentPath
        {
            get
            {
                return CreateUserFolder();
            }
        }
 
        private string CreateUserFolder()
        {
            var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName);
 
            var path = Server.MapPath(virtualPath);
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
                foreach (var sourceFolder in foldersToCopy)
                {
                    CopyFolder(Server.MapPath(sourceFolder), path);
                }
            }
            return virtualPath;
        }
 
        private void CopyFolder(string source, string destination)
        {
            if (!Directory.Exists(destination))
            {
                Directory.CreateDirectory(destination);
            }
 
            foreach (var file in Directory.EnumerateFiles(source))
            {
                var dest = Path.Combine(destination, Path.GetFileName(file));
                System.IO.File.Copy(file, dest);
            }
 
            foreach (var folder in Directory.EnumerateDirectories(source))
            {
                var dest = Path.Combine(destination, Path.GetFileName(folder));
                CopyFolder(folder, dest);
            }
        }
    }
My js code

$("#Content").kendoEditor({
        encoded: false,
        imageBrowser: {
            messages: {
                dropFilesHere: "Drop files here"
            },
            transport: {
                read: "/console/ImageBrowser/Read",
                destroy: {
                    url: "/console/ImageBrowser/Destroy",
                    type: "POST"
                },
                create: {
                    url: "/console/ImageBrowser/Create",
                    type: "POST"
                },
                thumbnailUrl: "/console/ImageBrowser/Thumbnail",
                uploadUrl: "/console/ImageBrowser/Upload",
                imageUrl: "/console/ImageBrowser/Image?path={0}"
            }
        },
        tools: [
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "fontSize",
            "foreColor",
            "backColor",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            "createLink",
            "unlink",
            "insertImage",
            "style",
            "viewHtml"
        ],
        style: [
                { text: "Highlight Error", value: "hlError" },
                { text: "Highlight OK", value: "hlOK" },
                { text: "Inline Code", value: "inlineCode" }
        ],
        stylesheets: [
            "../../content/web/editor/editorStyles.css"
        ]
    });

My image folder is : /uploads/newsitem and the code generates a folder /content/userfiles/images and this folder does have write permission. 

When any actions are invoked on EditorImageBrowserController they are 404'ed. I've attached a screen shot to show what is going on.

Any help would be greatly appreciated.
Rosen
Telerik team
 answered on 28 Oct 2013
3 answers
107 views
Hi Telerik support team
I am using custom icons for listview but those don't work fine using the documentation guidelines
I Attached the project for your review.

Thanks in advance and I am aware for your help.

Regards.

Diego Varela
Kiril Nikolov
Telerik team
 answered on 28 Oct 2013
1 answer
152 views
Hi everyone! 

I'm having a problem with treeview - I need to set a callback function (or an individual parameter to a common function, which would be even better) for the click event on each treeview leaf element (or all elements regardless whether they be leaf or non-leaf node). Imagine it as a structured menu for javascript functions (not http links).


 I'm now using a very unelegant and unnice workaround with javascript: link in dataUrlField. I'v been reading through this forum, SO and whatever google threw at me but could not find any single mention about callbacks in the treeview other than dataUrlField and the select event, use of which I find as unfeasible as the first possibility I mentioned. 

Thank you very much for ideas and suggestions.

Pavel
Pavel
Top achievements
Rank 1
 answered on 28 Oct 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?