kendo ui - KendoGrid Filter not full width -


i using kendogrid , using bootstrap, in _layout have

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.blueopal.min.css" /> 

its placement after bootstraps css.

the code generates grid

function showdepartmentgrid(a) {     $('#department-grid').kendogrid({         norecords: {             template: "no records."         },         datasource: {             data:         },         schema: {             model: {                 fields: {                     departmentid: { type: "number" },                     departmentname: { type: "string" },                     division: { type: "string" },                     county: { type: "string" }                 }             }         },         filterable: {             mode: "row"         },         columns: [             {                 template: '<button type="button" class="edit-link"><span class="glyphicon glyphicon-edit" style="color:green"></span></button>',                 width: 45             },             {                 field: "departmentid",                 title: "id",                 hidden: true             },             {                 field: "departmentname",                 title: "department",                 filterable: {                     cell: {                         showoperators: false,                         operator: "contains"                     }                 }             },             {                 field: "divisionname",                 title: "division",                 filterable: {                     cell: {                         showoperators: false,                         operator: "contains"                     }                 }             },             {                 field: "countyname",                 title: "county",                 filterable: {                     cell: {                         showoperators: false,                         operator: "contains"                     }                 }             },             {                 template: '<button type="button" class="delete-link"><span class="glyphicon glyphicon-remove" style="color:red"></span></button>',                 width: 45             }                     ],         databound: function (e) {             this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();             $(".delete-link").click(function (event) {                 event.preventdefault();                 if (confirm("do want delete row?")) {                      var currentrow = $(this).closest('tr');                     var grid1 = $('#department-grid').data('kendogrid');                     var curritem = grid1.datasource.getbyuid($(currentrow).data('uid'));                      deletedepartment(curritem.departmentid);                 }                 return false;             });              $(".edit-link").click(function (event) {                 var currentrow = $(this).closest('tr');                 var grid1 = $('#department-grid').data('kendogrid');                 var curritem = grid1.datasource.getbyuid($(currentrow).data('uid'));                  hwcstorage.keys.updateid = curritem.departmentid;                  departmentupdateeditor();             });          },         scrollable: true,         selectable: "row",         change: function (e) {             var detailrow = this.dataitem(this.select());             var departmentid = detailrow.get("departmentid");         }     }); } 

here pic of filters like

grid

as can see in circle area's input not @ full width , leaves light blue. idea on how remove blue space input @ max width?


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -