在kendo网格中显示值

时间:2013-08-05 06:48:07

标签: asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 kendo-ui kendo-grid

我试图在按钮点击中使用不使用任何数据库的自定义列表来显示kendo Ui网格中的detials,但是我无法在网格中显示详细信息,为此我已经这样做了..

这是我的模特

namespace KendoPratapSampleMVCApp.Models
{
    public class SampleGrids
    {
        public List<Sample> samples;
    }
    public class Sample
    {
        public string SampleDescription { get; set; }
        public string SampleCode {get; set;}
        public string SampleItems { get; set; }
    }
}

这是控制器(这里我在getsamples()事件中调用PostValues方法(这是按钮点击事件))

  namespace KendoPratapSampleMVCApp.Controllers
   {
     public class SearchResultsDisplayController : Controller
     {
        //
        // GET: /SearchResultsDisplay/

        public ActionResult Index()
        {
            return View();
        }
        public static IEnumerable<Sample> GetSamples()
        {
            List<Sample> sampleAdd = new List<Sample>();
            Sample s12 = new Sample();
            s12.SampleCode = "123se";
            s12.SampleDescription = "GOOD";
            s12.SampleItems = "newone";

            Sample s2 = new Sample();
            s2.SampleCode = "234se";
            s2.SampleDescription = "Average";
            s2.SampleItems = "oldone";

            sampleAdd.Add(s12);
            sampleAdd.Add(s2);            
            return sampleAdd;
        }
        [HttpPost]
        public ActionResult PostValues(Sample model)
        {
            return View("Index",GetSamples());               
        }
        public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {
            return Json(GetSamples().ToDataSourceResult(request));
        }     
    }
}

这是我的观点(这里我使用jquery进行绑定)

 @Scripts.Render("~/bundles/jquery")     
<script type ="text/javascript">
    $('#Submit1').click(function () {
        alert('1'); // dint get this alert when I click on submit button
        $('#grid12').data('kendoGrid').dataSource.read();
       // $('#grid12').css("display", "block");
    });
</script>    
@model IEnumerable<KendoPratapSampleMVCApp.Models.Sample>    
@{
    ViewBag.Title = "Index";
}    
<h2>Index</h2>
@using (Html.BeginForm("PostValues", "SearchResultsDisplay", FormMethod.Post))
{ 

    <input id="Submit1" type="submit" value="SubmitValue" />
    @(Html.Kendo().Grid<KendoPratapSampleMVCApp.Models.Sample>()    
    .Name("grid12")
    .Columns(columns => {
        columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
        columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
        columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .AutoBind(false) // here I am disabling automatic binding at page load
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "SearchResultsDisplay"))
     )
  )
}

当我们提交按钮时,我无法绑定数据任何建议和任何想法都会非常感谢我... 非常感谢....

2 个答案:

答案 0 :(得分:3)

您必须在Document.ready这样添加script

<script type="text/javascript">
    $(document).ready(function () {
        $('#Submit1').click(function () {
            alert('1'); // dint get this alert when I click on submit button
            $('#grid12').data('kendoGrid').dataSource.read();
            // $('#grid12').css("display", "block");
        });
    });
</script>

您必须将按钮类型Submit更改为button

 <input id="Submit1" type="button" value="SubmitValue" />

并且您的网格完美绑定。

答案 1 :(得分:0)

将按钮类型从“提交”更改为“按钮”,并在javascript中调用它的点击事件。

$(document).ready(function(){
   $('#yourButtonId').click(function(){

   //write the  desired logic here

    })
})