Telerik Forums
UI for ASP.NET MVC Forum
2 answers
171 views

I am not able to bind search results to the ListView. The ListView always returns 0. 

I only wants the bind to happened when the search button is clicked. How to do it?

Code: 

 

@{
    ViewBag.Title = "Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="col-sm-12">
        @using (Html.BeginForm("excSearch", "Search", FormMethod.Post))
        {
            <div class="col-sm-12" role="form" style="text-align: center;">
                <div>
                    <span style="font-size:40px;">Search</span>
                </div>

                <div style="padding: 15px; background: rgba(240,240,240,.9)">
                    <div class="input-group form-group" style="margin-bottom: 0px !important;">
                        <input type="text" name="search_keyword" placeholder="Enter Keyword..." required="required" class="searchTxtInputs" />
                        <span class="input-group-addon" style="padding: 0px 8px 0px 8px;"><i class="fa fa-search"></i></span>
                    </div>
                    <br />                                
                    <div style="text-align: right;">                    
                        <div style="padding: 5px; display: inline-block;">
                            @(Html.Kendo().Button()
                                .Name("btnSearch")
                                .Content("Search")
                                .HtmlAttributes(new { @class = "btn-primary", type = "submit" })
                                .Events(e => e.Click("execButtonSearch"))
                            )
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-9" style="padding:0px 0px 40px 35px;">
            </div>

            <div class="articleContainer col-sm-12">
                <script type="text/x-kendo-template" id="template">
                      
                    <div class="row departmentArticleListRow">                         
                        #if(MainImage !== null && MainImage !== ""){#
                            <div class="col-lg-2 departmentArticleListImage Style_1">
                                #= htmlDecode(MainImage) #
                            </div>
                            <div class="col-lg-10 departmentArticleList">
                                #if(SEO !== null){#
                                    <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
                                #}else{#
                                    <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
                                #}#
                                <span class="departmentArticleListBlurb">   #= htmlDecode(Blurb) #</span><br /><br />
                                <span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
                            </div>
                        #}else{#
                            <div class="col-lg-12 departmentArticleList">
                                #if(SEO !== null){#
                                    <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
                                #}else{#
                                    <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
                                #}#
                            <span class="departmentArticleListBlurb"> #= htmlDecode(Blurb) #</span><br /><br />
                            <span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
                            </div>
                        #}#
                    </div>
                </script>

                <script type="text/javascript">
                    function replaceString(value) {
                        if (value)
                            return value.replace(/\s+/g, "-");
                    }
                </script>

                <script type="text/javascript">
                    function htmlDecode(value) {
                        if (value) {
                            if (value.length >= 200) {

                                var i = 200;

                                if (value.charAt(i) === ' ') {
                                    value = value.substring(0, i).trim() + "...";
                                }
                                else {
                                    while (value.charAt(i) !== ' ') {
                                        value = value.substring(0, i);
                                        i--;
                                    }
                                    value = value.trim() + "...";
                                }
                            }
                            return value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
                        }
                    }
                </script>

                @(Html.Kendo().ListView<DAL_NEW.Article>()
                    .Name("SearchArticlesList")
                    .ClientTemplateId("template")
                    .TagName("div")
                    .DataSource(datasource =>
                    {
                        datasource.Model(model =>
                        {
                            model.Id(p => p.Article_ID);
                            model.Field(p => p.Title);
                        });
                        datasource.Read(read => read.Action("excSearch", "Search"));   
                        datasource.PageSize(10);
                    })
                    .Pageable()
                    .HtmlAttributes(new { @class = "departmentListView" })
                )
            </div>
            <script>
                function execButtonSearch() {
                    $("#btnSearch")
                     .button()
                     .click(function (event) {
                         $("#SearchArticlesList").data("kendoListView").dataSource.read();
                     });
                }
            </script>

        }
    </div>

    
public ActionResult excSearch([DataSourceRequest]DataSourceRequest request, string search_keyword)
 {            
            GetSearchArticles(request, search_keyword);
            return View("Search", this);
 }

        public ActionResult GetSearchArticles([DataSourceRequest]DataSourceRequest request, string search_keyword)
        {
            List<proc_SearchNewObject> articleList = db.Proc_Search_New(Pub.Pub_ID, "*", search_keyword, null, null, null, null, null).ToList();          
            return Json(articleList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

Kiril Nikolov
Telerik team
 answered on 02 Nov 2015
2 answers
76 views

Html.Kendo().MultiSelect fails WCGA validation giving error message of missing label. This is caused by the extra <input class="k-input k-valid"> that the control generates which has no Id associated with it.

Please share what need to be done to correct this error for WCGA check?

Dimiter Madjarov
Telerik team
 answered on 02 Nov 2015
0 answers
243 views

Hi,

I have 2 tier grids​ that need to pass 2 parameters from 1st grid to 2nd grid.

1st grid is like:

        <% Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarsGridViewModel>()
            .Name("Pillars")
            .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model => model.Id(a => a.EvaluationMasterPillarId))
                  .ServerOperation(true)
                  .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarsGridAjax", "Evaluations", new { showDeleted = false }))
 ...

2nd grid is like:
        <%: Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarQuestionsGridViewModel>()
            .Name("Pillars_#=EvaluationMasterPillarId#")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.EvaluationVersionQuestionId))
                    .ServerOperation(false)
                    .Create(create => create.Action("InsertEvaluationVersionQuestion", "Evaluations", new { prevEvaluationVersionId = "#=EvaluationVersionId#", prevEvaluationMasterPillarId = "#=EvaluationMasterPillarId#" }))
                    .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarQuestionsGridAjax", "Evaluations", new { evaluationVersionId = "#=EvaluationVersionId#", evaluationMasterPillarId = "#=EvaluationMasterPillarId#", showDeleted = false }))
...
This is not working for only EvaluationMasterPillarId is passed. So I think we need to pass EvaluationVersionId too. How to do it?
Thanks.

york
Top achievements
Rank 1
 asked on 31 Oct 2015
1 answer
305 views

Hello,

I'm having some problems with data validation with the kendo grid. I've set up the Grid to use a model that has several fields. I'm most interested in the DateTime field for which I've set up data annotations to help with validation. I've labeled the field to be Required, to use a regular RegularExpression, and I've also specified an EditorTemplate called "BeginDateEditor". The editing mode is set up to be InLine. The problem occurs when I actually try to edit the field. The data validation doesn't seem to work. The editing will allow the user to close the cell with no value where in fact it should notify the user that there is a problem and keep the cell open for editing. I've attached a sample project to illustrate the problem. 

Thank you.

Rosen
Telerik team
 answered on 30 Oct 2015
1 answer
159 views

Hello,

 I'm having problem with serverside filtering using autocomplete. Due to fact that Autocomplete is still unavailable at MVC Wrapper for ASP.NET 5 MVC 6, im using following code to initialize autocomplete: 

<script>
    var dataSource = new kendo.data.DataSource({
        serverFiltering: true,
        serverOperation: true,
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                url: "@Url.Content("~/api/Get")",
                type: "GET"
            }
        },
        schema: {
            data: "Data",
            total: "Total"
        }
    })
 
    $("#@Model.Name").kendoAutoComplete({
        placeholder: "@Model.Watermark",
        minLength: 3,
        filter: "contains",
        dataSource: dataSource
 
    });
</script>

 As the result Query string that is send to server always looks like this : ?sort=&group=&filter= and because of that mapping to DataSourceRequest on serverside always results with empty filters

 

 

 

Daniel
Telerik team
 answered on 30 Oct 2015
1 answer
73 views

I am using a custom keydown function that works great to get enter to work as a tab in Add mode and to close and move down a row in Update mode (batch editing on the grid).  However, I just realized that the enter key is closing the cell and moving down even if the cell validation fails.  How do I check whether the cell is valid before moving off the cell?

Here is the portion of the keydown function that handles the enter key...

 

if (e.keyCode === kendo.keys.ENTER) {            
            currentCell = $(e.target).closest('td');
            currentRow = $(e.target).closest('tr');
            cellIndex = currentCell.index();
            //debugger;
            if (cellIndex > -1) {
                grid = currentRow.closest("[data-role=grid").data("kendoGrid");                
                model = grid.dataItem(currentRow);
                if (model.isNew()) {
                    e.keyCode = kendo.keys.TAB;
                }
                else {
                    //debugger;
                    var nextRow = currentRow.next();
                    if (nextRow.length) {
                        //debugger;
                        var nextCell = nextRow.find("td").eq(cellIndex);
                        setTimeout(function () {
                            grid.closeCell(currentCell);
                            grid.current(nextCell);
                            grid.editCell(nextCell[0]);
                        }, 50);
                    }
                }
            }
        }

Rosen
Telerik team
 answered on 30 Oct 2015
1 answer
765 views

I'm loading the Grid ​in MVC, and I 'm making a rowTemplate, as I would like to bind custom javascript functions. I'm building my javascript in anonymous functions, which I'm later on are going to Grunt. I would like not to write inline javascript in my cshtml-files, as I'm trying to keep a clean structure. And I would also like to keep the Grid in ASP.NET MVC and not Kendo UI, as I'm going to use data annotations.

Via Events => Events.Change I'm able to find the whole Grid element via $("#UnitsList").data("kendoGrid") in my Javascript code. But I'm not able to bind any custom click events to the row template, e.g { click: seeUnitTree }.

The Grid loads fine and I'm getting the data displayed as I want it. But I can't seem to bind anything to the grid at all. I'm also trying via MVC trying to bind an OnChange event when I click on a cell. This only fires the when the grid is loaded.

//removed for abbreviation
        .ClientRowTemplate(
            "<tr data-id='#: Id #' class='row-unit unit-#: Id #'>" +
                "<td class='unit-id'>" +
                       "<span> #= Id # </span>" +
                "</td>" +
                "<td class='unit-name'>" +
                    "<a href='" +
                                Url.Action("UnitDetails", "BusinessUnitsObjects") +
                        "'>" +
                        "<span> #= Name # </span></a>" +
                "</td>" +
                "<td class='address-1'>" +
                    "#: Address1 #" +
                "</td>" +
                "<td class='address-2'>" +
                    "#: Address2 #" +
                "</td>" +
                "<td class='zipcode text-center'>" +
                    "#: ZipCode #" +
                "</td>" +
                "<td class='town'>" +
                    "#: Town #" +
                "</td>" +
                "<td class='country'>" +
                    "#: Country #" +
                "</td>" +
                "<td class='parent-name'>" +
                    "<div class='input-group in-active'>" +
                        "<input type='text' class='form-control' value='#: ParentId #' data-bind='events: { click: seeUnitTree }'>" +
                        "<span class='glyphicon glyphicon-list input-group-addon'></span>" +
                    "</div>" +
                "</td>" +
             "</tr>"
        )
//removed for abbreviation

 

Javascript functions:

1.:

var grid = $("#UnitsList").data("kendoGrid");
grid.bind("seeUnitTree", function () {
    console.log('clickity click');
});

 

2.:

var viewModel = kendo.observable({
    seeUnitTree: function (e) {
         console.log('clickity click');
    }
});
var grid = $("#UnitsList").data("kendoGrid");
kendo.bind(grid, viewModel);​

 

What am I missing?

Se attached files for further detail in code.

 

 

Rosen
Telerik team
 answered on 30 Oct 2015
1 answer
104 views

Hello

First, is it possible to modify the source code of the free trial?

If it is possible:

It is the date title i want to change, see picture.
To change the date to the week number where in the javascript should I change? And which amendment should I do?

Grateful for all the help I can get

Vladimir Iliev
Telerik team
 answered on 30 Oct 2015
1 answer
203 views

 I've created an ASP .NET 5.0 MVC project in Visual Studio 2015 and have attempted to import the Kendo.Mvc dependency using the following configuration:

 project.json

"dependencies": {
  "Kendo.Mvc": "2015.3.930",
  ...
},
 
"frameworks": {
  "dnx451": { }
},​

However, unlike my ASP .NET 4.x MVC projects, TextBoxFor and AutoComplete (among others) are not available.  This works for my 4.x projects...

@Html.Kendo().TextBoxFor(...
@Html.Kendo().AutoComplete(...

But, in my 5.0 projects, TextBoxFor and AutoComplete are not found.  Inspecting the Kendo library, I ​saw that they no longer exist in the widget factory.  And, the DLL in the package that is retrieved by Visual Studio is significantly smaller than the DLL that comes with my ASP .NET 4.x projects.

Is this intended?  And, if so, what alternative would you suggest? 

Thanks.
Alex Gyoshev
Telerik team
 answered on 30 Oct 2015
1 answer
629 views

I have a nested Grid with a ClientTemplate in a bounded column:

@(Html.Kendo().Grid<RepViewModel>().Name("RepCodes_#=UserId#").Columns(column =>
{
  column.Bound(model => model.RepCode);
  column.Bound(model => model.IsPrimary).Title("Primary").ClientTemplate("\\#=setPrimaryTemplate(data, 'RepCodes_#=UserId#')\\#");
}

The ClientTemplate displays a "Set" or "Unset" button in the external template:

<script type="text/x-kendo-template" id="setPrimaryTemplate">
  # if (IsPrimary){#
  <a href="javascript:void(0);" id="ix_unsetPrimary#=RepCode#">Unset</a>
  #}else{#
  <a href="javascript:void(0);" id="ix_setPrimary#=RepCode#">Set</a>
  #}#
</script>

In the function, I want to get the dataItem of the current row so I can set IsPrimary to true or false. How can I do that?

<script type="text/javascript">
  function setPrimaryTemplate(data, gridName) {
    var grid = $('#'+ gridName).data('kendoGrid');
    var dataItem = grid.dataItem($(this).closest("tr")); <- this is currently displaying as null
    var data = {IsPrimary: IsPrimary};
  
    var setPrimaryTemplate = kendo.template($('#setPrimaryTemplate').html());
  }
</script>

Kiril Nikolov
Telerik team
 answered on 29 Oct 2015
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?