Telerik Forums
UI for ASP.NET MVC Forum
3 answers
2.0K+ views
Hi,

I would like to hide a specific row in a Kendo UI MVC Grid. Can anybody please help me in this.

---Satish
Alexander Popov
Telerik team
 answered on 19 May 2014
5 answers
216 views
I have a grid with ClientTemplate columns which render to buttons for navigating to other MVC pages.  The first column renders to:
<td role="gridcell"><a href="/WebPortal/Patient/GetPatient/500507" class="btn btn-sm">View Patient</a></td>

However, when I add the .Events parameter, then the ClientTemplate columns do not work and render as:
<td>500507</td>

I want to execute a DataBound event but it messes up the columns.  Any ideas?  Code follows:
@(Html.Kendo().Grid(Model)
        .Name("PatientSearchGrid")
        .Columns(columns =>
        {
            columns.Bound(e => e.LName).Title("Last Name");
            columns.Bound(e => e.FName).Title("First Name");
            columns.Bound(e => e.ReferralDate);
            columns.Bound(e => e.Status);
            columns.Bound(e => e.ID).Hidden();
            columns.Bound(e => e.ID).ClientTemplate(
                "<a href='" + Url.Action("GetPatient", "Patient") + "/#= ID #'" + "class='btn btn-sm'>View Patient</a>"
                ).Width(110).Title("");
            columns.Bound(e => e.ID).ClientTemplate(
                "<a href='" + Url.Action("CreateAccount", "Patient") + "/#= ID #'" + "class='btn btn-sm'>Create Account</a>"
                ).Width(127).Title("");
        })
        .HtmlAttributes(new { style = "height: 390px;" })
        .Pageable(pageable => pageable
             
            .PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
            .ButtonCount(5))
        .Sortable()
        .Filterable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(s => s.Add(n => n.LName))
            .PageSize(20)
            .ServerOperation(false))
        //.Events(events => events.DataBound("dataBound"))
)
Dimiter Madjarov
Telerik team
 answered on 19 May 2014
2 answers
82 views
I was looking around for an example of how to use the grid control has the datasource for the DataViz control. Would like the pie chart to change based on the filtered data shown in the grid. Thanks
Mike
Top achievements
Rank 1
 answered on 19 May 2014
3 answers
263 views
Hi, 
I´m trying to use a treeview with checkboxes for definition User Rights. (2 actions - enabled/disabled right)
How can I to get value (id) from parent node ?

I attached an example what I need.
Alex Gyoshev
Telerik team
 answered on 19 May 2014
5 answers
186 views
Hi!

We have a grid using popup editing from an ASP editor template - pretty simple. In the popup there is a cascading dropdown (company => department). Our primary goal this time was to auto-select the first entry in the department dropdown on databinding (could this maybe be added as an option of the dropdown in the future?), but when developing this we ran into some MVVM issues. The editor template is similar to this (with an added debug input box to illustrate MVVM behaviour):

@(Html.Kendo().DropDownList()
       .Name("CompanyId")
       .OptionLabel("Choose company")
       .BindTo(MMHtmlHelperExtension.SelectListForCompany(Model != null ? Model.CompanyId : null))
       .HtmlAttributes(new { data_value_primitive = "true" })
      )
 
@(Html.Kendo().DropDownList()
       .Name("DepartmentId")
        .OptionLabel("Choose department") //We would like to remove this, but if this is removed and the dropdown contains only one element that element cannot be selected
       .DataSource(source => source
           .Read(read => read.Action("GetDepartmentsInCompany", "EditorTemplates", new {area = ""}))
           .ServerFiltering(true))
       .Enable(false)
       .AutoBind(false)
       .CascadeFrom("CompanyId")
       .HtmlAttributes(new { data_value_primitive = "true" })
      )
<input id="inputToIllustrateMVVMBehaviour" data-bind="value: DepartmentId" />

To select the first element we tried (in javascript on document ready) using the select() function and the value() function, both of which visibly changed the value of the department dropdown but none of which changed the MVVM value (input value visibly, but more importantly grid ajax post on finishing editing):


departmentDropDownList
            .dataSource
            .bind("change", function(e) {
                    if (departmentDropDownList.select() == 0) {
                        departmentDropDownList.select(1); //Visibly changes the dropdown, but does not update the MVVM value
                        $("#DepartmentId_listbox").children().eq(1).click(); //Extremely hacky workaround that actually works. Selecting a department manually by clicking also works.
                    }
                });

SO - the main questions:

  • Is it possible to make the line "departmentDropDownList.select(1)" actually update the model? Can the update be forced in some way? Isn't that type of code really supposed to work out of the box?
  • Is it possible to access the model of the popup directly? (instead of "dropdown.select(1)" do "popupModel.DepartmentId = theNewId" for example)
  • Also - when adding/updating a grid using popup, the new line's columns "Company name" and "Deparment name" will be empty in this case until the post-back is done (the Id columns will work though). Is it possible to update the Company/Department name values when selecting values in each dropdown?

Best regards
Victor

Vladimir Iliev
Telerik team
 answered on 19 May 2014
11 answers
797 views
Is there anyone one who used kendo ui grid with signalr in an asp.net mvc 4 application? I could not find any sample using them both. I'm trying to develop a sample as in the stock ticker sample. I need any kind of help.

Thanks in advance,
Vladimir Iliev
Telerik team
 answered on 16 May 2014
1 answer
121 views
Hi

Is it possible to override the default ListView styling. In particular I have a grey border around my listview that i'd like to remove.

Thanks
Ant
Top achievements
Rank 1
 answered on 16 May 2014
2 answers
109 views
Hi,

I'm having an issue getting the MonthTemplateID property to function correctly when used with a Kendo DatePicker control. For some reason, the code within the template seems to execute, but the results are different than when I execute the same code from within the .MonthTemplate property. 

The model has as a property a serialized string with shortDateTime strings in it that I use to determine whether or not to highlight a date This is the action that returns the partial view:
[HttpGet]
public PartialViewResult GetSearchPartialView(string projectName)
{
    RawrSearchAreaModel model = new RawrSearchAreaModel();
 
    // get a list of all window dates from DB
    List<DateTime> RunDates;
 
    using (RAWREntities dbcontext = new RAWREntities())
    {
        RunDates = dbcontext.Messages.Where(m => m.ProjectName == projectName).Select(x => x.RunDateTime).Distinct().ToList();
    }
    JavaScriptSerializer jss = new JavaScriptSerializer();
    model.ScheduledDatesJson = jss.Serialize(RunDates.Select(x => x.ToShortDateString()).ToArray());
 
    return PartialView("_rawrSearchArea", model);
}

And here is a working example of a DatePicker that correctly highlights the appropriate dates:
@(Html.Kendo().DatePicker()
    .Name("startDatePicker")
    .Events(events =>
    {
        events.Change("startDateChanged");
    }
    )
    .MonthTemplate("#if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), " + @Model.ScheduledDatesJson + ") != -1) {#" +
                     "<div class='dateHasWindows'>" +
                    "#}else {#" +
                    "<div>" +
                    "#}#" +
                    "#= data.value #" +
                    "</div>"
    )
 )

However, I have multiple calendar-like controls on the page that need the same date highlighting functionality. Rather than include the same MonthTemplate for each of them, I wanted to create one template and then call it from each of the controls.

Here is how I am attempting to utilize the separate template:
@(Html.Kendo().DatePicker()
    .Name("startDatePicker")
    .Events(events =>
    {
        events.Change("startDateChanged");
    }
    )
    .MonthTemplateId("calendarTemplate")
 )

And here is how I attempted to create the template:
<script id="calendarTemplate" type="text/x-kendo-template">
    #if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), " + @Model.ScheduledDatesJson + ") != -1) {#
          <div class='dateHasWindows'>
    #}else {#
          <div>
    #}#
    #= data.value #
    </div>
</script>

I inserted an alert into the template to ensure that it was being called and executed, but the formatting is never applied when the template is called this way. For some reason, the inArray function is always returning -1, even when I can see that the date string is in the string that is being compared against (I output the stringified date value, the compare result, and the string array in my alert to verify this).

Am I doing something incorrectly in the template definition that prevents things from executing correctly?
Any help would be appreciated.

Thanks!
Jarrod
Top achievements
Rank 1
 answered on 15 May 2014
1 answer
1.1K+ views
I've been looking, but I can't seem to find a clear example of what I'm looking for. I wish to add an ajax.ActionLink to each row of my grid that has the ID of the row.  When this link is clicked, I wish for this ID to be sent back to the controller so that I can do some additional functions, and pass back a new set of data to be displayed in a different div.  This is my code for now.  This particular grid performs one function, which is to maintain the information on any new attorneys that we receive correspondence for, and they're able to add and update as needed.  Now, the function I need is for them to select an attorney, new or current, and send that ID back to a controller to perform a completely separate update to a different table, and display the details of that update in a grid in a separate partial view contained in the "attyImgDtls" div referenced.

If the Ajax link isn't possible, I need to know how to add a link to each row, and send the ID of that row back to a controller to perform the new update that I need.  I already tried adding a separate custom button, but got errors stating that a custom button couldn't be added for my particular situation.  I'm not quite sure why there isn't a simple "select" action available along with the Read, Update, and Create actions.

@(Html.Kendo().Grid(Model)

        .Name("SubroAttorneys")

        .Columns(columns =>

        {

            columns.Template(@<text></text>).ClientTemplate(

                @Ajax.ActionLink("Add", "SelectNewAtty", new { EquipmentId = "#= SubroAttyID#" }, 

                 new AjaxOptions { HttpMethod = "POST", Confirm = "Are you sure?", UpdateTargetId="attyImgDtls", InsertionMode = InsertionMode.Replace }).ToHtmlString()

            );

                        columns.Bound(a => a.SubroAttyFirmName).Title("Firm Name").Width(250);

            columns.Command(command => { command.Edit(); }).Width(250);


 

        })

        .ToolBar(toolbar => toolbar.Create())

        .Editable(editable => editable.Mode(GridEditMode.PopUp))

        .DataSource(dataSource => dataSource

            .Ajax()

            .Model(model => model.Id(a => a.SubroAttyID))

                .Create(update => update.Action("AttyEditingPopup_Create", "ClerkMain"))

                .Update(update => update.Action("AttyEditingPopup_Update", "ClerkMain"))

                .Read(update => update.Action("AttyEditingPopup_Read", "ClerkMain"))


 

        )

        .Selectable()        

        .ClientDetailTemplateId("template")
       )





Dimo
Telerik team
 answered on 15 May 2014
1 answer
357 views
Hi All,

I am learning on Kendo grid features with MVC4 and EF5 db first.
I am able to use dropdown in kendo grid for update.
But found small issue with selecting the first item in the dropdown inside kendo grid when creating new record.
Step to reproduce:
1. "Add new record" then try to fill in the type as dropdownlist with the first item available.
2. When you get focus to the dropdownlist, it is showing the first item as default, but when you lost focus (without clicking any item), it will not fill in the grid with the first item from dropdown list.
3. Even if you try clicking on the first item from the dropdownlist, it is still not filling the grid with the first item.

It is working find if you selecting the second or thirds and so on. Only happened to the first item of the dropdownlist.
Please find the code in the attachment.
Any help will be much appreciated.





Vladimir Iliev
Telerik team
 answered on 15 May 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
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
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?