Telerik Forums
UI for ASP.NET MVC Forum
1 answer
327 views
I'm sure this is actually really simple and I'm just making it really complicated, but I could really use a fresh set of eyes on this one.

When a user loads my page with the grid on it, I get the url referrer via JavaScript and analyze it via regex. If the url has a TransactionID (int) in it, I assign it to a JavaScript variable.

Here's my problem: I want to find the row in the grid with that TransactionID and have the grid go right to it (like if it's farther down the grid, I want the grid to scroll down to that row automatically). One way I think I can do this is to focus the row itself, but I can't figure out how to get to it in JavaScript. If I could find the row with the TransactionID, then just call the focus() function, I think that will solve this thing.

Here's what I have. Please help! :(

@(Html.Kendo().Grid(Model)
.Name("TransactionGrid")
.DataSource(dataSource => dataSource
    .Server()
    .Model(model => model.Id(o => o.TransactionsTrackingID))
    .PageSize(1000)
)
.Columns(columns =>
{
    columns.Template(
        @<text>
<a href='@Url.Content("~/Transaction/Details/" + @item.TransactionID)' style="cursor:pointer;">
    Details</a>
</text>
    ).Width(53);
    columns.Bound(r => r.TransactionID).Title("ID").Hidden();
    columns.Bound(r => r.MessageType).Filterable(ftb => ftb.Cell(cell => cell.Delay(autoCompleteDelay)));
     
})
.HtmlAttributes(new { style = "width:100%;" })
.Resizable(resizing => resizing.Columns(true))
.Pageable()
.Groupable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Sortable(sorting => sorting.Enabled(true))
.Scrollable(s => s.Height(600))
                        )




<script type="text/javascript">
 
 
    $(document).ready(function () {
 
        var referrer = '';
 
        if (document.referrer) {
            referrer = document.referrer;
        }
 
        var re1 = '(Transaction)'; // Alphanum 1
        var re2 = '(\\/)'; // Any Single Character 1
        var re3 = '(Details)'; // Word 1
        var re4 = '(\\/)'; // Any Single Character 2
        var re5 = '(\\d+)'; // Integer Number 1
 
        var p = new RegExp(re1 + re2 + re3 + re4 + re5, ["i"]);
        var m = p.exec(referrer);
 
        if (m !== null) {
            var transactionId = m[5]; //this gets the transactionID
 
            var grid = $("#TransactionGrid")
            grid.ready(function () {
                //The code I will need goes in here. :(
            });
        }
    });
</script>
Nikolay Rusev
Telerik team
 answered on 29 Sep 2014
7 answers
1.4K+ views
I need to make a cascading combobox with server filtering but I'm having trouble setting the initial value.The dropdownlist on which the combobox depends looks like this:

1.@(Html.Kendo().DropDownListFor(model => model.SelectedCompany)
2.    .Name("UserDetailSelectedCompany")
3.    .HtmlAttributes(new { style = "width:115px;" })
4.    .BindTo(Model.CompanyList)
5.    .Value(Model.SelectedCompany))
Where:
  • model.SelectedCompany is a string
  • Name attribute is set because I need that in the combobox (I've read on the Kendo UI forums I'm not supposed to specify it, but I don't know how to do the cascading combobox without it)
  • Model.CompanyList is a List<string>
And here's the combobox:

01.@(Html.Kendo().ComboBoxFor(model => model.SelectedDealer)
02.    .Name("UserDetailSelectedDealer")
03.    .DataTextField("Name")
04.    .DataValueField("ID")
05.    .HtmlAttributes(new { style = "width:325px" })
06.    .Filter(FilterType.Contains)
07.    .AutoBind(false)
08.    .Enable(false)
09.    .MinLength(3)
10.    .DataSource(source => source.Read(read => read.Action("GetDealers", "Administration").Data("Administration.GetUserDealerParameters"))
11.                                .ServerFiltering(true))
12.    .CascadeFrom("UserDetailSelectedCompany")
13.    .SelectedIndex(Model.SelectedDealer.ID))
Where:
  • model.SelectedDealer is a Dealer
  • Dealer class contains a Name(string) and an ID (int)
  • MVC action GetDealers return a JSON converted List<Dealer>
Does anyone have an example that demonstrate how I can get this to work? The Kendo UI doc has example for a cascading combobox, server filtering and setting initial value, but not for the 3 at same time.
Daniel
Telerik team
 answered on 29 Sep 2014
1 answer
365 views
Hello,

I am using a Kendo Grid popup which displays a Kendo editor to modify the content of the field. The field is configured on the MVC server side with the annotation to validate length to be 500 characters as follows:

[AllowHtml]
[StringLength(500, ErrorMessageResourceName = "ActionMaxLength", ErrorMessageResourceType = typeof(Resources.Messages))]
public string Action { get; set; }

If the user enters more than 500 characters in the Kendo editor this validation works. However, our users reported that when they added more formatting (tables, bullet lists) the validation pops up even if the visible character count is not 500. I understand from a technical perspective the character count being validated includes the behind-the-scenes html formatting tags, however this is not intuitive to the end user.

My question is, is there any alternative or built in approach to validate just the html-stripped character count of the Kendo editor validation?

Regards,
V. Joseph


Alex Gyoshev
Telerik team
 answered on 29 Sep 2014
5 answers
606 views
I am currently trying to add custom markers to a map in MVC C#.
Is there anyway of creating a different shape/image in MapMarkersShape to display it on the map?
My current code is as follows:

@(Html.Kendo().Map()
    .Name("map")
    .Center(30.268107, -97.744821)
    .Zoom(3)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Bing)
            .Shape(MapMarkersShape.Pin) // -< this line
            .Key("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"); 
    })
)

Thanks
Daniel
Top achievements
Rank 1
 answered on 29 Sep 2014
3 answers
118 views
I have a View with multiple dropdowns(15-20). Currently I implemented server binding for all of these by creating ViewData for every dropdown before loading the View. Is this the best way for implementing multiple dropdowns(server binding)?
Note: Don't want to use AJAX binding.
Georgi Krustev
Telerik team
 answered on 26 Sep 2014
1 answer
66 views
Hi,
 
I have used Kendo UI in an MVC web application. Of late I have been experiencing slowness in IE8 browser.
While the same code loads the screen in less than 2 secs in Chrome/IE10, it takes more than 5-6 seconds to load in IE8 browser.
Kendo widgets used in the screen includes Dropdowns, Treeview and Kendo Tabstrip.
I have tried replacing the kendo dropdowns with normal ones. This gave me a slight improvement of about 1 sec.
The kendo dropdown is a part of my cshtml page and not initialized by the jquery. Is this the best way to implement kendo widgets?
Is there any other way which will provide me with a better performance?

Dimo
Telerik team
 answered on 26 Sep 2014
3 answers
305 views
I have a ap.net mvc4 page in which there is one form and two grids but my problem is that grids are firing the wrong methods and i have no clue what is wrong can someone please help me out i had the similar problem in the past i created a page again with the same code anf it worked but now i am not able to solve this problem. My update method is calling the update method and other methods are firing wrong methods as well please help me out


<kendo:grid>
<%: Html.Kendo().Grid<SSTS.Models.StudentsViewModel>()
    .Name("grid")
          .Columns(columns =>
          {
              // columns.Bound(student => student.CustomerName);
              columns.Bound(student => student.SchoolYear).Width(160);
        
          
              columns.Bound(student => student.YearStart).Width(50);
              columns.Bound(student => student.YearEnd).Width(50);
                columns.Command(commands =>
              {
                  commands.Edit(); // The "edit" command will edit and update data items
                  commands.Destroy(); // The "destroy" command removes data items
              }).Title("Commands").Width(50);
          })
          .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
          .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
          .DataSource(dataSource =>
              dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(student => student.StudentNumber); // Specify the property which is the unique identifier of the model
                //    model.Field(student => student.StudentNumber).Editable(false); // Make the studentID property not editable

                model.Field(p => p.StudentNumbers).DefaultValue(
                      ViewData["defaultCategory"] as SSTS.Models.StudentNumbersViewModel);
         
                
                })
                .Create(create => create.Action("students_Create", "Student")) // Action invoked when the user saves a new data item
                .Read(read => read.Action("students_Read", "Student"))  // Action invoked when the grid needs data
                .Update(update => update.Action("students_Update", "Student"))  // Action invoked when the user saves an updated data item
                .Destroy(destroy => destroy.Action("students_Destroy", "Student")) // Action invoked when the user removes a data item
          )
              .Pageable()
%>




<%: Html.Kendo().Grid<SSTS.Models.StudentsViewModel>()
    .Name("grid2")
          .Columns(columns =>
          {
              // columns.Bound(student => student.CustomerName);
              columns.Bound(student => student.BoardingPoint);//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          
              columns.Bound(student => student.StudentNumber).ClientTemplate(
    "<a href='" +
        Url.Action("ViewStudent", "Home") +
        "/#= StudentNumber #'" +
    ">#= StudentNumber #</a>"
); ;
          
            
              columns.Bound(student => student.Description).Width(250);
              columns.Bound(student => student.NumberofSections).Width(250);
              columns.Bound(student => student.ContactNumber).Width(250);
                columns.Command(commands =>
              {
                  commands.Edit(); // The "edit" command will edit and update data items
                  commands.Destroy(); // The "destroy" command removes data items
              }).Title("Commands").Width(200);
          })
          .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
          .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
          .DataSource(dataSource =>
              dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(student => student.StudentNumber); // Specify the property which is the unique identifier of the model
                //    model.Field(student => student.StudentNumber).Editable(false); // Make the studentID property not editable

              //      model.Field(p => p.CustomerNames).DefaultValue(
               //         ViewData["defaultCategory"] as KendoGridAjaxEditing2.Models.CustomerNamesViewModel);
         
                
                })
                    .Create(create => create.Action("BoardingPoints_Create", "Student")) // Action invoked when the user saves a new data item
                    .Read(read => read.Action("BoardingPoints_Read", "Student"))  // Action invoked when the grid needs data
                    .Update(update => update.Action("BoardingPoints_Update", "Student"))  // Action invoked when the user saves an updated data item
                    .Destroy(destroy => destroy.Action("BoardingPoints_Destroy", "Student")) // Action invoked when the user removes a data item
          )
          .Pageable()

%>




   [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Create([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                var results = new List<StudentsViewModel>();

                if (students != null )//&& ModelState.IsValid)
                {
                       _studNum = HttpContext.Session["StudentNumber"].ToString();
                    StudentRepository.InsertSchoolYear(students, _studNum);
                    results.Add(students);

                }

                return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Update([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                if (students != null && ModelState.IsValid)
                {

                    _studNum = HttpContext.Session["StudentNumber"].ToString();

                    StudentRepository.UpdateSchoolYear(students);
                    UpdateModel(students);




                }
                return Json(new[] { students }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult students_Destroy([DataSourceRequest]DataSourceRequest request, StudentsViewModel product)
            {
                _studNum = HttpContext.Session["StudentNumber"].ToString();

                StudentRepository.DeleteSchoolYear(product);



                return Json(new[] { product }.ToDataSourceResult(request, ModelState));
            }
        




            public ActionResult BoardingPoints_Read([DataSourceRequest] DataSourceRequest request)
            {
                _studNum = HttpContext.Session["StudentNumber"].ToString();


                return Json(StudentRepository.GetSBoardingPoint(_studNum).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Create([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                var results = new List<StudentsViewModel>();

                if (students != null )
                {
                      _studNum = HttpContext.Session["StudentNumber"].ToString();
                    StudentRepository.InsertBoardingPoint(students, _studNum);
                    results.Add(students);

                }

                return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Update([DataSourceRequest]DataSourceRequest request, StudentsViewModel students)
            {
                if (students != null )
                {
                    _studNum = HttpContext.Session["StudentNumber"].ToString();


                    StudentRepository.UpdateBoardingPoint(students);
                    UpdateModel(students);




                }
                return Json(new[] { students }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }

            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult BoardingPoints_Destroy([DataSourceRequest]DataSourceRequest request, StudentsViewModel product)
            {

                _studNum = HttpContext.Session["StudentNumber"].ToString();
                StudentRepository.DeleteBoardingPoint(product);



                return Json(new[] { product }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
Daniel
Telerik team
 answered on 26 Sep 2014
2 answers
2.4K+ views
So I am using the latest build at the time of writing this "2014.2.909" and I have some "info" tooltips that the contents will dynamically change based on a combobox selection.

The tooltip is set up like this: 
1.@(Html.Kendo().Tooltip()
2.  .For(".glyphicon-question-sign")
3. .Position(TooltipPosition.Top)
4.  .Animation(true)                              
5.  .Events(events => events.Show("tooltipReset"))
6.  .Width(450)
7. .ContentTemplateId("tooltip-template")
8.)


Now I am using a template like this:

01.<script id="tooltip-template" type="text/x-kendo-template">
02.              <div id="tooltipContent" class="panel panel-primary">
03.                  <div class="panel-heading">
04.                      <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Helpful Hint</h3>
05.                  </div>
06.                  <div class="panel-body">
07.                      <div class="row">
08.                          <div class="col-md-12">
09.                              #=target.data('title')#
10.                          </div>
11.                      </div>
12.                  </div>
13. 
14.              </div>
15. 
16.          </script>
 

(You can hopefully see I am using bootstrap theme here as well) 

The current tooltipReset function I have created functions like this: 

1.function tooltipReset(e) {
2. 
3.    var contentpanel = $("#tooltipContent").first(".col-md-12").width();
4.    e.sender.refresh();
5.    e.sender.popup.wrapper.width(contentpanel);
6. 
7.}


On top of this I have had to override the current styling to make sure my bootstrap panel appears as I want it without the black surround: 

01..k-tooltip
02.{
03. 
04.}
05. 
06..k-tooltip, .k-tooltip-content
07.{
08.    color:#2a2828;
09.    background:none !important;
10.    background-color:transparent !important;
11.    border:none !important;
12.    
13.}
14. 
15. 
16..k-callout, .k-callout-w{
17.    border:none !important;
18.}


Now this shows a mini panel that floats as I require but I can't seem to get the size to dynamically expand/ contract based on the content being supplied. I tried setting the width to "auto" but this didn't seem to expand the right hand side so the text was either touching or overlapping the panel contents. 

So is there a better way of doing what I want? 


On top of that is there a better way to restyle the tool tips as the changes I have put in have affected other tool tips I have. These are not related to this like graph tool tips etc. 

Thanks in advance. 

Jelly Master
Top achievements
Rank 1
 answered on 26 Sep 2014
1 answer
126 views
Hello,
I've a grid defined as 
@(Html.Kendo().Grid<Communications.Communication>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Protocol).Title(ResourceStrings.Protocol);
            columns.Bound(c => c.Date).ClientTemplate(@DateTimeHtmlHelper.GetParsedDate("Date")).Title(ResourceStrings.Date);
            columns.Bound(c => c.CodiceRapporto).Title(ResourceStrings.CodeDossier);
            columns.Bound(c => c.Type).Title(ResourceStrings.Type);
            columns.Command(commadnAction => commadnAction.Custom("download").Text("Download").Click("Download"));
        })
        .Resizable(resize => resize.Columns(true))
        .Scrollable(scr => scr.Enabled(true))
        .Filterable()
        .Sortable()
         .DataSource(dataSource => dataSource
        .Ajax()
        )
        .ToolBar(toolbar =>
        {
            toolbar.Template(@<text>
                <div class="toolbar">
                    <label>Data da </label>
                    @Html.Kendo().DatePicker().Name("dateFrom").Value(@Model.DateFrom)
                    <label> Data a </label>
                    @Html.Kendo().DatePicker().Name("dateTo").Value(@Model.DateTo)
                    @Html.Kendo().Button().Name("btnCarica").Content(ResourceStrings.BtnLoadData).Events(events => { events.Click("LoadData"); })
                </div>
            </text>);
        }
        )
)

<script>
    function Download(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
    var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"
 
        alert(content);
 
    }
 
</script>

I wish at column click to load open a new page for downloading a pdf....

in other parts of the project I've used something as

var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"

but now I can't since I don't have the link client side.... is there any simple way of doing that?

Thanks
Dimiter Madjarov
Telerik team
 answered on 26 Sep 2014
1 answer
101 views
I'm using VS2012 and MVC5. I dowloaded the telerik.ui.for.aspnetmvc.2014.2.903.trial and followed the below steps

Added the Kendo.Mvc.dll reference to my project. (got Kendo.Mvc.dll from telerik.ui.for.aspnetmvc.2014.2.903.trial\wrappers\aspnetmvc\Binaries\Mvc5)
Copied the JS and Style folders from telerik.ui.for.aspnetmvc.2014.2.903.trial
Created BundleConfig.cs as per the telerik website tutorial
added the reference link _Layout.cshtml and did the web.config settings as suggested

when i run the application i'm getting javascript runtime error in the following debugger code


jQuery(function(){jQuery("#datepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

can please help to resolve my issue.

Dimo
Telerik team
 answered on 26 Sep 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?