Telerik Forums
UI for ASP.NET MVC Forum
1 answer
173 views

Hey,

maybe i missing something. But it seems there is no support vor the "prompt" property of the DisplayAttribute, isnt? Any plans to have full support for the DisplayAttribute out of the box? Would be awesome!

regards
Kai

Konstantin Dikov
Telerik team
 answered on 30 May 2016
3 answers
2.6K+ views

I'm trying to display a grid according to certain parameters obtained in the read function.

This is my grid:

@(Html.Kendo().Grid(Model)
    .Name("ConciliacionesPendientesDetalle")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ConciliacionDetalle", "ConciliacionItem")
            .Data("PasarParametros"))
        .PageSize(12))
    .Columns(columns =>
    {
        columns.Bound(foo => foo.Id).Title("Id").ClientFooterTemplate("#= count#");
        columns.Bound(foo => foo.OrigenDescripcion).Title("Origen");
        columns.Bound(foo => foo.Varchar1).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar2).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar14).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar15).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar16).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar17).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar18).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar19).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar20).HtmlAttributes(new { @class = "ocultarColumna" });
    })
    .Sortable()
    .Events(e => e.DataBound("onDataBound"))
    .Selectable()
    .Scrollable(s => s.Height(320))
    .AutoBind(false)
)

And whenever I force the grid to read data, I fire this js function:

function onDataBound(e) {

        var serviceUrl = "/ConciliacionItem/ListarDisenios";
        var _url = (window.BASE_URL == null) ? serviceUrl : window.BASE_URL + serviceUrl;
        
        $.getJSON(_url)
            .done(function (data) {
                var grilla = $("#ConciliacionesPendientesDetalle").data("kendoGrid");

                for (var j = 0; j < data.length; j++) {
                   //debugger;
                    for (var i = 2; i < grilla.columns.length; i++) {
                        if (grilla.columns[i].field == data[j].Campo){
                            grilla.columns[i].title = data[j].Valor;
                            grilla.columns[i].hidden = false;
                            grilla.columns[i].attributes.class = "";
                            break;
                        }
                        else {
                            grilla.columns[i].hidden = true;
                            grilla.columns[i].attributes.class = "ocultarColumna";
                        }
                    }
                }                
            })
};

And this is my css class:

ocultarColumna{
    display:none !important;
    visibility:hidden !important;
}

I put both properties just to see if anything works, but so far no luck. What can I do to hide the columns I don“t want to display dynamically?

Matias
Top achievements
Rank 1
 answered on 27 May 2016
1 answer
140 views

I am having issues with the code pasted below (after issues).I have few text fields and two kendo Grids on page. First Grid is Server Bound, Second Grid gets Selected rows of First Grid. I am having following issues 

Issue 1. The second Grid has a ComboBox , How can make that Mandatory ?

Issue 2: When I select a row from First Grid ,it gets added to second. Now i select ComboBox value. If i select another row from First Grid it basically re-initialize ComboBoxes for all rows of Second Grid and I loose first rows Selected value. How can i avoid then and leave the selection intact

Issue 3: To check whether I have something in Second Grid (Which basically holds selected values of First Grid) I am doing following 

var gridItems = $("#SelectedpupilGrid").data("kendoGrid").items();
        // gridItems.length gives 1 even if there is nothing in the Grid (Is this a bug?)
        // thats the reason i am doing        
        // var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total(); to check whether Grid has something or not

Even if there is nothing in Second Grid , gridItems.length gives me 1. How I can resolve this issue.


Code:

@using Kendo.Mvc.UI
@model CreateViewModel
 
@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
 
<div>
    <h3>Enter your detail and then Select Pupil(s)</h3>
</div>
 
@* Adding <Form> just to trigger unobtrusive validation. Data will be Posted with Jquery Ajax *@
 
@using (Html.BeginForm("Index","Home",FormMethod.Post,new {@id="pupilDataForm"}))
{
    <div>
        @Html.LabelFor(model => model.FirstName)
        @Html.TextBoxFor(model => model.FirstName,new{@id="FirstName"})
        @Html.ValidationMessageFor(model => model.FirstName)
 
    </div>
    <br />
    <div>
        @Html.LabelFor(model => model.LastName)
        @Html.TextBoxFor(model => model.LastName, new { @id = "LastName" })
        @Html.ValidationMessageFor(model => model.LastName)
 
    </div>
    <br/>
    @(Html.Kendo().Grid<PupilViewModel>()
                          .Name("pupilGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(p => p.PupilId).Hidden(true);
                              columns.Bound(p => p.FirstName).Title("First Name");
                              columns.Bound(p => p.LastName).Title("Last Name");
                              columns.Command(command => command.Custom("Select").Click("addSelected")).Width(180);
 
                          })
                          .Pageable()
                          .Sortable()
                          .Scrollable()
                          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .PageSize(5)
                              .Read(read => read.Action("PupilData", "Home"))
                          )
    )
 
    <div>
        <h3>Selected Pupil(s)</h3>
    </div>
 
    @(Html.Kendo().Grid<PupilViewModel>()
                          .Name("SelectedpupilGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(p => p.PupilId).Hidden(true);
                              columns.Bound(p => p.FirstName).Title("First Name");
                              columns.Bound(p => p.LastName).Title("Last Name");
                              columns.Bound(p => p.Relationshiptype).Title("Relationship").Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
 
                                                                                Html.Kendo().ComboBox()
                                                                                          .Name("Relationshiptype" + "#=PupilId#")
                                                                                          .Placeholder("Select relationship...")
                                                                                          .DataTextField("Text")
                                                                                          .DataValueField("Value")
                                                                                          .HtmlAttributes(new { style = "width: 250px", required = "required" })
                                                                                          .BindTo(new List<SelectListItem>() {
                                                                                              new SelectListItem() {
                                                                                                Text = "Father", Value = "1"
                                                                                              },
                                                                                              new SelectListItem() {
                                                                                                Text = "Mother", Value = "2"
                                                                                              },
                                                                                              new SelectListItem() {
                                                                                                Text = "Other relative", Value = "3"
                                                                                              },
                                                                                              new SelectListItem() {
                                                                                                Text = "Other non relative ", Value = "4"
                                                                                              }
                                                                                          }).ToClientTemplate().ToString());
 
 
 
                              columns.Command(command => command.Custom("Deselect").Click("removePupil")).Width(180);
                          })
                                                         .Events(ev => ev.DataBound("initCombo"))
 
 
 
    )
 
}
 
 
<div style="margin-top: 50px"><input id="postData" class="k-button" style="margin-left: 50" type="button" value="Post Data to Controller"/></div>
<script>
 
    function initCombo(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
 
    function addSelected(e) {
        e.preventDefault();
        var isExist = false;
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
        var grid = $("#SelectedpupilGrid").data("kendoGrid");
        var data = grid.dataSource._data;
        if (data.length === 0) {
            grid.dataSource.add(dataItem);
            window.scrollTo(0, document.body.scrollHeight);
 
        } else if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].PupilId === dataItem.PupilId) {
                    isExist = true;
                    toastr.error('This Pupil has already been Selected');
                }
 
            }
            if (isExist === false) {
                grid.dataSource.add(dataItem);
                window.scrollTo(0, document.body.scrollHeight);
 
            }
        }
    }
 
    function removePupil(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var grid = $("#SelectedpupilGrid").data("kendoGrid");
        grid.dataSource.remove(dataItem);
 
    }
 
    $("#postData").click(function () {
 
        if (!$('#pupilDataForm').valid())
            return false;
        var pupils = [];
        var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total();
        var gridItems = $("#SelectedpupilGrid").data("kendoGrid").items();
        // gridItems.length gives 1 even if there is nothing in the Grid (Is this a bug?)
        // thats the reason i am doing      
        // var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total(); to check whether Grid has something or not
 
        if (gridItems.length > 0 & gridCount !== 0) {
            for (var i = 0; i < gridItems.length; i++) {
                var relationship = $(gridItems[i]).find("input[id*='Relationshiptype']").data("kendoComboBox");
                var relationshipValue = relationship.value();
                // Couldn't find any other way of getting Grid values than doing the followoing           
                // var pupilId = $(gridItems[i]).find('td:not(:empty):first').text();
 
                var pupilId = $(gridItems[i]).find('td:not(:empty):first').text();
 
                var pupil = { pupilId: pupilId, relationshiptypeId: relationshipValue }
                pupils.push(pupil);
            }
        }
 
        var firstName = $('#FirstName').val();
        var lastName = $('#LastName').val();
 
        var viewModel = { Pupils: pupils, FirstName: firstName, LastName: lastName };
        $.ajax({
            url: '/Home/Index',
            data: JSON.stringify(viewModel),
            contentType: 'application/json',
            type: 'POST',
            success: function (request, status, error) {
                window.location = '/HomeUser/Index';
            },
            error: function (request, status, error) {
                alert(error);
            }
 
        });
 
 
 
    });
 
</script>


Konstantin Dikov
Telerik team
 answered on 27 May 2016
5 answers
374 views

Hi,

I have set a grid as  .Filterable(). The Filter dialogs of the columns are localized (german). In a date columnI can use a calender to set a data for filtering. But the calendar is shown in english. It is possible to show it in the language of the grid?

 

Peter

 

Peter
Top achievements
Rank 1
 answered on 27 May 2016
1 answer
1.2K+ views

I am having trouble getting my 'Edit' link in a row of a grid to get the row's ID so that I can fire my JavaScript. I'm doing it this way because I need to call a different controller, but just for the 'Edit' link and not the 'Details' or 'Delete' links.

This is my Grid and JavaScript code:

@(Html.Kendo().Grid(Model)
.Name("facilityContactGrid")
.Columns(columns =>
      {
          columns.Bound(c => c.ContactLastName).Width(174);
          columns.Bound(c => c.ContactFirstName).Width(140);
          columns.Bound(c => c.ContactTitleDescription).Width(223);
          columns.Bound(c => c.ContactPhoneNumber).Width(108);
          columns.Bound(c => c.ContactActiveFlag).Width(95);
          columns.Bound(c => c.PrimaryContactFlag).Width(107);
  
          columns.Bound(c => c.ContactID)
              .ClientTemplate(Html.ActionLink("Details", "Details", new { ContactID = "#=ContactID#" })
              .ToHtmlString())
              .Title("Details")
              .Width(93);
          columns.Bound(c => c.ContactID)
              .Title("Edit")
              .Filterable(false)
              .ClientTemplate("<a onclick=\"EditFacilityContact(this,'#= ContactID #')\" href='\\#'>Edit</a>");
           
          columns.Bound(c => c.ContactID)
              .ClientTemplate(Html.ActionLink("Delete", "Delete", new { ContactID = "#=ContactID#" })
              .ToHtmlString())
              .Title("Delete")
              .Width(97);
      }).Editable(editable => editable
        .DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
        .Pageable()
        .Resizable(resize => resize.Columns(true))
        .Sortable()
        .Scrollable(scr => scr.Height(470))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.ContactID))
            .PageSize(15)
            .ServerOperation(false))
     )
<script type="text/javascript">
    function EditFacilityContact() {
        var grid = $("#facilityContactGrid").data("kendoGrid");        //   THIS IS WORKING
  
  
        alert("YOU ARE HERE!!");
        return false;
    }
</script>

I'm I have tried using grid.select() and various forms of that, but none of the rows are "selected", I'm just clicking the 'Edit' link.

 

Any help with this will be greatly appreciated.

Eyup
Telerik team
 answered on 27 May 2016
1 answer
101 views

Hi,

I'm currently saving the grid state based on column reorder, resize ,show and hide. But when the grid loads, it seems to take the full height and doesn't seem to keep the actual grid height. Because of this the horizontal scroll bar goes right to the bottom of the screen.

Is there anyway to save the grid height when the screen loads back?

function loadGrid() {
            var grid = $("#unspsgrid Grid").data("kendoGrid");
            var toolBar = $("#grid  .k-grid-toolbar").html();
            var options = localStorage["grid "];
            if (options) {
                grid .setOptions(JSON.parse(options));
                $("#grid  .k-grid-toolbar").html(toolBar);
                $("#grid  .k-grid-toolbar").addClass("k-grid-top");
            }
        }

Helen
Telerik team
 answered on 27 May 2016
2 answers
135 views

Hi,

I have a DatePicker that displays the date nicely in the correct format i.e. "2016-05-26" for May 26, 2016.

 

I would like to handle badly formatted user input, like "160531" which is an allowed way to enter a date in our organisation. I want to take this date and format it correctly with some JS code. The problem is that when I input a date like this I can't get it from the datepicker in my javascript code.

JS Code:

       var date1 = kendo.toString($("#RelevantDate").data("kendoDatePicker").value(), 'd');
        var date2 = $("#RelevantDate").data("kendoDatePicker").value();

both the date1 and the date2 variable are null if I have a date like "160531". With a nicely formatted date everything works.

 

Is there any way to get a badly formatted date out of the datepicker? I want the users to be able to select the date in the picker and to enter the date manually so changing to a textbox input is not an option.

 

Best regards,

Henrik
 

Henrik
Top achievements
Rank 1
 answered on 27 May 2016
6 answers
220 views

Hello,

 

I have an empty mvc 5 c# project which I basicly put a grid in and that is now working just fine, my problem is styling and its position.

there is no CSS nothing I can see that would make the grid or the .cshtml file behave in this way. It has a margin on the left of about 1/4th of the whole screen.

This is quite annoying , I suspect something in the included stylesheets with the grid is doing this. Its not just the grid this also does the same to the footer that is rendered in the _layout.cshtml.

I want to either put a details column on the left or right of the grid that displays further details about the selected line in the grid.

 

Suggestions ?

 

Regards,

Emil 

 

Konstantin Dikov
Telerik team
 answered on 27 May 2016
4 answers
194 views
I'm using asp.net mvc 4 with a server bound grid.  When the actions are posted to my controller, they do not include the antiforgery token and therefore .net throws up an error.  I've seen examples on how to pass the token with ajax bound grids, but not with server bound grids.  How would this be accomplished?
Brad
Top achievements
Rank 1
 answered on 26 May 2016
2 answers
240 views

I have a grid with a foreign key that is displaying a dropdown in in-line edit mode. That's working fine but I would like to display multiple columns from the parent object in that dropdown not just the key as it currently does. How do I configure for that?

Here's what I have

    @(Html.Kendo().Grid<MBSData.Model.DocumentType>()
          .Name("documenttypegrid")
          .HtmlAttributes(new {style = "height:600px;"})
          .Columns(columns =>
          {
              columns.Bound(c => c.DocumentTypeId).Title("Type").Width("120px");
              columns.ForeignKey(p => p.DocumentCategoryId, (System.Collections.IEnumerable) ViewData["DocumentCategories"], "DocumentCategoryId", "DocumentCategoryId")
                  .Title("Category")
                  .Width("120px");
              columns.Bound(c => c.Description);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              }).Width("190px");
          })
          .ToolBar(toolbar => { toolbar.Create(); })
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); })
          .Filterable()
          .Scrollable(s => s.Height("auto"))
          .Resizable(resize => resize.Columns(true))
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(false)
              .Model(model => model.Id(p => p.DocumentTypeId))
              .Read(read => read.Action("DocumentType_Read", "DocumentType"))
              .Create(create => create.Action("DocumentType_Create", "DocumentType"))
              .Update(update => update.Action("DocumentType_Update", "DocumentType"))
              .Destroy(destroy => destroy.Action("DocumentType_Destroy", "DocumentType"))
          )
          .Events(events => events
              .Edit("onEdit")
          )
          )

 

Thanks.

Tom

Tom
Top achievements
Rank 1
 answered on 26 May 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?