Telerik Forums
UI for ASP.NET MVC Forum
1 answer
535 views
Hi, I have kendowindow working great, except I need to run jquery events after the window has rendered contents. Is there an event I can hook into when external content is done loading?  Like other widgets, or jquery ui widgets do or ajax calls.   I thought I saw success functions but maybe other widgets have them, not the kendo window?
thanks
Marty

  $("#window").kendoWindow({
            content: {
                url: url,
                data: { id: 5}
            },
            actions: ["Custom", "Refresh", "Maximize", "Minimize", "Close"],
            draggable: true,
            height: "400px",
            modal: false,
            resizable: true,
            title: false,
            width: "400px",
            minWidth: 200,
            minHeight: 200,
        });
Petur Subev
Telerik team
 answered on 13 Dec 2012
3 answers
920 views
I have a Kendo UI grid with a custom column as such:
columns.Template(@<text></text>)
              .Width(50)
              .ClientTemplate("#= getDeleteHTML(Id, DisplayLocation) #");
It calls a js function to build the html to inject as a form to submit for a delete:
function getDeleteHTML(itemId, itemName) {
        var deleteHtml = "<form action='"+ '@Url.Action("Delete", "ManageLocations")'+"/" + itemId +"' method='post'>"
                            + "<input type='image' onclick='return confirm(\"Are you sure you wish to delete: \r\n " + itemName + "?\");' value='Delete' class='delete' src='../Images/transparent.gif'>"
                        + "</form>";
        return deleteHtml;
    }

I want to break the confirmation message into 2 lines. I've tried \r\n and @Environment.NewLine + itemName as I'm not sure which parser is being used (client or server) in this case.

How can I achieve this? Sorry, I am fairly new to client side scripting so I'm sure this is easy, but supposedly just \r\n should work, but it doesn't...here is what is rendered in the browser:

<form action="/CompanyMgmt/ManageLocations/Delete/1003" method="post"><input type="image" onclick="return confirm("Are you sure you wish to delete:
RECV-A-01-1-1-1?");" value="Delete" class="delete" src="../Images/transparent.gif"></form>
And when you click on the item, the confirm box never displays, it just submits the form.

Petur Subev
Telerik team
 answered on 13 Dec 2012
5 answers
239 views
Hello there,

I'm getting pretty frustrated. I have been trying to get my RESTful WCF service to work with the ListView controller. I was reusing the code from the demo (http://demos.kendoui.com/web/listview/editing.html) and adjusting it to my own needs. I have googled for help on how to enable my service to support JSONP, even though in my test bench I execute it locally.

I have a webservice that produces this JSON output:
[{"Id":"acd34cd2-4500-4e2e-988d-2f71738cb7b6","Name":"Plan 1","NextRun":"06-01-2013 04:43:55","NoOfJobs":7,"Status":0},{"Id":"5431e4ef-943c-4bcb-b747-378416face14","Name":"Plan 2","NextRun":"13-04-2013 03:23:02","NoOfJobs":7,"Status":0},{"Id":"ab9ce9ea-c9d1-4f90-be36-b6aca23c247d","Name":"Plan 3","NextRun":"09-12-2012 13:11:04","NoOfJobs":7,"Status":0},{"Id":"93b4689b-d39c-45fa-979a-93148dd81978","Name":"Plan 4","NextRun":"05-01-2013 18:56:21","NoOfJobs":7,"Status":0},{"Id":"61e89143-e6d6-4d3b-9c06-88509c2c9b55","Name":"Plan 5","NextRun":"06-03-2013 03:03:07","NoOfJobs":7,"Status":0},{"Id":"877244ee-3a63-4733-8f3e-a8154ab5b04c","Name":"Plan 6","NextRun":"05-02-2013 00:17:46","NoOfJobs":7,"Status":0}]

The webservice looks like this:
[ServiceContract]
    public interface IPlanListRESTService
    {
        [OperationContract]
        [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "fillplanlist/{count}")]
        List<Plan> FillPlanList(string count);

        [OperationContract]
        [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "plan")]
        bool AddPlan(Plan plan);

        [OperationContract]
        [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "planlist")]
        List<Plan> GetPlanList();

        [OperationContract]
        [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "xml/{id}")]
        string XMLData(string id);

        [OperationContract]
        [WebInvoke(Method   = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "json/{id}")]
        string JSONData(string id);
    }

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class PlanListRESTService : IPlanListRESTService
    {

        List<Plan> planList = new List<Plan>();
        static Random rand = new Random();

        public List<Plan> FillPlanList(string count)
        {
            try
            {
                int noOfPlans= Convert.ToInt32(count);

                if ((noOfPlans < 0) || (noOfPlans > 25))
                    return planList;

                planList.Clear();

                for (int i = 1; i <= noOfPlans; i++)
                {
                    Plan plan = new Plan();

                    plan.Id = Guid.NewGuid().ToString();
                    plan.Name = "Plan " + i.ToString();
                    plan.Status = PlanStatus.Waiting;

                    Random random = new Random();
                    plan.NoOfJobs = random.Next(0, 8);

                    plan.NextRun = GetRandomDate(new DateTime(2012, 11, 1), new DateTime(2013, 5, 1));

                    planList.Add(plan);
                }

                return planList;
            }
            catch (Exception)
            {
                return planList;
            }
        }

        public bool AddPlan(Plan plan)
        {
            plan.Id = Guid.NewGuid().ToString();
            planList.Add(plan);

            return true;
        }

        public List<Plan> GetPlanList()
        {
            return planList;
        }

        public string XMLData(string id)
        {
            return "You requested product " + id;
        }

        public string JSONData(string id)
        {
            return "You requested product " + id;
        }

        public string ToJSon(object obj)
        {
            JavaScriptSerializer oSerializer = new JavaScriptSerializer();
            return oSerializer.Serialize(obj);
        }

        public string GetRandomDate(DateTime dtStart, DateTime dtEnd)
        {
            int cdayRange = (dtEnd - dtStart).Days;

            return dtStart.AddDays(rand.NextDouble() * cdayRange).ToString();
        }
    }

The web.config for the service looks like this:
<?xml version="1.0"?>
<configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <system.serviceModel>
    <services>
      <service name="PlanListRESTService.PlanListRESTService" behaviorConfiguration="ServiceBehavior">
        <endpoint address="" binding="webHttpBinding"
                  bindingConfiguration="webHttpBindingWithJsonP"
                  contract="PlanListRESTService.IPlanListRESTService"
                  behaviorConfiguration="Web"/>
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="Web">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <protocolMapping>
        <add binding="basicHttpsBinding" scheme="https" />
    </protocolMapping>    
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="true"/>
  </system.webServer>

</configuration>

And finally here is the Index.cshtml file that should render the listview with my data, but it doesn't :-( :
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<div id="example" class="k-content">
    <div class="k-toolbar k-grid-toolbar">
        <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new plan</a>
    </div>
    <div id="listView"></div>

    <div id="pager" class="k-pager-wrap">
    </div>

    <script type="text/x-kendo-tmpl" id="template">
        <div class="plan-view">
            <dl>
                <dt>Name</dt>
                <dd>${Name}</dd>
                <dt>No. of jobs</dt>
                <dd>${NoOfJobs}</dd>
                <dt>Next run:</dt>
                <dd>${NextRun}</dd>
                <dt>Status</dt>
                <dd>${Status}</dd>
            </dl>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="editTemplate">
        <div class="plan-view">
            <dl>
                <dt>Plan Name</dt>
                <dd>
                    <input type="text" data-bind="value:Name" name="Name" required="required" validationMessage="required" />
                    <span data-for="Name" class="k-invalid-msg"></span>
                </dd>
                <dt>No. of jobs</dt>
                <dd>
                    <input type="text" data-bind="value:NoOfJobs" data-role="numerictextbox" data-type="number" name="NoOfJobs" required="required" min="0" validationMessage="required" />
                    <span data-for="NoOfJobs" class="k-invalid-msg"></span>
                </dd>
                <dt>Status</dt>
                <dd>
                    <input type="text" data-bind="value:Status" name="Status" required="required" data-type="number" min="0" validationMessage="required" />
                    <span data-for="Status" class="k-invalid-msg"></span>
                </dd>
                <dt>Next run</dt>
                <dd>
                    <input type="text" data-bind="value:NextRun" name="NextRun" required="required" data-type="number" min="0" validationMessage="required" />
                    <span data-for="NextRun" class="k-invalid-msg"></span>
                </dd>
            </dl>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
            </div>
        </div>
    </script>

    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "http://localhost:8080/PlanListRESTService",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read:  {
                            url: crudServiceBaseUrl + "/fillplanlist/20",
                            dataType: "jsonp"
                        },
                        //update: {
                        //    url: crudServiceBaseUrl + "/fillplanlist/20",
                        //    dataType: "jsonp"
                        //},
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/fillplanlist/20",
                        //    dataType: "jsonp"
                        //},
                        //create: {
                        //    url: crudServiceBaseUrl + "/fillplanlist/20",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {models: kendo.stringify(options.models)};
                            }
                        }
                    },
                    batch: true,
                    pageSize: 6,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true },
                                Name: "Name",
                                NextRun: "Next run",
                                NoOfJobs: { type: "number" },
                                Status: { type: "number" }
                    }
                        }
                    }
                });


            $("#pager").kendoPager({
                dataSource: dataSource
            });

            var listView = $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html()),
                editTemplate: kendo.template($("#editTemplate").html())
            }).data("kendoListView");

            $(".k-add-button").click(function(e) {
                listView.add();
                e.preventDefault();
            });
        });
    </script>
    <style scoped>
        .plan-view
        {
            float: left;
            width: 300px;
            margin: 5px;
            padding: 3px;
            -moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            border-top: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .plan-view dl
        {
            margin: 10px 0;
            padding: 0;
            min-width: 0;
        }
        .plan-view dt, dd
        {
            float: left;
            margin: 0;
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .plan-view dt
        {
            clear: left;
            padding: 0 5px 0 15px;
            text-align: right;
            opacity: 0.6;
            width: 100px;
        }
        .k-listview
        {
            border: 0;
            padding: 0;
            min-width: 0;
        }
        .k-listview:after, .plan-view dl:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .edit-buttons
        {
            text-align: right;
            padding: 5px;
            min-width: 100px;
            border-top: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .k-toolbar, #listView, .k-pager-wrap
        {
            width: 960px;
            /*margin: 0 auto;*/
            -webkit-border-radius: 11px;
            -moz-border-radius: 11px;
            border-radius: 11px;
        }
        #listView
        {
            width: 960px;
        }
        span.k-invalid-msg
        {
            position: absolute;
            margin-left: 160px;
            margin-top: -26px;
        }
    </style>
</div>

<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<p>
    To learn more about working with the Kendo UI Complete for ASP.NET MVC, you can visit the folowing resources:
</p>
<ul>
        <li><a href="http://demos.kendoui.com/">online demos</a></li>
        <li><a href="http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction">online documentation</a></li>
        <li><a href="http://www.kendoui.com/forums.aspx">community forums</a></li>
        <li><a href="http://tv.telerik.com/search?FilterByTags=KendoUI">videos on Telerik TV</a></li>
</ul>

Help me please
Daniel
Telerik team
 answered on 13 Dec 2012
1 answer
224 views
What is the solution of customizing all message in different language?
for example: total items and current page
Daniel
Telerik team
 answered on 13 Dec 2012
3 answers
361 views
I am getting following issues for kendoui chart

Question 1)  Chart datetime UTC issue-
I am able to format the datetime to UTC by using the template but same functionality is not available in chart.
template: '#= moment(new Date(PeriodEnd)).format(\'YYYY-MM-DD HH:mm:ss\') #'

Following is my code for chart

<div data-bind="kendoChart: { data:  SeriesValues, series: [{ name: 'Quantity', field: 'Quantity' }],  tooltip: {visible: true},
                       legend: {position: 'top'}, 
                        title: { text: 'Quantity vs Time - Bar Graph'},                       ,
        categoryAxis: { field: 'PeriodEnd', labels:{rotation: -60} } 
                                              }"></div>
 
i am looking to convert the UTC format of my field: 'PeriodEnd'.

Question 2)
Chart text localization from .resx file
                for the above code I am looking for localizing the 'Quantity' and 'Quantity vs Time - Bar Graph' from .resx file.
              we databind the keys from .resx as follows (Please see following line) but I cant do same in chart.
               <span data-bind="restext: 'selectgraph'" class="viewLabels"></span>
              
          
T. Tsonev
Telerik team
 answered on 12 Dec 2012
2 answers
168 views
Hi,

I have the following grid inside a jqueryui dialogbox:

<div id="dlgAddProduct" title="Select Product to Add">
    @(Html.Kendo().Grid(Model.productList.Products)   
        .Name("ProductGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.id).Title("ID").Groupable(false).Width(70);
            columns.Bound(p => p.catgDesc).Title("Category").Width(200).Groupable(true);
            columns.Bound(p => p.name).Title("Product Name").Groupable(false);
            columns.Bound(p => p.price).Title("Price").Width(100).Groupable(false);
        })
        .Resizable(resizing => resizing.Columns(true))
        .Groupable()
        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
        )
    )
</div>
The dialog is defined as follows:
$("#dlgAddProduct").dialog({
    autoOpen: false,
    height: 540,
    width: 765,
    modal: true,
    resizable: true,
    open: function () {
        if ($('#hidProdListOK').val() == "") {
            loadProducts();
        }
    },
    buttons: {
        "Reload": function () {
            loadProducts();
        },
        "Close": function () {
            $(this).dialog("close");
        },
        "Add Selection": function () {
            addSelected();
        },
    }
});

When I drag the groupable column to the group area on top of the grid the "no parking" sign is displayed not allowing me to create the group. 
When I move the grid outside of the dialogbox everything works fine.

I'm using jQuery 1.8.6, jqueryui 1.9.2 and kendoUI 2012.3.1114

Any help is greatly appreciated.

Thanks,

PT
Pierre
Top achievements
Rank 1
 answered on 12 Dec 2012
3 answers
183 views
where can I find documentation on MVC widget templating such as the grid? I see examples here and there on 
http://demos.kendoui.com/web/grid eg. rowTemplate: kendo.template($("#rows").html()), altRowTemplate: kendo.template($("#rows-alt").html()),

but where can I find documentation for templating for mvc? would also like to see documentation as to how to use logic in templating for the mvc grid wrappers

eg.

# if(product == 12345) { # 
Nikolay Rusev
Telerik team
 answered on 12 Dec 2012
5 answers
231 views
I have a grid that is configured for Ajax editing, and records are edited/added by means of a popup that displays a custom template that contains a number of cascading comboboxes.  It works beautifully for adding a new record.
However, when editing an existing record, all comboboxes have the right value from the bound record being edited, but they are all disabled (except the first one, of course).  So if a user wants to change the value in the last combobox, they must first go through the processes of selecting a different value in each of the other comoboxes, starting at the root one. This is of course cumbersome.  How can I make it that when editing an existing record, all comboboxes are enabled so that the user can go straight to the last one in order to change its value.
Here's how my comboboxes are defined (this is one of 9 cascading combos):
@(Html.Kendo().ComboBoxFor(m => m.Tier2)
        .Placeholder("--Select a Tier 2--")
        .DataSource(ds => {
            ds.Read(rd => {
                rd.Action("GetTier2", "Budget").Data("dataForTier2");
            })
            .ServerFiltering(true);
        })
        .DataTextField("TierName")
        .DataValueField("TierCode")
        .Enable(true)
        .AutoBind(false)
        .CascadeFrom("Tier1")
  )


Thanks for a great product.
Sebastian
Telerik team
 answered on 12 Dec 2012
4 answers
675 views
Hi there,

I am relatively new to Kendo UI.  Have to implement an AutoComplete Box in a Kendo Grid Column, but can not find sample codes
appropriate to my needs. 

Are there sample Codes available, using ASP.NET MVC 4 with Razor ?

Many thanks in advance.
Thomas
Thomas
Top achievements
Rank 1
 answered on 12 Dec 2012
1 answer
399 views
Hi,

How do you change the drop message "Drag a column header and drop it here to group by that column"?

    @(Html.Kendo().Grid(Model.productList.Products)   
        .Name("ProductGrid")
        .Columns(columns =>
        {
...
        })
         .Groupable(g => g.Messages(???))
         .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
        )
Thanks,

PT
Rosen
Telerik team
 answered on 11 Dec 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?