How tomake ComboBox in Grid Mandatory

2 posts, 0 answers
  1. Saadat
    Saadat avatar
    2 posts
    Member since:
    Oct 2015

    Posted 25 May Link to this post

    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>


  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 27 May Link to this post

    Hello Saadat,

    Regarding your first question, you could set the [Required] DataAnnotation attribute for your Relationshiptype field in the model:
    For the second question, once you re-initialize the second Grid, all its content and previous changes will be cleared, so you need to save the changes before that.

    As for the final question, the items method will search the Grid for TR elements in the tbody, so if there are no rows in the grid, the length should be zero. Can you please confirm if there are no items in the grid (TR elements) when you call the items method?


    Best Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top