Tuesday 19 November 2013

Custom Column Filter only with a single textbox on each column without any operators and buttons.







Here i find custom search functionality for KendoUI grid. Hope you really find helpfull.

HTML
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="grid"></div>
</body>
</html>
 

JavaScript
  dataSource:[ {
      foo: "Foo 1",
      bar: "Bar 1"
    } , {
      foo: "Foo 2",
      bar: "Bar 2"
    }
  ]
});

var grid = $("#grid").data("kendoGrid");

$("<tr><th class='k-header' data-field='foo'><input /></th><th data-field='bar' class='k-header' ><input /></th></tr>").appendTo($("#grid thead")).find("input").keyup(function() {
 
  grid.dataSource.filter({
    operator: "contains",
    value: $(this).val(),
    field: $(this).parent("th").data("field")
  });
 
});


http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/custom-column-filter-only-with-a-single-textbox-on-each-column-without-any-operators-and-buttons.aspx


Another link is

http://jsbin.com/ihanun/1/edit

6 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    angularjs Training in chennai
    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    ReplyDelete
  3. I likable the posts and offbeat format you've got here! I’d wish many thanks for sharing your expertise and also the time it took to post!!
    Python training in marathahalli | Python training institute in pune

    ReplyDelete
  4. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.

    blueprism training in chennai | blueprism training in bangalore | blueprism training in pune | blueprism online training

    ReplyDelete
  5. I am so proud of you and your efforts and work make me realize that anything can be done with patience and sincerity. Well I am here to say that your work has inspired me without a doubt.
    Java training in Annanagar | Java training in Chennai

    Java training in Chennai | Java training in Electronic city

    ReplyDelete
  6. This is such a good post. One of the best posts that I\'ve read in my whole life. I am so happy that you chose this day to give me this. Please, continue to give me such valuable posts. Cheers!

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete